Question

HTML文件

   <body>
<form name = 'add'>
  <div name = 'add'>
    <input type="number" id='num1'>
    <input type="number" id='num2'>
    <button name = 'sum' onclick="add()"></button>
    <input type="number" id="sum">

  </div>

</form>

  <script src='additionkindergarden.js'></script>

JS档案

var num1,num2,sum;

function add(){
num1 = document.getElementById('num1').value;
num2 = document.getElementById('num2').value;
sum = num1 + num2;
return document.getElementById('sum').value = sum;
}

刚开始编码而不使用Udemy。我被困在这里大约5个小时。我知道它很简单，但我不能让我的JS连接我的HTML。当我按下屏幕快速刷新按钮时，我在HTML1和num2位置输入数字，num1和num2中的数字消失，最后一个输入框留空。请帮助我的第一个solo lvl。 1编码项目。

Answer 1

问题是单击按钮会调用add()，但也会提交表单，此处将重新加载页面。删除<form>代码，您不需要它们。接下来，即使您有.value，输入的type="number"也是文字，这意味着您需要先将num1和num2转换为数字。我还将sum元素转换为<p>，因为它是输出而不是输入。

＆＃13;

var num1, num2, sum;

function add() {
  var num1String = document.getElementById('num1').value;
  var num2String = document.getElementById('num2').value;
  num1 = Number(num1String);
  num2 = Number(num2String);
  sum = num1 + num2;
  document.getElementById('sum').innerHTML = sum;
}

＆＃13;

<input type="number" id='num1'>
<input type="number" id='num2'>
<button onclick="add()">Add</button>
<p id="sum"></p>

＆＃13;

Answer 2

大打嗝是HTML中的<form>元素 - 它试图以表单的本机行为提交页面。页面提交重新加载页面（或尝试加载预期的页面），在您看到它们之前清除结果。

var num1,num2,sum;

function add(){
  num1 = document.getElementById('num1').value;
  num2 = document.getElementById('num2').value;
  
  // input from the HTML comes back as text/strings
  // convert them into float numbers 
  // (3.14 for example vs. Integer numbers like 3)
  // Otherwise 1 + 3 would be 13 instead of 4
  sum = parseFloat(num1) + parseFloat(num2);
  
  // Update the input value with the calculated
  // sum
  // .toFixed() restricts how far the decimals will go
  // this helps curve a JS problem where 
  // 5.6 + 2.3 = 7.89999999... instead of 7.9
  document.getElementById('sum').value = sum.toFixed(2);
  
  // you don't have to return anything with this
  // function, but if anything just return true
  return true;
}

<div name="add">
    <input type="number" id="num1">
    <input type="number" id="num2">
    <button name="sum" onclick="add()">Add</button>
    <input type="number" id="sum">
  </div>

Answer 3

需要注意几点：

表单名称为add，与js函数相同，导致'is not a function error'
按钮类型需要明确设置为button，否则提交表单
需要使用parseInt

JS更新

var num1,num2,sum;

function add(){
num1 = document.getElementById('num1').value;
num2 = document.getElementById('num2').value;
sum = parseInt(num1) + parseInt(num2);
return document.getElementById('sum').value = sum;
}

HTML更新

 <body>
        <form name='form'>
        <div name='add'>
        <input type="number" id='num1'>
        <input type="number" id='num2'>
        <button name="sum" type="button" onclick="add()"></button>
        <input type="number" id="sum">
        </div>
        </form>
        <script src='additionkindergarden.js'></script>
        </body>

无法获得javascript输出简单的添加结果

3 个答案: