如何将JavaScript输出到文本框中

Question

抱歉，我对JavaScript编程比较陌生。我想制作一个简单的程序，接受底和高两个输入，并输出三角形的面积。

我的HTML代码如下：

<form name="input" action="" method="get">
        <label for="">Width (b): </label><input type="textbox" name="width"></input><br>
        <label for="">Height (h): </label><input type="textbox" name="height"></input><br>
        <button onClick="calculateArea()">Calculate area</button>
</form>

<label for="output">The area is: </label><input type="textbox" name="output"></input>

我的JavaScript代码如下：

function calculateArea() {

var base = document.getElementById('width').value;
var height = document.getElementById('height').value;
var out = (1/2) * parseFloat(base) * parseFloat(height);

document.output.value = out;

}

我尝试将输出文本框的name属性更改为ID，并使用getValueByID，但没有任何区别。如有帮助，请提供。

- user3530169

Answer 1

您需要删除表单标签，然后稍微更改JavaScript代码。这是一个可行的示例：JSFIDDLE EXAMPLE

HTML：

<label for="">Width (b): </label><input type="textbox" name="width"></input><br>
<label for="">Height (h): </label><input type="textbox" name="height"></input><br>
<button onClick="calculateArea()">Calculate area</button><br>
<label for="output">The area is: </label><input type="textbox" name="output"></input>

JAVASCRIPT:

function calculateArea() {
var base = document.getElementsByName('width')[0].value;
var height = document.getElementsByName('height')[0].value;
var out = (1/2) * parseFloat(base) * parseFloat(height);

document.getElementsByName('output')[0].value= out;

}

- natchkebiailia

---

那个太棒了，我明白你的意图。我不确定是表单标签搞乱了它，但现在一切都完美无缺了，谢谢！ - user3530169

表单的形式并不重要，重要的是使用document.getElementById来获取输出框。 - qwr

Answer 2

要获取输入元素，您需要使用document. <formName>. <inputName>，因此： 将输出放在表单内。

<form name="input" action="" method="get">
    <label for="">Width (b): </label><input type="textbox" name="width" /><br />
    <label for="">Height (h): </label><input type="textbox" name="height" /><br />
    <button onClick="calculateArea(); return false;">Calculate area</button><br />

    <label for="">The area is: </label><input type="textbox" name="output" />
</form>

function calculateArea() {
    var base = document.input.width.value;
    var height = document.input.height.value;
    var out = (1/2) * parseFloat(base) * parseFloat(height);

    document.input.output.value = out;
}

JSBin

注意: 假设您不想使用ID。

- assembly_wizard

---

我可以使用ID，但似乎不起作用，它会吞噬输入但不显示任何输出。 - user3530169

我已经将其直接复制到我的代码中，但是当我输入并点击计算时，唯一的变化是输入消失了，没有显示任何输出，甚至没有短暂的显示。 - user3530169

添加了JSBin链接。此外，当您按下按钮时，表单将提交，因此我已经在onClick事件中添加了return false;以防止这种情况发生。 - assembly_wizard

Answer 3

HTML:

<label for="">宽度 (b): </label>
<input type="textbox" name="width" id="width" value="2"/><br />
<label for="">高度 (h): </label>
<input type="textbox" name="height" id="height" value="3"/><br />
<input type="button" id="calcButton" value="计算面积" />
<br/>
<label for="output">面积是: </label>
<input type="textbox" name="output" id="output"/>

JS:

document.getElementById('calcButton').onclick = calculateArea;

function calculateArea() {
    var base = document.getElementById('width').value;
    var height = document.getElementById('height').value;
    var out = (1/2) * parseFloat(base) * parseFloat(height);
    document.getElementById('output').value = out;
}

这里有一个fiddle...

- J.Wells