JavaScript区域计算器

Question

我正在做一个简单的JS DOM练习练习。它应该将用户输入的两个变量的面积乘以输入框。但是当我以为我完成它时，我的代码无效。

var one = document.getElementById("one").value;
var two = document.getElementById("two").value;
var output = document.getElementById("output");

function calculate() {
  output.innerHTML = one * two;
}

var button = document.getElementById("button");
button.onclick = calculate();

<h1>Area Calculator for Rectangles</h1>
<form>
  Side Length One<br>
  <input type="text" id="one"><br> Side Length Two<br>
  <input type="text" id="two">

</form>
<button id="button">SUBMIT</button>
<p id="output"></p>

Answer 1

首先，您必须在按钮点击时获取值。所以，将它移到calculate()函数中。其次，要onClick属性，你必须分配一个函数。所以，不要执行它，只需分配像prop=funName这样的函数。

＆＃13;

＆＃13;

var one, two; 
var output = document.getElementById("output");

function calculate() {
  one = document.getElementById("one").value;    //Change1
  two = document.getElementById("two").value;    //Change1
  output.innerHTML = one * two;
}

var button = document.getElementById("button");
button.onclick = calculate;                      //Change2

＆＃13;

<h1>Area Calculator for Rectangles</h1>
<form>
  Side Length One<br>
  <input type="text" id="one"><br> Side Length Two<br>
  <input type="text" id="two">

</form>
<button id="button">SUBMIT</button>
<p id="output"></p>

＆＃13;

＆＃13;

＆＃13;

作为评论中提到的@mplungjan，最好使用window.onload侦听器来确保所有dom元素都已完成加载（在尝试访问它们之前）。

Answer 2

在dom元素上设置onclick事件或为其定义eventListener。还可以获取calculate函数内的输入值，否则只会获取一次。

＆＃13;

＆＃13;

document.getElementById("button").addEventListener("click", function(){
    var one = document.getElementById("one").value;
    var two = document.getElementById("two").value;
    var output = document.getElementById("output");
    output.innerHTML = one * two;
});

＆＃13;

<h1>Area Calculator for Rectangles</h1>
    <form>
      Side Length One<br>
      <input type="text" id="one"><br>

      Side Length Two<br>
      <input type="text" id="two">

    </form>
    <button id="button" >SUMBIT</button>
    <p id="output"></p>

＆＃13;

＆＃13;

＆＃13;

但是在您的情况下，您只需要调用on {button.onclick = calculate;而不是button.onclick = calculate();的onclick函数，并获取计算函数内的值

＆＃13;

＆＃13;

function calculate() {
var one = document.getElementById("one").value;
var two = document.getElementById("two").value;
var output = document.getElementById("output");

  output.innerHTML = one * two;
}

var button = document.getElementById("button");
button.onclick = calculate;

＆＃13;

<h1>Area Calculator for Rectangles</h1>
    <form>
      Side Length One<br>
      <input type="text" id="one"><br>

      Side Length Two<br>
      <input type="text" id="two">

    </form>
    <button id="button" >SUMBIT</button>
    <p id="output"></p>

＆＃13;

＆＃13;

＆＃13;

Answer 3

你做错了一些事情会导致一些错误：

1. 在将calculate函数分配给按钮的onclick处理程序时，您调用了它。在javascript中，函数是一等公民，代码calculate和calculate()有很大差异。为onclick处理程序分配值时，请不要调用该函数。

2. 您未在value函数中获取元素one和two的{​​{1}}个。当他们被调用时，他们并没有抓住当前的价值。将calculate属性访问权限放在您的计算函数中，它应该按预期工作！

＆＃13;
＆＃13;
.value
＆＃13;
var output = document.getElementById("output");

function calculate() {
  var one = document.getElementById("one").value;
  var two = document.getElementById("two").value;
  output.innerHTML = one * two;
}

var button = document.getElementById("button");
button.onclick = calculate;
＆＃13;
＆＃13;
＆＃13;

Answer 4

解释您的代码无效的原因。当您的JS由浏览器执行时，它会带来one和two的值。现在，您的calculate方法引用了之前保存的值。因此，它不会在单击按钮时引用该值。

调用以获取计算方法中one和two的值，您应该好好去

var output = document.getElementById("output");

function calculate() {
  var one = document.getElementById("one").value;
  var two = document.getElementById("two").value;
  output.innerHTML = one * two;
}

var button = document.getElementById("button");
button.onclick = calculate;

<h1>Area Calculator for Rectangles</h1>
    <form>
      Side Length One<br>
      <input type="text" id="one"><br>

      Side Length Two<br>
      <input type="text" id="two">

    </form>
    <button id="button" >SUMBIT</button>
    <p id="output"></p>

Answer 5

好的，在一些答案中有很多误解，所以我发布我的版本并将我的评论转换成这个答案。

• 按钮需要为type="button"或提交并使用表单的提交处理程序 - 请参阅示例2

• 将vars放入函数中以确保它们是新的并且在运行时可用

• 从button.onclick = calculate();中删除（），因为您现在将计算结果分配给onclick而不是处理程序。在我的例子中，我改为使用匿名函数。

• 在页面onload中指定onclick以确保在分配处理程序时呈现按钮

＆＃13;

＆＃13;

window.onload=function() { // the page has loaded - anonymous function
  document.getElementById("button").onclick=function() { // anonymous function
    var one = document.getElementById("one").value, // using commas to separate vars
        two = document.getElementById("two").value,  
     output = document.getElementById("output");

    output.innerHTML = one * two;
  }
}

＆＃13;

<h1>Area Calculator for Rectangles</h1>
<form>
  Side Length One<br>
  <input type="text" id="one"><br> Side Length Two<br>
  <input type="text" id="two">

</form>
<button type="button" id="button">SUBMIT</button>
<p id="output"></p>

＆＃13;

＆＃13;

＆＃13;

由于您有表单，您可以使用提交事件 - 请注意使用preventDefault取消事件。如果您稍后需要使用Ajax将结果发送到服务器，则非常有用，例如：

＆＃13;

＆＃13;

window.onload=function() { // the page has loaded - anonymous function
  document.getElementById("form1").onsubmit=function(e) { // anonymous function
    e.preventDefault(); // cancel submission - note the event passed as "e"
    var one = document.getElementById("one").value, // using commas to separate vars
        two = document.getElementById("two").value,  
     output = document.getElementById("output");

    output.innerHTML = one * two;
  }
}

＆＃13;

<h1>Area Calculator for Rectangles</h1>
<form id="form1">
  Side Length One<br>
  <input type="text" id="one"><br/> Side Length Two<br>
  <input type="text" id="two"><br/>
  <button type="submit">SUBMIT</button>
</form>

<p id="output"></p>

＆＃13;

＆＃13;

＆＃13;