Wie Ausgabe JavaScript in eine Textbox

Question

Leider bin ich ziemlich neu in JavaScript-Codierung. Ich versuche, ein einfaches Programm zu machen, die zwei Eingänge nimmt für die Basis und die Höhe und gibt die Fläche eines Dreiecks.

Mein HTML ist dies:

<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> 

Und mein JavaScript ist dies:

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; 

} 

Ich habe versucht, den Namen = "Ausgang" des Ausgangs Textbox auf eine ID zu ändern und mit getValueByID aber es hat keinen Unterschied gemacht. Jede Hilfe wäre willkommen.

Answer 1

Sie haben von Formular-Tag, um loszuwerden, als Änderung ein wenig JavaScript-Code Hier ist das Arbeitsbeispiel: 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

zu einem Eingangselement, die Sie brauchen document.<formName>.<inputName> zu verwenden, daher:

Setzen Sie den Ausgang in der Form

<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

Hinweis: Dies alles, was Sie don wird unter der Annahme, Ich möchte keine IDs verwenden.

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; 
} 

hier ist ein fiddle ...