If I set `let x = document.getElementById("inputText").value` and update `x`, why doesn’t the value update?

Question

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>

Answer 1

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.

Answer 2

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";

Answer 3

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";

Answer 4

because

document.getElementById('test').value

is a getter where as

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

is a setter

Answer 5

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";

Answer 6

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"); }

Answer 7

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

Answer 8

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)

Answer 9

<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>

Answer 10

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).

Answer 11

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

Answer 12

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.