要素は、バックCodePen、<a href="https://codepen.io/rynsp8/pen/PEGxpj" rel="nofollow noreferrer">https://codepen.io/rynsp8/pen/PEGxpj</a>に単純な乗算/除算プログラムを作成しようとすると

Question

未定義

を来ているが、私は、コンソールに番号を印刷し、あるいは機能を実行しようとするたびに、それは私に何も与えません。私は空白をコンソールに表示し、HTMLに渡すために0を与えます。

var numberOne = document.getElementById("firstNumber").value; 
var numberTwo = document.getElementById("secondNumber").value; 

$('#multiply').click(function() { 
    var product = numberOne * numberTwo; 
    console.log(numberOne); 
    return document.getElementById('answer').innerHTML = product; 
}) 

$('#divide').click(function() { 
    var dividend = numberOne/numberTwo; 
    return document.getElementById('answer').innerHTML = dividend; 
}) 

、ここでは私のHTML

<div> 
    <div id="container"> 
    <section id="numberInput"> 
     <input id="firstNumber" type="number" placeholder="Number 1"> 
     <input id="secondNumber" type="number" placeholder="Number 2"> 
    </section> 
    <section id="buttonCTN"> 
     <button id="multiply" class="button">Multiply</button> 
     <button id ="divide" class="button">Divide</button> 
    </section> 
    <section id="ansSEC"> 
     <p id="answer"></p> 
    </section> 
    </div> 
</div> 

Answer 1

var txtOne = document.getElementById("firstNumber"); 
var txtTwo = document.getElementById("secondNumber"); 

$('#multiply').click(function() { 

var numberOne = txtOne.value; //Now we can Get Updated value from textbox 
var numberTwo = txtTwo.value; 

var product = numberOne * numberTwo; 
console.log(numberOne); 
return document.getElementById('answer').innerHTML = product; 
}) 

$('#divide').click(function() { 

var numberOne = txtOne.value; //Now we can Get Updated value from textbox 
var numberTwo = txtTwo.value; 

var dividend = numberOne/numberTwo; 
return document.getElementById('answer').innerHTML = dividend; 
}) 

あなたはその瞬間のテキストボックスで、ページロードの値を取得しているではnumberOneとnumberTwo変数に更新されていないイベント値をクリックしblank.Onあります。クリックイベントで値を取得する必要があります。