javascript 使用getElementByClassName获取数组

k10s72fa 于 2023-05-12 发布在 Java

关注(0)|答案(5)|浏览(172)

如何使用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？谢谢大家。

JavaScript

来源：https://stackoverflow.com/questions/43906584/get-array-using-getelementbyclassname

5条答案

按热度按时间

uqzxnwby1#

var arr1=document.getElementsByClassName("r1");
这将返回一个NodeList对象。NodeList对象表示节点的集合。
var allr1=arr1.value;
这说不通。您应该循环访问此对象，然后比较其项的值。

for (var i = 0; i < arr1.length; i++) {
    console.log(arr1[i].value);
}

赞(0）回复(0）举报 2023-05-12

at0kjp5o2#

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--;
}

赞(0）回复(0）举报 2023-05-12

pgpifvop3#

更新

为了更进一步，我补充道：
1.一个<form>，我们使用addEventListener()向其注册更改事件
1.当一个新的值被添加到任何<input>回调函数（一个在事件中被调用的函数的奇特名称）时，indexOf()方法将尝试在新值和之前创建的数组的值之间找到匹配。
1.如果有匹配，则会触发警报，如果没有匹配，则返回false（基本上，在任何输入上输入匹配值之前，它不会做任何事情）。

旧版

1.使用document.querySelectorAll('.className')将分配给.whateverClass的所有元素收集到NodeList中
1.接下来使用Array.from()将NodeList转换为数组。
1.从现在开始，您将处理数组，最通用的数组方法是Array.prototype.map()。

Demo

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>

赞(0）回复(0）举报 2023-05-12

htzpubme4#

下面的代码应该可以做到这一点：

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的值都意味着在某个地方有一个重复。

赞(0）回复(0）举报 2023-05-12

lndjwyie5#

您也可以使用扩展操作符。

[...document.getElementsByClassName('some-class-name')].map(e => e.innerText)

赞(0）回复(0）举报 2023-05-12

我来回答

javascript 使用getElementByClassName获取数组

5条答案

更新

旧版

Demo

相关问题

热门标签

最新问答