个人中心
gpt4 book ai didi

javascript - 用户输入不被识别为整数

转载 作者：行者123 更新时间：2023-11-30 12:05:53 25 4
gpt4 key购买 nike

我正在研究一个计算器，它可以将用户在网站上输入的 2 个数字相加。

我的添加数字和构建 HTML 并将其注入(inject) HTML 的功能有效，只有我的代码返回给我:“NaN”(不是数字) Check out my code right here on JSFiddle. 

  var userInput1 = parseInt(document.getElementById('userInput1').value);
  var userInput2 = parseInt(document.getElementById('userInput2').value);
  var button = document.getElementById('myButton');
  var resetButton = document.getElementById('resetButton');
  var contentWrap = document.getElementById('contentWrap');


  var total = addTheseNumbers(userInput1, userInput2);


  button.addEventListener('click', handleClick);


//build html and push to page
function buildHtml(){
    contentWrap.innerHTML = total;

  }



      //calculator
function addTheseNumbers(a, b)
{
 var sum = a + b;
 return sum;
}

      //handle user clicking the button
    function handleClick (event) 
    {
      if(document.getElementById('userInput1') == 0 && document.getElementById('userInput2') == 0){
            errorMessage.classList.remove('hidden')
      }  

      else {
          addTheseNumbers (userInput1, userInput2);
          buildHtml();
      }
}

我试了很多方法，在document.getElementById前加上一个+，也加了parseINT。为了检查计算器函数和 buildHTML 函数是否正常工作，我将 var 更改为整数，一旦我这样做，我就会得到正确的结果。这(可能)意味着问题在于代码无法将用户输入识别为数字。

预先感谢您提供的所有帮助!

最佳答案

变量缓存在

  var userInput1 = parseInt(document.getElementById('userInput1').value);
  var userInput2 = parseInt(document.getElementById('userInput2').value);

因此，即使输入被更新或修改，它们也会保持原样。这是我改变的地方

function buildHtml(total){ // added argument for better flexibility 
    contentWrap.innerHTML = total;
}

和

var total = addTheseNumbers(userInput1.value, userInput2.value);

注意，我再次调用 .value 并将它们传递给 addTheseNumbers()，然后返回总和。

完整的工作片段；

  var userInput1 = document.getElementById('userInput1');
  var userInput2 = document.getElementById('userInput2');
	var button = document.getElementById('myButton');
  var resetButton = document.getElementById('resetButton');
	var contentWrap = document.getElementById('contentWrap');

   button.addEventListener('click', handleClick);
   // resetButton.addEventListener('click', resetButton);


function buildHtml(total){
    contentWrap.innerHTML = total;
}



  // function resetButton (event) {
  //     if(document.getElementById('userInput1').value == 0 && document.getElementById('userInput2').value == 0){
  //           errorMessage.classList.remove('hidden')
  //     } 
  //        }


      //calculator
function addTheseNumbers(a, b) {
 var sum = parseInt(a) + parseInt(b);
 return sum;
}

    function handleClick (event) 
    {
      if(document.getElementById('userInput1') == 0 && document.getElementById('userInput2') == 0){
            errorMessage.classList.remove('hidden')
      }  

      else {
           var total = addTheseNumbers (userInput1.value, userInput2.value);
           buildHtml(total);
      }
} 
<!DOCTYPE html>
<html lang="en">
<head>

        <meta charset="UTF-8">
        <title>HowToDoList</title>
        <style type="text/css">
         
         #errorMessage {
               color: #FF5d25;
               font-family: helvetica;
               font-weight: bold;
               visibility: visible;
               opacity: 1;
               transition: opacity 2s linear;
}
         
         .hidden {
               display: none;
         }
         
   .fadeOut{
      background-color: rgba(255, 0, 0, 0.83);
      border-radius: 8px;
      box-shadow: silver 3px 3px 5px 0px;
      border: 2px dashed yellow;
      padding: 3px;
    }
.myButton {
   background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ff5c25), color-stop(1, #ff5c25));
   background:-moz-linear-gradient(top, #ff5c25 5%, #ff5c25 100%);
   background:-webkit-linear-gradient(top, #ff5c25 5%, #ff5c25 100%);
   background:-o-linear-gradient(top, #ff5c25 5%, #ff5c25 100%);
   background:-ms-linear-gradient(top, #ff5c25 5%, #ff5c25 100%);
   background:linear-gradient(to bottom, #ff5c25 5%, #ff5c25 100%);
   filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5c25', endColorstr='#ff5c25',GradientType=0);
   background-color:#ff5c25;
   -moz-border-radius:28px;
   -webkit-border-radius:28px;
   border-radius:28px;
   border:1px solid #bab6ba;
   display:inline-block;
   cursor:pointer;
   color:#ffffff;
   font-family:Arial;
   font-size:17px;
   padding:4px 14px;
   text-decoration:none;
   text-shadow:0px 1px 0px #000000;
}
.myButton:hover {
   background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ff5c25), color-stop(1, #ff5c25));
   background:-moz-linear-gradient(top, #ff5c25 5%, #ff5c25 100%);
   background:-webkit-linear-gradient(top, #ff5c25 5%, #ff5c25 100%);
   background:-o-linear-gradient(top, #ff5c25 5%, #ff5c25 100%);
   background:-ms-linear-gradient(top, #ff5c25 5%, #ff5c25 100%);
   background:linear-gradient(to bottom, #ff5c25 5%, #ff5c25 100%);
   filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5c25', endColorstr='#ff5c25',GradientType=0);
   background-color:#ff5c25;
}
.myButton:focus { 
   outline:0 !important; 

}
.buttons {
    position: center;

}


        </style>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
</head>
<body>

<center><div>
<h1> Add These Numbers </h1>
<p class="hidden" class="errorMessage" id="errorMessage">You did not enter a value, please enter a value</p>
   <div id="contentWrap" position="center">
      <form>
      </form>
   </div>
   <div class="instructions">
            <input id="userInput1" type="number" name="userInput1">
            <input id="userInput2" type="number" name="userInput2">
         </div>
         <div class="buttons">
   <button id="myButton" class="myButton" a href="#" type="button">Calculate</button>
</div>
 <script src="js/main.js"></script>
<script src="http://code.jquery.com/jquery-git2.js"></script>

</center></div>

</body>
</html>

关于javascript - 用户输入不被识别为整数，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35256974/

25 4 0
文章推荐： javascript - PHP超时后自动关闭窗口
文章推荐： javascript - Node : Use Promises in Loop with Q
文章推荐： java - 对 Java 对象列表进行排序
文章推荐： javascript - 清除文本字段值
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com