JavaScript Inputs

Question

For my college coursework I have been asked to create a program the works out the cost for painting a room by taking the measurements and multiplying them all together. I've done all of the Pseudo and Flow Charts and stuff. But I'm stuck with this bit. I want the user to input a number into the text field(If there is a way to limit the to just number please let me know :P) and then once the user presses a button it will write the value below without having to change/refresh the webpage. The code below should work(I think) But anyways, any help is greatly appreciated :) Aaron~

<form id="frm1" action="form_action.asp">
Number of walls: <input type="number" name="numberOfWallsInput" value="From 4 to 10"><br>
Width of walls in meters: <input type="text" name="wallWidthInput" value="From 1 to 25"><br>
Height of walls in meters: <input type="text" name="wallHeightInput" value="From 2.4 to 6"><br>
</form>

<p id="demo"></p>

<button onclick="myFunction()">Try it</button>

<script>
function myFunction()
{
var x = document.getElementById("numberOfWallsInput");
document.getElementById("demo").innerHTML=x;
}
</script>

use **value** `var x = document.getElementById("numberOfWallsInput").value;` — Praveen, Jan 31 '14 at 10:00
For the input number only see [here](http://stackoverflow.com/questions/469357/html-text-input-allow-only-numeric-input) or [here](http://stackoverflow.com/questions/995183/how-to-allow-only-numeric-0-9-in-html-inputbox-using-jquery) — Jonathan, Jan 31 '14 at 10:02
Thanks. I've set the .value keyword onto it. But when I press the "Try it button" It still doesn't show the value.. — DataMosh, Jan 31 '14 at 10:04

score 0 · Accepted Answer · answered Jan 31 '14 at 10:01

0

First off, you have no element with an ID of "numberOfWallsInput"; your input element has a name of numberOfWallsInput instead. Either add this as an ID, or use getElementsByName() instead.

Then you need to pull the value, not just the element:

var x = document.getElementsByName("numberOfWallsInput")[0];
document.getElementById("demo").innerHTML = x.value;

JSFiddle demo.

answered Jan 31 '14 at 10:01

James Donnelly

126,410
34
208
218

This one works! thank you muchly :) Can I ask what the [0] is for? – DataMosh Jan 31 '14 at 10:06
@user3199751 note how `getElementById` contains just `Element` (singular), whereas `getElementsByName` contains `Elements` (plural). You can have multiple elements with the same name. `getElementById` only returns one element, whereas `getElementsByName` can return multiple elements. The [0] here simply selects the first element matched. – James Donnelly Jan 31 '14 at 10:07
Makes sense. And thank you very much. You have just saved a lot of time :) – DataMosh Jan 31 '14 at 10:10
Heya. Just found another issue :s http://pastebin.com/dCGyy3sC When I get it to return wallAreaDiv it returns NaN :s I thought it would return the total of (wallHeight*wallWidth)*numberOfWalls :s – DataMosh Jan 31 '14 at 10:24

score 0 · Answer 2 · answered Jan 31 '14 at 10:05

You have to provide id attribute to your inputs in order for them to be retrieved by document.getElementById. Otherwise in your case use document.forms[0].numberOfWallsInput.value.

Better is naming your form :

<form name="form1">
   <input name="myinput"/>
</form>

Then javascript:

var value = document.forms.form1.myinput.value;

JSFiddle : http://jsfiddle.net/ug5hh/

JavaScript Inputs

2 Answers2