I have written this code which detects if there is a value populated in productName field using javascript and then it parses and auto-populate the input field quantity. My code only works if productName field is populated through javascript code and fails to register keyboard inputs if I use onChange
I want to detect in both scenarios i.e javascript and keyboard, how do I detect using the keyboard in this code?
const input = document.getElementById('productName');
const descriptor = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(input), 'value');
Object.defineProperty(input, 'value', {
set: function(t) {
console.log('Input value was changed programmatically');
descriptor.set.apply(this, arguments);
document.getElementById("quantity").value=t
},
get: function() {
return descriptor.get.apply(this);
}
});
var i=0;
function changeInput(){
/* console.log(document.getElementById('productName').value) */
document.getElementById("productName").value=i++;
}<input type="text" id="productName" name="productName" placeholder="product name">
<input type="text" id="quantity" name="quantity" placeholder="quantity">
<button onclick="changeInput()">Change</button>Since I am a beginner in Javascript, a comment by @epascarello helped me, and this was quite easy with binding the input element:
document.getElementById("productName").addEventListener("input",(event)=>{
document.getElementById("quantity").value= document.getElementById("productName").value;
})