当前位置：文江博客话题详情

JavaScript HTML forms

多个按钮使用JS更改html表单中单个输入文本字段的值

发布于 2025-02-12 11:49:15 字数 1459 浏览 0 评论 0 原文

我正在处理一项代码，该代码可以让我按不同的“按钮”以在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>

原文

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>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

天邊彩虹 2025-02-19 11:49:15

你快到了！只需使用包含目标值的事件参数即可。

解决方案

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);
  }
}

每个具有一个单个参数：基于 event 。

建议

我建议您使用ID，而不是课堂。使用ID可以更容易定位特定元素。我所做的另一个更改是为按钮创建单独的EventListeners。

您可以在“侦听器函数参数”上获得事件对象，以使您可以使用目标值。事件对象还具有其他属性。

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>

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>

回复收藏 0 原文

放血 2025-02-19 11:49:15

我选择了 document.queryselectorall（“。btn”）;

的所有按钮
我已经通过 document.queryselectorall（“。btn”）;
代码>均匀。我还将（）=＆gt; {} updateTeTextfeild（）函数绑定。
在您的代码 QuerySelector（）仅选择第一个元素，因此它仅选择第一个按钮。
因此，每当您要选择一个以上的元素时，我们都必须使用 queryselectorall 或 getElementsByClassName 。
querySelector 仅适用于选择特定元素，例如选择 id> id> id attribute 的元素。最后，我不确定，但切勿通过。“```（点运算符） class> class 属性。喜欢使用 class =“ btn” 而不是 class =“。btn”`````

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>

I have selected all the buttons by document.querySelectorAll(".btn");
Then I have loop through all this buttons and attached click even. I have also bind the ()=>{} updateTextFeild() function inside of the loop.
In your code querySelector() will only select the first element so it was selecting only first button.
So, whenever you want to select more than one element we must use querySelectorAll or getElementsByClassName.
querySelector is only good for selecting specific element like selecting element by id attribute. Lastly, I am not sure but never pass .```` (dot operator) inside of classattribute. Like useclass="btn"instead ofclass=".btn"```.

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>

回复收藏 0 原文

浮世清欢 2025-02-19 11:49:15

这是您必须使用事件委托的典型情况

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>

this is a typical case where you have to use event delegation

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>

回复收藏 0 原文

~没有更多了~