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

Answer 5

because

document.getElementById('test').value

is a getter where as

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

is a setter

Answer 6

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 7

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 8

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

Answer 9

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 10

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

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 12

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