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

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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