Using javascript to get a value from html input

Question

I am new to this forum and I want to be able to get a value from my html inputs into javascript. Right now i have this code:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>PWS</title>
</head>

<body bgcolor="#009933" text="#FFFFFF">
<H1 align="center">PWS Julia en Sophie</H1>
<hr>
<br>

<strong>DOUCHE</strong>
<table>
    <tr>
    <td>Temperatuur</td>
    <td><input type="text" name="dtemp" onClick="calculateTotal()" /></td>
    </tr>
    <tr>
    <td>Tijd</td>
    <td><input type="text" name="dtijd" onClick="calculateTotal()" /></td>
    </tr>
    <tr>
    <td>Hoe vaak per week</td>
    <td><input type="text" name="dfreq" onClick="calculateTotal()" /></td>
    </tr>
</table>

<br>
<strong>BAD</strong>
<table>
    <tr>
    <td>Temperatuur</td>
    <td><input type="text" name="btemp" onClick="calculateTotal()" /></td>
    </tr>
    </tr>
    <tr>
    <td>Hoe vaak per week</td>
    <td><input type="text" name="bfreq" onClick="calculateTotal()" /></td>
    </tr>
</table>

<script type="text/javascript">
    var dTemp = document.getElementsByName("dtemp").value;
    document.write(dTemp);
</script>

obviously, its not working. Because the dTemp value stays undefined. Can anyone help me, thanks in advance, Bob

It returns a collection. So access it like var dTemp = document.getElementsByName("dtemp")[0].value; — PSL
– PSL, Commented Oct 14, 2013 at 19:51

tymeJV · Accepted Answer · 2013-10-14 19:51:20Z

3

document.getElementsByName returns an array, so you have to reference the position of the element:

var dTemp = document.getElementsByName("dtemp")[0].value;

I would also recommend giving ID's to your inputs, since it seems that each name is unique in your case, that way you could use document.getElementById

answered Oct 14, 2013 at 19:51

tymeJV

105k14 gold badges165 silver badges158 bronze badges

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

Comments

Ramesh Kotha · Accepted Answer · 2013-10-14 19:53:33Z

0

document.getElementsByName("dtemp") will give you array of elements, traverse through one by one and get the value from it.

var elements = document.getElementsByName("dtemp");
var firstValue = elements[0].value;

answered Oct 14, 2013 at 19:53

Ramesh Kotha

8,35217 gold badges68 silver badges91 bronze badges

1 Comment

Bobray Over a year ago

Thanks for the quick answers guys, i adjusted the code so that it takes the first item from the arrays: <script type="text/javascript"> var dTemp = document.getElementsByName("dtemp")[0].value; document.write(dTemp); </script> However, nothing is showing up where I would normally expect the output to be, so it doesnt print the dTemp value.

Jukka K. Korpela · Accepted Answer · 2013-10-14 20:31:53Z

1) You need to index the result of getElementsByName, as described in other answers; append [0] to document.getElementsByName("dtemp").

2) You can’t use document.write in code that is executed after the page has loaded. It would replace the current document by the written content. Write to an element instead.

3) You have not defined the function calculateTotal at all. Wrap your JavaScript code in a function, e.g.

<div id=result></div>
<script>
function calculateTotal() {
    var dTemp = document.getElementsByName("dtemp")[0].value;
    document.getElementById('result').innerHTML = dTemp; }
</script>

4) You have a long way to go, since now your code makes no attempt at calculating anything, you should hardly use onclick on an input element to start the calculation (rather, onchange on it, or onclick on a separate button element). You should read a good JavaScript primer, really.

Collectives™ on Stack Overflow

Using javascript to get a value from html input

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related