How to output JavaScript into a Textbox

Question

Sorry I'm rather new to coding in JavaScript. I'm trying to make a simple program that takes two inputs, for base and height, and outputs the area of a triangle.

My HTML is this:

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

And my JavaScript is this:

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;

}

I've tried changing the name="output" of the output textbox to an ID and using getValueByID, but it has made no difference. Any help would be appreciated.

natchkebiailia · Accepted Answer · 2014-04-14 00:04:35Z

2

You have to get rid of form tag,than change javascript code a little Here is the working example: 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;

}

answered Apr 14, 2014 at 0:04

natchkebiailia

6314 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user3530169 Over a year ago

That worked brilliantly and I can see what you were going for with it too. I'm not sure how the form tag was messing it up, but it's pristine now, so thank you!

qwr Over a year ago

The form doesn't matter. The important part is document.getElementById for the output box.

J.Wells · Accepted Answer · 2014-04-14 00:03:49Z

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

here is a fiddle ...

assembly_wizard · Accepted Answer · 2014-04-14 00:10:49Z

1

To get to an input element you need to use document.<formName>.<inputName>, therefore:

Put the output inside the 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

Note: This is all assuming you don't want to use ID's.

edited Apr 14, 2014 at 0:10

answered Apr 13, 2014 at 23:54

assembly_wizard

2,0841 gold badge17 silver badges10 bronze badges

3 Comments

user3530169 Over a year ago

I can use IDs if I want, but this doesn't appear to work, it eats the inputs but displays no output.

user3530169 Over a year ago

I have, I copied it directly into my code but when I put in inputs and hit calculate, the only change is that the inputs disappear, no output is displayed, not even briefly.

assembly_wizard Over a year ago

Added a link to JSBin. Also, the form is submitted when you press the button, so I've added return false; in the onClick event to prevent that.

Collectives™ on Stack Overflow

How to output JavaScript into a Textbox

3 Answers 3

2 Comments

Comments

JSBin

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related