所選元素返回未定義

Question

嘗試在CodePen中創建簡單的乘法/除法程序， 網址為https://codepen.io/rynsp8/pen/PEGxpj ，

但是，每當我嘗試將數字打印到控制台，甚至運行該功能時，它都不會給我任何幫助。 我將空白打印到控制台，並給我一個0以傳遞到我的HTML中。

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變量中更新。 您應該獲得有關點擊事件的值。