我正在撰寫一段代碼，允許我按下不同的“按鈕”在 HTML 表單的文本型別輸入中插入一個值。
目前，我可以讓代碼使用連接到事件偵聽器的一個按鈕來修改文本欄位中的值，但是，當我嘗試添加多個按鈕來編輯同一個文本欄位時，由于某種原因，我無法獲得它作業。
我嘗試了不同的解決方法，例如為每個按鈕添加單獨的事件偵聽器，并向主函式添加一個引數欄位，但是，由于某種原因，我仍然無法讓它作業。
這是 HTML 和 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>uj5u.com熱心網友回復：
你快到了！只需使用包含目標值的事件引數即可。
解決方案
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);
}
}
每個EventListenerCallback都有一個引數：一個基于Event的物件。
建議
我建議你使用 id 而不是 class 。使用 id 可以更輕松地定位特定元素。我所做的另一個更改是為按鈕創建單獨的事件監聽器。
您會在偵聽器函式引數上獲得一個事件物件，它為您提供要使用的目標值。事件物件還具有其他要研究的屬性。
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>uj5u.com熱心網友回復：
我選擇了所有按鈕
document.querySelectorAll(".btn");然后我
loop通過了所有這些按鈕，click甚至連上了。我還在()=>{}updateTextFeild()回圈內系結了函式。在您的代碼
querySelector()中將只選擇第一個元素，因此它只選擇first button.因此，每當您想選擇多個元素時，我們必須使用
querySelectorAllorgetElementsByClassName。querySelector僅適用于選擇特定元素，例如選擇元素 byidattribute。最后，我不確定但永遠不會通過.```` (dot operator) inside ofclassattribute. Like useinstead of```。
const textField = document.querySelector('input[name = "textField"]');
var myElement = document.forms['Test']['textField'];
const validTextStrings = ["Hello World", "Goodbye World"]
let buttons = document.querySelectorAll('.btn');
buttons.forEach(button => {
button.addEventListener("click", () => {
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>uj5u.com熱心網友回復：
這是您必須使用事件委托的典型情況
const form_Elm = document.forms.Test;
form_Elm.onclick = (evt) =>
{
if (evt.target.matches('button')) // verify clicked element tagName
{
form_Elm.textField.value = evt.target.textContent
console.clear()
console.log( evt.target.name )
}
}<form name="Test">
<button type="button" name="button1" class=".btn">Goodbye World</button>
<button type="button" name="button2" class=".btn">Hello World</button>
<input type="text" name="textField" value="" placeholder="TEXT NEEDS UPDATING">
</form>轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/497723.html
標籤：javascript html 形式