Issue
I am working on a piece of code that would allow me to press different "buttons" to insert a value inside of a text type input of a HTML form.
Currently, I am able to get the code working with one button connected to an event listener to modify the value in the text field, however, when I tried to add multiple buttons to edit the same text field, for some reason, I cannot get it to work.
I've tried different work arounds such as to add individual event listeners to each button and add a parameter field to the main function, however, I still can't get it to work for some reason.
Here's the minimum reproducible code snippets for the HTML and JS:
const textField = document.querySelector('input[name = "textField"]');
var myElement = document.forms['Test']['textField'];
const validTextStrings = ["Hello World", "Goodbye World"]
var button = document.querySelector('input[name = "button"]');
//var button2 = document.querySelector('input[name = "button2"]');
button.addEventListener("click", updateTextField);
function updateTextField() {
console.log("button pressed");
console.log(button.value);
if (allValidValues(button.value)) {
myElement.setAttribute('value', button.value);
}
}
function allValidValues(value) {
for (i = 0; i < validTextStrings.length; i++) {
if (value == validTextStrings[i]) {
return true;
}
}
console.log("Invalid value");
return false;
}<body>
<form name="Test">
<input type="button" name="button" value="Goodbye World" class=".btn">
<input type="button" name="button2" value="Hello World" class=".btn">
<input type="text" value='TEST' placeholder="TEXT NEEDS UPDATING" name="textField">
</form>
</body>Solution
You are almost there! Just use the event parameter that contains the value of the target.
Solution
button.addEventListener("click", updateTextField);
button2.addEventListener("click", updateTextField);
function updateTextField(event) {
console.log("button pressed");
console.log(event.target.value);
if (allValidValues(event.target.value)) {
myElement.setAttribute('value', event.target.value);
}
}
Every EventListenerCallback has a single param: an object based on Event.
Suggestion
I suggest you to use id than that of class. Using ids it is easier to target a specific element. Another change I did was to create separate eventListeners for the buttons.
You get an event object on the listener function parameter which gives you target value to use. The event object also has other properties to look into.
const textField = document.getElementById('textField');
var myElement = document.forms['Test']['textField'];
const validTextStrings = ["Hello World", "Goodbye World"]
var button1 = document.getElementById('btn1');
var button2 = document.getElementById('btn2');
button1.addEventListener("click", updateTextField);
button2.addEventListener("click", updateTextField);
function updateTextField(event) {
if (allValidValues(event.target.value)) {
myElement.setAttribute('value', event.target.value);
}
}
function allValidValues(value) {
for (i = 0; i < validTextStrings.length; i++) {
if (value == validTextStrings[i]) {
return true;
}
}
console.log("Invalid value");
return false;
}<body>
<form name="Test">
<input type="button" name="button" value="Goodbye World" class=".btn" id="btn1">
<input type="button" name="button2" value="Hello World" id="btn2" class=".btn">
<input type="text" value='TEST' id="textField" placeholder="TEXT NEEDS UPDATING" name="textField">
</form>
</body>Answered By - subodhkalika
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.