Jak wyprowadzić JavaScript w polu tekstowym

Question

Przykro mi, ale jestem raczej nowy w kodzie JavaScript. Próbuję zrobić prosty program, który pobiera dwa wejścia, dla podstawy i wysokości, i wysyła obszar trójkąta.

Moje HTML jest taka:

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

A moja JavaScript jest taka:

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; 

} 

Próbowałem zmieniając name = "wyjście" z pola tekstowego wyjściowym do identyfikatora i korzystania getValueByID , ale nie robiło to różnicy. Każda pomoc będzie doceniona.

Answer 1

Musisz pozbyć formie znacznika niż zmiany kodu JavaScript trochę Tutaj to działający przykład: 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

Aby dostać się do elementu wejściowego trzeba użyć document.<formName>.<inputName> zatem:

Put wyjście wewnątrz postaci

<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

Uwaga: To wszystko przy założeniu, że don nie chcę używać identyfikatorów.

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

Oto fiddle ...