If I set `let x = document.getElementById("inputText").value` and update `x`, why doesn’t the value update?
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: &l开发者_JAVA技巧t;input type="text" id="test" value="first"></label>
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.
精彩评论