JSBin

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 =“output”更改为ID并使用getValueByID，但它没有任何区别。任何帮助将不胜感激。

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;

}

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。

Answer 3

HTML：

<label for="">Width (b): </label>
<input type="textbox" name="width" id="width" value="2"/><br />
<label for="">Height (h): </label>
<input type="textbox" name="height" id="height" value="3"/><br />
<input type="button" id="calcButton" value="Calculate area" />
<br/>
<label for="output">The area is: </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 ...

如何将JavaScript输出到文本框中

3 个答案:

JSBin