Why Doesn't The Value Attribute Of The Input Change?
Well I have this code in view: and then I doing some event that would call this function: choo
Solution 1:
The value attribute is not synced with the actual value; that's what the value property is for.
This is not a problem though since you'll never use .getAttribute('value') but use the property .value to access the current value.
Solution 2:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<meta charset="UTF-8" />
</head>
<body>
<div id="app"></div>
<div id="buttons">
<button id="1" data-text="one">1</button>
<button id="2" data-text="two">2</button>
<button id="3" data-text="three">3</button>
<button id="4" data-text="four">4</button>
<button id="5" data-text="five">5</button>
<input id="inp" value=""></input>
</div>
<script>
const onClick = function() {
var dataTextBtnField = this.getAttribute("data-text");
var currentData = document.getElementById("inp").value
var showValue = currentData + dataTextBtnField
document.getElementById("inp").setAttribute("value", showValue);
document.getElementById("inp").value = showValue;
}
const onChange = function() {
this.setAttribute("value", this.value);
}
document.getElementById('1').onclick = onClick;
document.getElementById('2').onclick = onClick;
document.getElementById('3').onclick = onClick;
document.getElementById('4').onclick = onClick;
document.getElementById('5').onclick = onClick;
document.getElementById('inp').onchange = onChange;
</script>
</body>
</html>document.getElementById("inp").setAttribute("value", showValue);
Using this will change in the HTML code only, and won't reflect in the view.
document.getElementById("inp").value = showValue;
Using this will change in the view only, and not in the code.
Use both lines to change at both the locations.
Comment the above-mentioned lines in the attached snippet to observe the same.
Post a Comment for "Why Doesn't The Value Attribute Of The Input Change?"