Question

我正在努力计算器，它可以添加用户在网站上输入的2个数字。

我添加数字并构建HTML并将其注入HTML的功能只有我的代码才能回复：＆＃34; NaN＆＃34; （不是数字） 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更改为整数，一旦我这样做，我就会得到正确的结果。这（可能）意味着问题在于代码中没有将用户输入识别为数字。

提前感谢您的帮助！

Answer 1

该变量缓存在

  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>

用户输入不被识别为整数

1 个答案: