जावास्क्रिप्ट को टेक्स्टबॉक्स में कैसे आउटपुट करें

Question

क्षमा करें मैं जावास्क्रिप्ट में कोडिंग के लिए नया हूं। मैं एक साधारण प्रोग्राम बनाने की कोशिश कर रहा हूं जो आधार और ऊंचाई के लिए दो इनपुट लेता है, और त्रिकोण के क्षेत्र को आउटपुट करता है।

मेरे एचटीएमएल यह है:

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

और मेरे जावास्क्रिप्ट यह है:

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; 

} 

मैं एक आईडी के नाम = उत्पादन पाठ बॉक्स के "उत्पादन" बदल रहा है और getValueByID का उपयोग कर की कोशिश की है , लेकिन इससे कोई फर्क नहीं पड़ता है। किसी भी सहायता की सराहना की जाएगी।

Answer 1

आप प्रपत्र टैग से छुटकारा पाने के लिए है, परिवर्तन जावास्क्रिप्ट कोड की तुलना में थोड़ा यहाँ कामकाजी उदाहरण है: JSFIDDLE EXAMPLE

,210

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

नोट के अंदर उत्पादन रखो आईडी का उपयोग नहीं करना चाहते हैं।

Answer 3

एचटीएमएल:

 
<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 है ...