如何使用getElementsByClassName获取输入数组？有可能得到那个吗？因为我计划获取输入的所有类名的数组，并比较是否有相同的元素，如果数组中有相同的值，它会提醒用户他们输入了无效的输入，它类似于验证。这是我的代码。
<table class="table table-responsive table-striped table-hover ">
<thead>
<tr>
<th>#</th>
<th colspan='2'>L</th>
<th colspan='2'>O</th>
<th colspan='2'>G</th>
<th colspan='2'>B</th>
</tr>
</thead>
<tbody>
<tr class="info">
<td width="30px">1</td>
<td width="200px">Likes Authority</td>
<td width="75px;">
<select class="r1" style="position: absolute; z-index:9999;"
onmouseover="this.size=this.options.length"
onmouseout="this.size=1" onchange="this.size=1" name="qtyL" >
<option value="0">-</option>
<option value="1" >1</option>
<option value="2" >2</option>
<option value="3" >3</option>
<option value="4" >4</option>
</select>
</td>
<td width="200px">Enthusiastic</td>
<td width="75px;">
<select class="r1" style="position: absolute; z-index:9999;"
onmouseover="this.size=this.options.length"
onmouseout="this.size=1" onchange="this.size=1" name="qtyO" >
<option value="0">-</option>
<option value="1" >1</option>
<option value="2" >2</option>
<option value="3" >3</option>
<option value="4" >4</option>
</select>
</td>
<td width="200px">Sensitive Feelings</td>
<td width="75px;">
<select class="r1" style="position: absolute; z-index:9999; "
onmouseover="this.size=this.options.length"
onmouseout="this.size=1" onchange="this.size=1" name="qtyG" >
<option value="0">-</option>
<option value="1" >1</option>
<option value="2" >2</option>
<option value="3" >3</option>
<option value="4" >4</option>
</select>
</td>
<td width="180px">Likes Instructions</td>
<td width="75px;">
<select class="r1" style="position: absolute; z-index:9999; "
onmouseover="this.size=this.options.length"
onmouseout="this.size=1" onchange="this.size=1" name="qtyB" >
<option value="0">-</option>
<option value="1" >1</option>
<option value="2" >2</option>
<option value="3" >3</option>
<option value="4" >4</option>
</select>
</td>
</tr>
</tbody>
</table>
<script>
function validateNresult()
{
var totr1=document.getElementById("totalr1").value;
var arr1=document.getElementsByClassName("r1");
var allr1=arr1.value;
Array.prototype.allValuesSame = function()
{
for(var i = 1; i < this.length; i++)
{
if(this[i] !== this[0])
alert("Invalid input");
}
return true;
}
var checkarr1=allr1.allValuesSame();
}
也许我的逻辑是错误的，但重要的部分是如何获得类名为r1的所有值？谢谢。
答案 0 :(得分：1)
var arr1=document.getElementsByClassName("r1");
这将返回一个NodeList对象。 NodeList对象表示节点的集合。
var allr1=arr1.value;
这没有任何意义。您应该遍历此对象，然后比较其项目的值。
for (var i = 0; i < arr1.length; i++) {
console.log(arr1[i].value);
}
答案 1 :(得分：1)
var v = document.getElementsByClassName('r1');
var len = v.length - 1;
var val = v[0].value;
var same = true;
while(len > 0)
{
if (val != v[len].value)
{
same = false;
break;
}
len--;
}
答案 2 :(得分：1)
为了更进一步，我补充道：
我们向<form>
addEventListener()
当一个新值被添加到任何<input>回调（一个函数的花哨名称在一个事件上被调用）时，indexOf()方法将尝试找到一个匹配新值和先前创建的数组的值。
如果匹配，则会触发警报，如果没有匹配，则返回false（基本上它没有做任何事情，直到在任何一个上输入匹配值为止输入）。
<小时/>
document.querySelectorAll('.className')将分配给.whateverClass的所有元素收集到NodeList Array.from()将NodeList转换为数组。Array.prototype.map()。
const kArray = Array.from(document.querySelectorAll('.K'));
console.log(kArray);
const arrayOK = kArray.map(function(kay, idx) {
var ok = kay.value;
return ok;
});
console.log(arrayOK);
var FK = document.getElementById('formK');
FK.addEventListener('change', function(evt) {
if (evt.target !== evt.currentTarget) {
var tgt = evt.target.value;
if (arrayOK.indexOf(tgt) > -1) {
alert('Hey! That\'s already been entered, try something different.');
}
return false;
}
});.as-console-wrapper {
max-height: 75px !important;
}<form id='formK'>
<input class='K' value='0'>
<input class='K' value='b'>
<input class='K' value='8'>
<input class='K' value='f'>
<input class='K' value='6'>
<input class='K' value='c'>
<input class='K' value='1'>
<input class='K' value='2'>
<input class='K' value='7'>
<input class='K' value='5'>
<input class='K' value='9'>
<input class='K' value='d'>
<input class='K' value='3'>
<input class='K' value='a'>
<input class='K' value='e'>
<input class='K' value='4'>
</form>
答案 3 :(得分：0)
以下代码应该可以解决问题：
let select_element = document.getElementsByClassName("r1"); //puts all the select elements into an array
let values = []; //create a new array that will store the values of each select
for (let i = 0; i < select_element.length; i++){
//loop through the array to get all the chosen select values
values.push(select_element[i].options[select_element[i].selectedIndex].value);
};
//this check if any of the values are duplicated and alerts the user if they are
sorted_array = values.sort();
for (let i = 0; i < sorted_array.length; i++){
if (sorted_array[i + 1] == sorted_array[i]){
alert("duplicates exist");
break;
};
};
可以在这里找到工作的JSFiddle：https://jsfiddle.net/darkisa/38u1t564/
当然，您也可以检查所有值是否加起来多于或少于10.因为您需要每个选择值都是唯一的，因为您只有四个值的值为1到4之后，在对所有值求和之后，任何不等于10的值意味着某处存在重复。