使用Javascript计算并输入到html

Question

附带的屏幕截图是我的输出。我想要实现的是当我点击AddWood时，将会生成3个文本框（这很好）。 3文本框表示名称，长度和宽度。一旦我点击计算，下面应该有一个显示我的区域，这是不起作用。 任何人都可以帮忙指出我的错误在哪里吗？

function addText() {
  var div1 = document.getElementById("div2");
  div1.innerHTML = "<input type='text' id=Wname/><br> <input type='text' id=length/><br>  <input type='text' id=width/>";
}

function myFunction() {
  var length = document.getElementById("length").value;
  var width = document.getElementById("width").value;
  var area = length * width;
  document.getElementById("Result").innerHTML = area;
}

<div id="div2"></div>
<input type="button" id="btnok" onclick="addText();" value="Add Wood"/>
<br />
<p><button onclick="myFunction()">Calculate</button>
<p id="Result"></p>

Answer 1

id需要在引号内。 input也是一个自我结束标记

＆＃13;

＆＃13;

function addText() {
  var div1 = document.getElementById("div2");
  div1.innerHTML = "<input type='text' id='Wname'/><br> <input type='text' id='length'><br>  <input type='text' id='width'>";
}

function myFunction() {
  var length = document.getElementById("length").value;
  var width = document.getElementById("width").value;
  var area = length * width;
  document.getElementById("Result").innerHTML = area;
}

＆＃13;

<div id="div2"></div>

<input type="button" id="btnok" onclick="addText();" value="Add Wood" />
<br />
<p><button onclick="myFunction()">Calculate</button>
  <p id="Result"></p>

＆＃13;

＆＃13;

＆＃13;

Answer 2

此行看起来不对，id值

附近没有内部引号

div1.innerHTML="<input type='text' id=Wname/><br> <input type='text' id=length/><br>  <input type='text' id=width/>";

把它扔进一个片段，似乎可以解决问题。

function addText() {
  var div1 = document.getElementById("div2");
  div1.innerHTML = "<input type='text' id='Wname' /><br> <input type='text' id='length' /><br>  <input type='text' id='width' />";
}

function myFunction() {
  var length = document.getElementById("length").value;
  var width = document.getElementById("width").value;
  var area = length * width;
  document.getElementById("Result").innerHTML = area;
}

<div id="div2"></div>
<input type="button" id="btnok" onclick="addText();" value="Add Wood"/>
<br />
<p><button onclick="myFunction()">Calculate</button>
<p id="Result"></p>

同时...

值得一看https://developers.google.com/web/tools/chrome-devtools/并调试javascript（适用于所有主流浏览器的类似工具，只需google）。

只需提供一个断点甚至只是一些console.log(blah)，console.info(blah)或console.error(blah)来电即可快速解决绝大多数错误，或至少提供更好的框架问题为了更好的帮助。