How to get the array of my input using getElementsByClassName? Is it possible to get that? Because I was planning to get the array of all of the classnames of my input and compare whether there are same element or not, if there are same value inside the array, it will alert user they had enter invalid input, it kind like a validation. Here are my code.
<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();
}
Maybe my logic is wrong, but the importance part is how do get all the value of classname which is r1? Thank you.
The below code should do the trick:
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;
};
};
The working JSFiddle can be found here: https://jsfiddle.net/darkisa/38u1t564/
Of course, you can also just check to see if all the values add up to more or less than 10. Since you need each select value to be unique and since you only have four of them that can have a value of 1 to 4, after you sum all of the values, anything that does not equal 10 means there is a duplicate somewhere.