views:

200

answers:

6

Can someone explain to me why I cannot use document.getElementById('id').value inside of a function?

I was trying to make a simple multiplication script (im learning JS, its actually kinda fun) and realized quickly how annoying typing that whole line of code just to return a value is, so I wrote a small function:

<script type="text/javascript">
function value(elementid){
return document.getElementById(elementid).value
}
</script>

However, this does not function and will simply break my whole script's functionality. I wanted to simply type value('id') to return the value of the element.

To fix it, a friend suggested I take out the .value in the function and add it to the end of each line where I call the function instead, like value('id').value.

Why didn't my first way work?

Thanks for the help!

A: 

What you are doing should work. What calls this? It's possible your element isn't in the DOM when you are calling it. I.e. calling it in inline script before the actual element.

russau
Basically anything is calling it, but nothing is actually working. Should my script be in the head or something?
Cyclone
The script comes before all html, inside the body.
Cyclone
Can you cite a specific example as an HTML snippet of where it is being called that doesn't work? As others have mentioned it may have something to do with the DOM not being set up yet at the time of the call.
JohnFx
+2  A: 

Are you sure the element that you are getting has a value property and not something else like .text or ...?

If it is an INPUT tag, you can get away with .value and some other HTML controls element also, but for regular DIV, SPAN, etc. I don't think they expose a .value property. Check the tag documentation to see if they support .value.

Jimmy Chandra
This was specifically for an input field, so idk why it did not work.
Cyclone
Only thing I can think of is to follow russau suggestion. Make sure you are not calling your JavaScript before the element is created. Did you wrap the call at least in a document / body onload event?
Jimmy Chandra
+1  A: 

I believe russau is on the right track. You could test this by moving your <script> block to the end of the page, because hopefully everything would load by that point unless you have a complicated page structure.

Pablo
+1  A: 

Not every DOM element has a property called value which could be why your script is breaking. You could try the following:

<script type="text/javascript">
    function value(elementid){
        var el = document.getElementById(elementid);
        return el.value || el;
    }
</script>

this will return el.value if it exists or if it doesn't just the element. this isnt the most elegant solution but it might stop your other scripts from breaking. Without knowing the context in which you are calling that function, i can't help more

Darko Z
+5  A: 

Change your function name to something like 'getValue'. This code works on my machine :P

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<script type="text/javascript">
    function getvalue(id) {return document.getElementById(id).value;}
</script>
</head>
<body>
    <input type="text" id="Text1" />
    <input type="button" onclick="alert(getvalue('Text1'))" /> <br />

    <input type="text" id="Text2" />
    <input type="button" onclick="alert(getvalue('Text2'))" /> <br />

    <input type="text" id="Text3" />
    <input type="button" onclick="alert(getvalue('Text3'))" /> <br />

</body>
</html>
Salamander2007
A: 

change the name of the function from 'value' to something else

abir