Question

我正在尝试编写一个简单的程序来计算三角形的面积，但我发现很难从用户那里获得输入。我给输入一个id并将值设置为输入的innerhtml，但它给了我一个默认值1。

<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Area Of A Triangle</title>

<style type="text/css">


p{
padding:0;
margin:0;
}

</style>

</head>

<body>

<h2>Calculate The Area Of A Triangle</h2>

<p>Enter The Values</p>

<p><input id="firstside"  type="text" /></p>
<p><input id="secondside" type="text" /></p>
<p><input id="thirdside" type="text" /></p>

<button id="solve">Submit</button>

<p>Answer Is : <span id="answer"></span></p>


<script type="text/javascript" >

var a; var b; var c; var s; var area;

a= document.getElementById("firstside").value==document.getElementById("firstside").innerHTML;
b= document.getElementById("secondside").value==document.getElementById("secondside").innerHTML;
c= document.getElementById("thirdside").value==document.getElementById("thirdside").innerHTML;

document.getElementById("solve").onclick=function() {

s = (a+b+c);

document.getElementById("answer").innerHTML=s;

}

</script>

</body>
</html>

Answer 1

当您阅读innerHTML属性时，将元素的所有子节点序列化为HTML，然后将其作为字符串。设置<input>foo</input>会反过来做同样的事情。

输入元素没有（也不能）有任何子节点（value）是无效的HTML。）

其当前值通过其<select name="first"> <option value="1">A</option> <option value="2">B</option> <option value="3">C</option> </select> <select name="second"> <option value="1">A</option> <option value="2">B</option> <option value="3">C</option> </select>属性反映。

Answer 2

这是我为你创造的Jsbin。我希望你能喜欢它

https://jsbin.com/futotexeci/edit?html,output

<div class='col-lg-4'>
Base <input type="number" min='0' id='base' class='form-control' />
<hr>
Altitude <input type="number" min='0' id='altitude' class='form-control' />
<hr>
Area <input type="number" min='0' id='area' class='form-control' disabled />
<hr>
<button class='btn btn-primary' onclick='findArea()'>Calculate</button>

JS

function findArea(){
   var base = $('#base').val();
   var altitude = $('#altitude').val();
   var area = 1/2 * base * altitude;
   $('#area').val(area);
}

保持快乐并付出一些努力：）

如何将用户输入设置为输入值？

2 个答案: