时间戳

首页 > 解决方案 > 使用Javascript计算并输入html

javascript - 使用Javascript计算并输入html

问题描述

随附的屏幕截图是我的输出。我想要实现的是，当我单击时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>

输出

标签： javascripthtml

解决方案

id需要在引号内。也是input一个自闭合标签

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>

推荐阅读