Question

当我通过类名称选择输入字段元素时，onchange事件不起作用。我想更改当前更改的输入字段的值。代码如下：

// change current input field
function upperCase() {
// change current change input field
  let x = document.getElementsByClassName('fname');
  x.value = x.value.toUpperCase();
}   
// call function when current element change
document.getElementsByClassName('fname').onChange = upperCase;

<input type="text" class="fname">
<input type="text" class="fname">
<input type="text" class="fname">
<input type="text" class="fname">

请，我也想更改当前更改输入字段的值。

Answer 1

document.getElementsByClassName返回元素的集合，但是您试图像访问单个元素一样访问值。

您需要访问每个单独的元素，如下所示：

let inputs = document.getElementsByClassName('fname');
inputs[0].value = inputs[0].value.toUpperCase();

甚至更好的是遍历它们：

let inputs = document.getElementsByClassName('fname');
for (let i of inputs) {
  i.value = i.value.toUpperCase();
}

编辑以添加事件，该想法应该是相同的：

function upperCase() {
  // change current change input field
  let inputs = document.getElementsByClassName('fname');
  for (let i of inputs) {
    i.value = i.value.toUpperCase();
  }
}
let inputs = document.getElementsByClassName('fname');
for (let i of inputs) {
  i.addEventListener('change', upperCase);
}

<input type="text" class="fname">
<input type="text" class="fname">
<input type="text" class="fname">
<input type="text" class="fname">

Answer 2

let x = document.getElementsByClassName('fname');返回一个对象数组，您需要使用该数组的值，例如：

let arrayFName = document.getElementsByClassName('fname');

for (let i of arrayFName) {
    i.value = i.value.toUpperCase();
}

onchange属性也是如此：

for (let j of arrayFName) {
   j.onChange = upperCase;
}

希望有帮助！

Answer 3

替换您的 document.getElementsByClassName（'fname'）。onChange = upperCase;

使用

 const selectElement = document.querySelector('.fname');

 selectElement.addEventListener('change', () => {
   upperCase();
 });

Answer 4

正如其他人指出的那样，当一个元素多于一个元素时，您应该全部识字并在函数更改时调用函数。因此基本上类似这样的工作即可完成：

    @Override
    public int compareTo(Object other) {

        if(this.data.compareTo(((StackNode)other).data) > 0)
            return 1;
        else if (this.data.compareTo(((StackNode)other).data) == 0)
            return 0;
        else
            return -1;
    }

var x = document.getElementsByClassName('fname');
for (var i=0; i < x.length; i++) {
  x[i].addEventListener('change', changeToUpperCase);
}
function changeToUpperCase(t) {
  this.value= this.value.toUpperCase().replace(/ /g,'');
}

onchange不适用于由类名选择的输入字段

4 个答案: