While working with input elements in Angular, I noticed that they did not automatically come with a value property or any other properties unless manually added. Even after setting the value property manually, it would not update accordingly. Attempting to retrieve the value using getAttribute("value") would only return the initial value.
To address this issue, I had to set the value property manually using node.setAttribute("value",""). Although typing in the textbox displayed the entered text, logging the element's value showed only the initial value. While this solution worked when using getElementsByTagName, it was not ideal for my situation.
Generating Text Boxes
var node;
for (let index = 0; index < 5; index++) {
node = document.createElement("input")
node.setAttribute("class", "input");
node.setAttribute("value", "");
document.getElementById("boxesDiv").appendChild(node);
}
Implementing a keydown event to monitor values of the boxes after text entry
var arr = document.getElementsByClassName('input');
for (let index = 0; index < arr.length; index++) {
if (arr[index].getAttribute("value") != "") {
filledCount++;
console.log("count++")
}
}
I expected the code to log "count++" when detecting a textbox with a non-empty value.