Question

我正在建立一个网站，我想使用多个输入

CAShapeLayer

在Javascript中我使用querySelectorAll来获取数组中的值

<input type="text" class="foo" value="foo">
<input type="text" class="foo" value="foo">
<input type="text" class="foo" value="foo">
...

<button onclick="function()">Send</button>

这只适用于我，当我不使用值但后来我得到完整元素而不是值...

谢谢：）

Answer 1

document.querySelectorAll()返回（非实时）NodeList，而不是数组。幸运的是，伪数组上的数组方法可以call：

function getValues(selector) {
    var els = document.querySelectorAll(selector);
    return [].map.call(els, el => el.value);
}

Answer 2

您需要单独访问这些值。以下是您更新的代码示例：

function myfunc() {
   var myElementArray = document.querySelectorAll('.foo');

     var myOutputText = "";
     for(var i=0;i< myElementArray.length; i++){
            myOutputText += myElementArray[i].value + " | ";
    }

    alert(myOutputText);
}

Here is the JSFiddle demo

Answer 3

document.querySelectorAll('.foo')将返回nodeList。因此，您的代码将返回undefined。

其中一种方法是，您可以获得一系列值。

function func() {
  var a = document.querySelectorAll('.foo');
  var b = [];
  for(var i = 0; i <= a.length-1; i++){
    b.push(a[i].value);
  }
  console.log(b);
}

<input type="text" class="foo" value="foo">
<input type="text" class="foo" value="foo">
<input type="text" class="foo" value="foo">

<button onclick="func()">Send</button>

Answer 4

With ES6, to get an array of values you can try this

Array.from(document.querySelectorAll('.foo')).map(x => x.value)

Javascript querySelectorAll从多个输入中获取多个值

4 个答案: