如何使用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();
}
也许我的逻辑是错误的,但重要的部分是如何得到所有的classname值是r1?谢谢大家。
5条答案
按热度按时间uqzxnwby1#
var arr1=document.getElementsByClassName("r1");
这将返回一个NodeList对象。NodeList对象表示节点的集合。
var allr1=arr1.value;
这说不通。您应该循环访问此对象,然后比较其项的值。
at0kjp5o2#
pgpifvop3#
更新
为了更进一步,我补充道:
1.一个
<form>
,我们使用addEventListener()
向其注册更改事件1.当一个新的值被添加到任何
<input>
回调函数(一个在事件中被调用的函数的奇特名称)时,indexOf()
方法将尝试在新值和之前创建的数组的值之间找到匹配。1.如果有匹配,则会触发警报,如果没有匹配,则返回false(基本上,在任何输入上输入匹配值之前,它不会做任何事情)。
旧版
1.使用
document.querySelectorAll('.className')
将分配给.whateverClass
的所有元素收集到NodeList中1.接下来使用
Array.from()
将NodeList转换为数组。1.从现在开始,您将处理数组,最通用的数组方法是
Array.prototype.map()
。Demo
htzpubme4#
下面的代码应该可以做到这一点:
可以在这里找到工作的JSFiddle:https://jsfiddle.net/darkisa/38u1t564/
当然,您也可以检查所有值的总和是否大于或小于10。因为你需要每个选择值都是唯一的,而且你只有四个选择值可以有1到4的值,在你对所有的值求和之后,任何不等于10的值都意味着在某个地方有一个重复。
lndjwyie5#
您也可以使用扩展操作符。