In the following example, why doesn’t the value property of the input with the ID test update to "second"?

document.getElementById("test").addEventListener("click", () => {
  let test = document.getElementById("test").value;
  
  test = "second";
  console.log(test); // Logs "second", but input value is not updated.
});

<label>Click on this test input: <input type="text" id="test" value="first"></label>

In the following example, why doesn’t the value property of the input with the ID test update to "second"?

document.getElementById("test").addEventListener("click", () => {
  let test = document.getElementById("test").value;
  
  test = "second";
  console.log(test); // Logs "second", but input value is not updated.
});

<label>Click on this test input: <input type="text" id="test" value="first"></label>

• javascript
• reference

• I get it, but can someone explain WHY you can set a reference to the object [document.getElementByID('test')]but not to the object's value [document.getElementByID('test').value]? – sapiensgladio Commented Jun 9, 2011 at 1:24
• docstore.mik.ua/orelly/webprog/jscript/ch11_02.htm – Jared Farrish Commented Jun 9, 2011 at 1:35
• "The basic rule in JavaScript is this: primitive types are manipulated by value, and reference types, as the name suggests, are manipulated by reference." – Jared Farrish Commented Jun 9, 2011 at 1:43
• In the end, document.getElementById().value is a property. When you set a variable to what it returns, that's a copy of the value found in that property. Javascript does not give you the option of accessing a memory pointer/reference of that value. – Jared Farrish Commented Jun 9, 2011 at 1:50
• Related: If a variable is defined in terms of another, can it reflect changes in the binding of the other?. – Sebastian Simon Commented Oct 20, 2022 at 9:11

12 Answers 12

Because Javascript assigned x as a value and not a reference to the original object.

For example, you could instead:

function setText(x) {
    document.getElementById('test').value = x;
}

getText = function() {      
    return document.getElementById('test').value;
}

And the value you set with setText() will be reflected by getText(), since getText() will also use the reference object's value, and not a copy of the value.

EDIT

As Bryan points out, this would be a copy by reference with a global scope:

var test = document.getElementById('test');

function setText(x) {
    test.value = x;
}

getText = function() {      
    return test.value;
}

http://jsfiddle.net/nLj2A/

The original test variable stores a reference to the element, not a value associated with an attribute of the element.

You are copying the value to a variable. Changing the variable won't change the original, because the variable just contains a copy.

If you store the reference of the element in the variable, you can use that to set the value:

var test = document.getElementById('test');
test.value = "second";

You're assigning the element's value to a variable and then changing the variable. This is not reflected back in the element's value. You need to change the element's value instead.

document.getElementById('test').value = "second";

because

document.getElementById('test').value

is a getter where as

document.getElementById('test').value = "second"

is a setter

test = document.getElementById('test').value;

...only gives you a copy of the value at that instant. When you modify test, you need to put that back into input field you'd like to change:

var test_input = document.getElementById('test');
test_input.value = "second";

Setting the local variable test to "second" will do nothing. I assume you want getText to update the DOM. Try this:

 getText = function() { document.GetElementById('test').value("second"); }

Point to element instead of value: http://jsbin.com/axufi4/edit

Although javascript ultimately treats everything as an object, I believe only arrays and objects are passed by reference. Strings, ints and floats are passed by value.

Text inputs will always give you a string (even if you restrict input to numbers)

<script type="text/javascript">
    getText = function() {      
        var test = document.getElementById('test').value;
        test = "second";
        //note: if you insert "alert(test)" it returns "second"
        document.getElementById('test').value = test;
    }
</script>

You need to do this:

document.getElementById('test').value = "second";

or

var el = dcument.getElementById('test');
el.value = "second";

As for why, I believe it has to do with something about Javascript being a "pass by reference" or "pass by value" language, on which subject there was a very interesting discussion here on SO. (I'm not sure on this point, correct me if I'm wrong).

because it's a string and is passed as value, not as reference. so the content of value is copied to test

Because you're setting the value of test to be the string document.getElementById('test').value.

You aren't linking the two together.

If you are looking to do that, you can use a function:

function test(x) {
  document.getElementById('test').value = x;
}

test('foo');

In Python, you can do this. In JavaScript, I don't think so.