Getting value from a Input Box , Javascript, getElementById

Question

SO i am trying to get the value or the contents of an HTML text box. I have tried various types of methods but none of them work. According to the debugger , the code stops at getelementbyid method. The commented lines are the methods that I have already tried. Some of them return null while some of them return NaN and most of them just return a blank page. help is much appreciated.

<html>
<head>
<script type="text/javascript" >
function calculateit(){
document.open();
var number = document.getElementsByName('xyz')[0].value

//var number = document.getElementsByName("xyz").value;
//var number = document.getElementsByName('xyz').value;
//var number = document.getElementsByName("xyz");
//var number = document.getElementsByName('xyz');

//var number = document.getElementsById("xyz").value;
//var number = document.getElementsById('xyz').value;
//var number = document.getElementsById("xyz");
//var number = document.getElementsById('xyz');

//var number = document.form1.xyz.value;  //form 1 was my form name and/or id 


document.writeln(number);

var newtemp = 0;

var newtemp = tempera *9/5+32;

document.write(newtemp);
}

</script>

</head>

<body>
<input type="text" id="xyz" name="xyz">
<button title="calculate" onclick="calculateit()">calculate </button>


</body>
</html>

Ian · Accepted Answer · 2012-09-06 01:55:08Z

2

You're using the wrong method. The two widely supported methods for javascript are "getElementsByTagName" and "getElementById". Note exactly how "getElementById" is spelled. It is meant to get one element with the exact id that you specify. "getElementsByTagName" gets all elements of a certain tag...such as "div". When using "getElementById", you don't to index it or anything - it either returns null (can't find) or the exact element reference. From there, since it is a textarea, you can use ".value" to get the current value, like you already are.

ALSO:

You probably shouldn't use "document.write" or any of its related write methods AFTER the page has been rendered. In your example, that's exactly what you're doing, so once you get the ".value" stuff working, I would change that. The point is that "document.write" is more for during page rendering...so if you had javascript inline with the HTML body or something. Something like:

<html>
<head>

</head>
<body>
    <script type="text/javascript">
        document.write("testing");
    </script>
</body>
</html>

would be fine, but still not preferred. The fact that you have it in a function, that is called on a button click, means it is not during page render, and shouldn't be used. A more practical approach is to have a <div> on the page and add text to it when necessary, using something like ".innerHTML". That way, things are dynamic and not overwritten in the actual document.

edited Sep 6, 2012 at 1:55

answered Sep 6, 2012 at 1:49

Ian

51k13 gold badges104 silver badges111 bronze badges

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

1 Comment

Rohit Deshmukh Over a year ago

Thank you. getElementById("xyz").value worked and I was not showing up because of document.write(). I used the innerhtml method to set the text to a div and it worked fine. Thank you. you are a gentleman and a scholar :) :P

JoshRagem · Accepted Answer · 2012-09-06 01:50:13Z

2

It's getElementById, not getElementsById.

answered Sep 6, 2012 at 1:50

JoshRagem

5953 silver badges11 bronze badges

Collectives™ on Stack Overflow

Getting value from a Input Box , Javascript, getElementById

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related