假设添加两个数字的脚本有问题

Question

我编写了一个代码，旨在将两个数字相加，当我要求答案时，它一直返回 NaN，我是新手，但想知道为什么这段代码特别不起作用，所以我可以确定我不会再犯错了。

HTML

<html>
<head>
    <link rel="stylesheet" href="styles.css">
    <title>April23</title>
</head>
<body>
<!--Top Portion-->
<div class="container1">

    <div class="calculator">
<label for="num1" id="num1">Enter First Number </label>
<input type="text" id="number0" name=num1 size=10>  
</div>
<div class="calculator">
<label for="num2" id="num2">Enter Second Number</label>
<input type="text" id="number1" name=num1 size=10>  
</div>

<div class="calculator2" id="button">
        <button id="btn">Get Result</button>
        </div>


<div class="calculator">
    <label for="num2" id="sum"> Sum   </label>
    <input type="text" id="number" name=num1 size=10>   
    </div>
    
    



</div>

<div class="container1" id="c2"></div>
<div class="container1"></div>





</body>
<script src="main.js"></script>
</html>

JavaScript

/*this portion is to check if the blank input boxes are filled or not*/
const num1 = document.querySelector('#number0');
const num2 = document.querySelector('#number1');

/*this portion is to grab the value of the input boxes if they are filled*/
var number1=document.getElementById("number0").value;
var number2=document.getElementById("number1").value;

/*this portion is to convert the values into integers*/
x = parseInt(number1);
y = parseInt(number2);

const calc = document.querySelector(".calculator2");





calc.addEventListener('click', (e)=>
{ 

    e.preventDefault();
if(num1.value===''  || num2.value ===''){
    alert('please enter both numbers');
}
else{

    
   alert(x+y);
}

}
)

所以第一个条件有效并发送一个警告框，要求输入两个数字，第二个条件 returns 一个带有 NaN 的警告框，而不是将两个数字相加

css

body{
margin: 0;;
/*background: url('image0.jpg') no-repeat;  ;*/
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
background-color: thistle;


}


.container1{
position: relative;  
height: 50vh;
background: rgb(39, 105, 160);
opacity: 0.9;
display: flex;
flex-direction: column;

justify-content: center;
gap: 2rem;

}

.calculator{
    margin-left: 4rem;
}

#number{
    margin-left: 7.5rem;
}
#number0{
margin-left: 1rem;
}




#c2{

    background-color: rgb(196, 169, 169);
}

.calculator2{
    margin-left: 4rem;
}

Answer 1

点击按钮后取出数字，而不是之前。其他都很好。

提示： 在添加数字时，必须始终有一个类型编号，因此最好在 input 上添加 type="number"，这样用户不能输入字母或特殊字符。

const calc = document.querySelector(".calculator2");

calc.addEventListener("click", (e) => {
  e.preventDefault();
  const x = document.querySelector("#number0").value;
  const y = document.querySelector("#number1").value;

  if (x === "" || y === "") {
    alert("please enter both numbers");
  } else {
    alert(parseInt(x) + parseInt(y));
  }
});

body {
  margin: 0;
  ;
  /*background: url('image0.jpg') no-repeat;  ;*/
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  background-color: thistle;
}

.container1 {
  padding: 2rem;
  position: relative;
  height: 50vh;
  background: rgb(39, 105, 160);
  opacity: 0.9;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2rem;
}

.calculator {
  margin-left: 4rem;
}

#number {
  margin-left: 7.5rem;
}

#number0 {
  margin-left: 1rem;
}

#c2 {
  background-color: rgb(196, 169, 169);
}

.calculator2 {
  margin-left: 4rem;
}

<div class="container1">
  <div class="calculator">
    <label for="num1" id="num1">Enter First Number </label>
    <input type="number" id="number0" name=num1 size=10>
  </div>
  <div class="calculator">
    <label for="num2" id="num2">Enter Second Number</label>
    <input type="number" id="number1" name=num1 size=10>
  </div>

  <div class="calculator2" id="button">
    <button id="btn">Get Result</button>
  </div>


  <div class="calculator">
    <label for="num2" id="sum"> Sum </label>
    <input type="text" id="number" name=num1 size=10>
  </div>
</div>

<div class="container1" id="c2"></div>
<div class="container1"></div>

假设添加两个数字的脚本有问题

Problem with script that is suppose to add two numbers

html

javascript

css

variables

addition