javascript - 无法获取 JavaScript 函数输入 ID 的动态值

Question

拜托，我需要帮助..

@foreach
 <input  id="mar1bags" class="form-control" name="mar1bags" value="">
@endforeach

我正在使用 foreach 循环来获取一些数据，并且这个输入字段也在内部供我输入数据。

但现在的问题是我无法使用 GetelementbyID 来获取 javascript 中的值。它仅返回第一个输入字段，但其他输入字段不会返回。

当我尝试提交到 javascript 函数时，我在控制台中收到此错误

[DOM] Found 3 elements with non-unique id #mar1bags:

Answer 1

这个循环似乎创建了多个输入，但继续将它们设置为相同的 id。由于 ID 假定是唯一的，因此它无效(并且 getElementById 方法也会失败)。

您可以使用.querySelectorAll方法代替，语法为:

document.querySelectorAll('[property=value]');

编辑您的案例:

<script>
var hht; // declare the var GLOBAL
console.log(hht + ' before function');
function checkVal() { // make a function that will check the value
  let inputData = document.querySelectorAll('[name=mar1bags]');
  // now you can iterate inputData using a loop.
  // Using for loop will be something like this:
  for (var i=0; i < inputData.length; i++) {
    var checkEmpty = inputData[i].value.length; // get each value length
    if (checkEmpty > 0) { // if it holds more then one chareter then
      hht = inputData[i].value; // assign this to the GLOBAL
    }
  }
}
console.log(hht + ' after function');
</script>    

享受代码!