When do I need quotes for document.getElementByID?

Question

I have a simple script which converts a text input of inches into another text input of centimeters. However, when I pass it to my function, I noticed that I have to use quotes for the argument passed to document.getElementByID. I tried newheightcm without quotes and it failed. Is there a way to avoid this to maintain consistency for both arguments, i.e. both have quotes or both have no quotes?

<script>
function inchestocm(IDin, IDcm) {   
    var inches = IDin.value;
    var centimeters = inches*2.54;  
    document.getElementById(IDcm).value = centimeters;  
}
</script>
<input type="text" id="newheight" onchange="inchestocm(newheight,'newheightcm')">
<input type="text" id="newheightcm">

Answer 1

Because without the quotes you are looking for a variable newheight that is defined in the global scope. Some browsers do a bad thing and says if I do not have a variable with this id, I look for an DOM element that has that id.

So what you are passing in is an DOM Element with that id and not a string. That is why IDin.value works.

A better way of doing that is to pass in the scope of the element that was changed.

<input type="text" id="newheight" onchange="inchestocm(this,'newheightcm')">

That way you are not dealing with the browser quirk that made the code run in the first place.

Answer 2

you are using the parameters of the function that's why you can't use double quotes.If you use the direct name of the id then double quotes would be used.

Answer 3

function inchestocm(IDin, IDcm) { var inches = IDin.value; var centimeters = inches*2.54; document.getElementById(IDcm).value = centimeters; }

newheight is the DOM element <input type="text" id="newheight" onchange="inchestocm(newheight,'newheightcm')"> as there is no variable defined in your code with that name, check epascarello's answer

You can checnge your code as

<script>
function inchestocm(IDin, IDcm) { 
    IDin = document.getElementById(IDin);
    var inches = IDin.value;
    var centimeters = inches*2.54;  
    document.getElementById(IDcm).value = centimeters;  
}
</script>
<input type="text" id="newheight" onchange="inchestocm('newheight','newheightcm')">
<input type="text" id="newheightcm">

Answer 4

<input type="text" id="newheight" onchange="inchestocm(newheight,'newheightcm')">

In your code, both arguments are different, first one is an object from where u r trying to get the value and second one is string where u want to paste the result. Not sure but try this ones.

<script>
function inchestocm(IDin, IDcm) {   
var inches = IDin.value;
var centimeters = inches*2.54;  
IDcm.value = centimeters;  
}
</script>
<input type="text" id="newheight" onchange="inchestocm(newheight,document.getElementById('newheightcm'))">
<input type="text" id="newheightcm">