1

Пишу в первый раз калькулятор на JavaScript. Столкнулся с проблемой: не знаю как передать из полей ввода первое и второе слагаемое в переменные скрипта, а так же как потом вывести ответ

index.html

<!DOCTYPE html> <html>

<head>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="style.css">
    <title>Калькулятор</title>
</head>
<body>
    <h1 align="center">Введите 1 и 2 число</h1>
    <div class="mainn">
        <input type="text" name="first" size="10">
        <p>+</p>
        <input type="text" name="second" size="10"><br>
        <button>=</button><br>
        <h1></h1> <!--//ответ -->
    </div>
    <script type="text/javascript">
        var a1 , a2;
        var a3 = a1 + a2;
        //как мне вывести ответ?
    </script>
</body> </html>

style.css //вдруг он тоже важен

    body{
    background-color: wheat;
}
    .mainn{
    text-align: center;
}
1

1 ответ 1

2

function sum(){
  var s1 = parseInt(document.getElementById("first").value);
  var s2 = parseInt(document.getElementById("second").value);
  var s3 = s1 + s2;
  var rez = document.getElementById("rez").innerText = s3;
}
document.getElementById("go").onclick = function() {
  sum();
}
body{
    background-color: wheat;
}
.mainn{
    text-align: center;
}
<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="style.css">
    <title>Калькулятор</title>
</head>
<body>
    <h1 align="center">Введите 1 и 2 число</h1>
    <div class="mainn">
        <input type="text" id="first" size="10">
        <p>+</p>
        <input type="text" id="second" size="10"><br>
        <button id="go">=</button><br>
        <h1 id="rez"></h1> <!--//ответ -->
    </div>
</body>
</html>

5
  • что означет кусок кода, выделенный курсивом document.getElementById("go").onclick = function() ? Это значит что при нажатии могут выполняться ток функции? 29 сен 2018 в 10:44
  • @WetSnaider этот кусок кода навешивает обработчик на кнопку по событию onclick, т.е. при нажатии на кнопку будет вызвана функция sum(), эту функцию можно вызвать по другому <button onclick="sum();">=</button>, но такую запись советуют избегать.
    – aSpectro
    29 сен 2018 в 10:56
  • спасибо что объяснил 29 сен 2018 в 11:00
  • А почему калькулятор не считает 0,05+0,11=??? 20 мар 2019 в 10:29
  • @Сергей потому что я перевожу входящие данные в целочисленный тип, тебе нужен вещественный parseFloat() вместо parseInt()
    – aSpectro
    21 мар 2019 в 11:25

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.