Умножение в javaScript

Question

начал учить JS, в итоге захотел сделать небольшой сайт калькулятор так скажем. Но при умножения значения выдает undefined или вообще NaN. Сижу уже полтора часа пробовал все варианты. В чем проблема?

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Общий балл аттестата</title>
   
</head>
<body>
 <div id="main">
    <p class="article">Калькулятор среднего балла для поступления</p>   
    <input id="one" oninput="MyFunc()">Ваш общий бал аттестата (пример 4.75)<br>
 </div>

 <script>
    function MyFunc () {
        var cert = document.getElementById("one");
        var first = 20;
        var proiz = 0;
        proiz= cert * 20;
        console.log(proiz.value)
    }
 </script>
</body>
</html>

Answer 1

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Общий балл аттестата</title>
   
</head>
<body>
    <div id="main">
        
    <p class="article">Калькулятор среднего балла для поступления</p>   
    <input id="one" oninput="MyFunc()">Ваш общий бал аттестата (пример 4.75)<br>

    </div>
     

 <script>
    function MyFunc () {
    var cert = document.getElementById("one").value;
    var first = 20;
    var proiz = 0;
    proiz= cert * 20;
    
   console.log(proiz)
  }
</script>
</body>

</html>

Не там ".value". Value нужно брать у input'a

Answer 2

В переменной cert находится просто элемент, вы не получили его value, ну а в console.log(proiz.value) value лишнее:

    function MyFunc () {
    var cert = document.getElementById("one").value
    var first = 20;
    var proiz = 0;
    proiz= cert * 20;
   console.log(proiz)
  }

    <div id="main">

    <p class="article">Калькулятор среднего балла для поступления</p>
    <input id="one" oninput="MyFunc()">Ваш общий бал аттестата (пример 4.75)<br>

    </div>

Answer 3

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Общий балл аттестата</title>
   
</head>
<body>
    <div id="main">
        
    <p class="article">Калькулятор среднего балла для поступления</p>   
        <input id="one" oninput="MyFunc()">
        <p>Ваш общий бал аттестата (пример 4.75):</p>
        <p id='out'></p>
    </div>
     

 <script>
    function MyFunc(){
    var cert = document.getElementById("one").value;
    var first = 20;
    var proiz = 0;
    proiz= parseInt(cert * 20);
    document.getElementById("out").innerHTML = proiz;
  }
</script>
</body>

</html>

Answer 4

document.getElementById возвращает html-элемент.

Чтобы получить значение, нужно обратиться к свойству .value. Значение в этом случае всегда строка, поэтому лучше ее приводить к числу.

Результатом произведения является число. У чисел нет свойства value поэтому при выводе в console.log нужно это опустить.

В итоге код может выглядеть так:

function MyFunc() {
  var cert = Number(document.getElementById("one").value);
  var first = 20;
  var proiz = 0;
  proiz = cert * 20;
  console.log(proiz);
}

<div id="main">
  <p class="article">Калькулятор среднего балла для поступления</p>
  <input id="one" oninput="MyFunc()">Ваш общий бал аттестата (пример 4.75)<br>
</div>

БЛОГ НА HUSL

Умножение в javaScript

Ответы (4 шт):