Калькулятор площади и периметра квадрата

@ObamaFunk · Регистрация: 13.05.2022

Студворк — интернет-сервис помощи студентам

Сделайте калькулятор, который будет находить площадь и периметр квадрата. То есть у вас будет поле ввода стороны квадрата в см, кнопка "Вычислить", при нажатии, которой под кнопкой будет выводится площадь и периметр квадрата.

HTML5
1
2
3
4
5
6
7
<h1>Калькулятор</h1>
        <div>
            <input type = "side" placeholder="0"/>
            <button class = "create-btn">расчёт</button>
        </div>
    <h2>Результат</h2>
    <ul class="result"></ul>

@Padonak · 22.09.2022, 16:19

ObamaFunk, вам совсем не стыдно?

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title></title>
    <style>
    body,input{
    text-align: center;
    }
    div{
    padding: 10px;
    }
    </style>
   <script>
   onload = function(){
   const _sl = document.querySelector('#sidelength'),
         _p = document.querySelector('#res_p'),
         _s = document.querySelector('#res_s');
         
    _sl.addEventListener('keyup', function(){
    this.value = this.value.replace(/[^\d]+/ig, '');
    _p.innerHTML = this.value * 4;
    _s.innerHTML = this.value ** 2;
    });
    
    _sl.focus();
   }
   </script>
  </head>
  <body>    
    <div>Сторона: <input type="text" id="sidelength" /></div>
    <div>Периметр: <span id="res_p"></span></div>
    <div>Площадь: <span id="res_s"></span></div>
  </body>
</html>

@ObamaFunk · 22.09.2022, 17:43 **[ТС]**

Padonak, стыдно((
просто я неделю сижу уже над этим заданием( спасибо за решение, но к сожалению оно написано слишком хорошо, я только на стадии изучения DOM. и мне не совсем понятен код в вашем решении. То что я написал в HTML это шаблон страницы с кнопкой, а код мне нужно в JS.

@Padonak · 22.09.2022, 18:18

ObamaFunk, вариант под вашу разметку. Обратите внимание, что данный код допускает введение любых символов в качестве значения длины стороны квадрата, поэтому возможны кривые вычисления.

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title></title>
  </head>
  <body>    
    <h1>Калькулятор</h1>
        <div>
            <input type="text" class="side" placeholder="Введите длину стороны квадрата" />
            <button class="create-btn">расчёт</button>
        </div>
    <h2>Результат</h2>
    <ul class="result"></ul>
    <script>
    document.querySelector('.create-btn').addEventListener('click', function(){
    const val = document.querySelector('.side').value || 0;
    document.querySelector('.result').innerHTML = 'Периметр: ' + val * 4 + '<br />' + 'Площадь: ' + val * val;
    });
    </script>
  </body>
</html>

@ObamaFunk · 22.09.2022, 20:03 **[ТС]**

JavaScript
1
2
3
4
document.querySelector('.create-btn').addEventListener('click', function(){
    const val = document.querySelector('.side').value || 0;
 document.querySelector('.result').innerHTML = 'Периметр: ' + val * 4 + '<br />' + 'Площадь: ' + val * val;
});

у меня почему-то не срабатывает(

@klyapa · 22.09.2022, 20:54

HTML5
1
2
<input type="number" onchange="res.innerHTML=`S=${parseInt(this.value)**2} P=${parseInt(this.value)*4}`">
<span id="res"></span>

@Padonak · 23.09.2022, 16:50

Сообщение от ObamaFunk

не срабатывает

Скорее всего, это из-за того, что вы взяли только JS из моего примера и подключили к своей разметке. Я же её немного исправил, т.к. у вас там был input type = "side", но я такого типа инпута не знаю, поэтому сделал его текстовым, а "side" пошло в атрибут class...

Новые блоги и статьи Все статьи Все блоги /
PhpStorm 2025.3: WSL Terminal всегда стартует в ~ and_y87 14.12.2025 PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .	Access VikBal 11.12.2025 Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.	Новый ноутбук volvo 07.12.2025 Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro	Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .	От async/await к виртуальным потокам в Python IndentationError 23.11.2025 Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .
Поиск "дружественных имён" СОМ портов Argus19 22.11.2025 Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .	Сколько Государство потратило денег на меня, обеспечивая инсулином. Programma_Boinc 20.11.2025 Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .	Ломающие изменения в C#.NStar Alpha Etyuhibosecyu 20.11.2025 Уже можно не только тестировать, но и пользоваться C#. NStar - писать оконные приложения, содержащие надписи, кнопки, текстовые поля и даже изображения, например, моя игра "Три в ряд" написана на этом. . .	Мысли в слух kumehtar 18.11.2025 Кстати, совсем недавно имел разговор на тему медитаций с людьми. И обнаружил, что они вообще не понимают что такое медитация и зачем она нужна. Самые базовые вещи. Для них это - когда просто люди. . .	Создание Single Page Application на фреймах krapotkin 16.11.2025 Статья исключительно для начинающих. Подходы оригинальностью не блещут. В век Веб все очень привыкли к дизайну Single-Page-Application . Быстренько разберем подход "на фреймах". Мы делаем одну. . .

@ObamaFunk 0 / 0 / 0 Регистрация: 13.05.2022 Сообщений: 44
	22.09.2022, 17:43 [ТС]
	Padonak, стыдно(( просто я неделю сижу уже над этим заданием( спасибо за решение, но к сожалению оно написано слишком хорошо, я только на стадии изучения DOM. и мне не совсем понятен код в вашем решении. То что я написал в HTML это шаблон страницы с кнопкой, а код мне нужно в JS. 0

Калькулятор площади и периметра квадрата

Решение