Question

我要计算九个数字字段。我需要检查这9个数字字段中是否存在重复项，如果发现重复值，请将屏幕的背景色更改为“红色”。我找不到上述解决方案。

我创建了一个包含9个九个数字字段的表格，用于输入数字并计算总和。我搜索了用于检查数字字段中重复值的代码，但是找到了用于检查文本字段中重复值的代码。

 <html>
    <head>
    <script>
        function Sum() {
         alert("hi");
        var num1 = Number(document.getElementById("qty1").value);
        var num2 = Number(document.getElementById("qty2").value);
        var num3 = Number(document.getElementById("qty3").value);
        var num4 = Number(document.getElementById("qty4").value);
        var num5 = Number(document.getElementById("qty5").value);
        var num6 = Number(document.getElementById("qty6").value);
        var num7 = Number(document.getElementById("qty7").value);
        var num8 = Number(document.getElementById("qty8").value);
        var num9 = Number(document.getElementById("qty9").value);
        var sum=num1+num2+num3+num4+num5+num6+num7+num8+num9
        document.getElementById("answer").value = sum;
    }
    </script>

    <style>

    table>tbody>tr:nth-child(odd){
        background-color: blue;
    }

    table>tbody>tr:nth-child(even){
        background-color: green;
    }

    table>tbody>tr:nth-child(odd)>td:nth-child(odd){
        background-color: green;
    }
    table>tbody>tr:nth-child(odd)>td:nth-child(even){
        background-color: blue;
    }

    table>tbody>tr:nth-child(even)>td:nth-child(odd){
        background-color: blue;
    }
    table>tbody>tr:nth-child(even)>td:nth-child(even){
        background-color: green;
    }
    #sumtable th, #sumtable td{
        padding:5px;

    }

    </style>
    </head>
    <title>Sum Box</title>
    <body>
    <table align="center" id="sumtable">
      <tbody>
        <tr>
          <td>
    <input type="number"  placeholder="input1"  value="input1"id="qty1"></td>
          <td>
    <input type="number"  placeholder="input2"  value="input2"  id="qty2"></td>
          <td>
    <input type="number"placeholder="input3"value="input3"id="qty3"></td>
        </tr>
        <tr>
          <td><input type="number"  placeholder="input4"  value="input4"  id="qty4"  ></td>
          <td><input type="number"  placeholder="input5"  value="input5"  id="qty5"  ></td>
          <td><input type="number"  placeholder="input6"  value="input6"  id="qty6"  ></td>
        </tr>
        <tr>
          <td><input type="number" placeholder="input7"  value="input7"   id="qty7"  ></td>
          <td><input type="number" placeholder="input8"  value="input8"   id="qty8"  ></td>
          <td><input type="number" placeholder="input9"  value="input9"   id="qty9"  ></td>
        </tr>
        </tbody>
        </table>
       <!-- Sum : <input type="text" name="total" id="total"/>
        <a href="javascript:sumInputs()">Sum</a>-->
        <div align="center">
        <input type="button" onclick="Sum()" name="Sum" value="Sum" id="sum">
        <input id="answer">
        </div>
         </body>
    </html>

上面的代码以表格格式生成9个输入数字字段，以输入数字并计算总和

Answer 1

将数字添加到数组中并循环遍历。一个可能的示例，请参见https://codepen.io/anon/pen/yZaBrb：

var a = new Array(1,2,3,4,5,6,7,9,2,4);

var duplicate = false;

for (i=0;i<a.length;i++){
  duplicate = false;
  for(j=0;j<a.length;j++){
    if(i != j && a[i]==a[j])  
      duplicate = true;
  } 
  if(duplicate)
    document.write('<span style="background-color:red;">')

  document.write(a[i]);

  if(duplicate)
    document.write('</span>')
}

Answer 2

创建两个事件blur和keyup。在blur上从输入中获取值并将其推入数组，在keyup上检查数组是否包含相同的值。如果该值存在于数组中，则向目标元素添加一个类或将其删除

function Sum() {
  alert("hi");
  var num1 = Number(document.getElementById("qty1").value);
  var num2 = Number(document.getElementById("qty2").value);
  var num3 = Number(document.getElementById("qty3").value);
  var num4 = Number(document.getElementById("qty4").value);
  var num5 = Number(document.getElementById("qty5").value);
  var num6 = Number(document.getElementById("qty6").value);
  var num7 = Number(document.getElementById("qty7").value);
  var num8 = Number(document.getElementById("qty8").value);
  var num9 = Number(document.getElementById("qty9").value);
  var sum = num1 + num2 + num3 + num4 + num5 + num6 + num7 + num8 + num9
  document.getElementById("answer").value = sum;
}

let sumArray = []

document.querySelectorAll('input[type="number"]').forEach((item) => {
  item.addEventListener('blur', (e) => {
    sumArray.push(e.target.value)
  })

  item.addEventListener('keyup', (e) => {
    if (sumArray.indexOf(e.target.value) !== -1) {
      e.target.parentNode.classList.add('error')
    } else if (e.target.parentNode.classList.contains('error')) {
      e.target.parentNode.classList.remove('error')
    }
  })
})

table>tbody>tr:nth-child(odd) {
  background-color: blue;
}

table>tbody>tr:nth-child(even) {
  background-color: green;
}

table>tbody>tr:nth-child(odd)>td:nth-child(odd) {
  background-color: green;
}

table>tbody>tr:nth-child(odd)>td:nth-child(even) {
  background-color: blue;
}

table>tbody>tr:nth-child(even)>td:nth-child(odd) {
  background-color: blue;
}

table>tbody>tr:nth-child(even)>td:nth-child(even) {
  background-color: green;
}

#sumtable th,
#sumtable td {
  padding: 5px;
}

.error {
  border: 2px solid red;
}

<title>Sum Box</title>

<body>
  <table align="center" id="sumtable">
    <tbody>
      <tr>
        <td>
          <input type="number" placeholder="input1" value="input1" id="qty1"></td>
        <td>
          <input type="number" placeholder="input2" value="input2" id="qty2"></td>
        <td>
          <input type="number" placeholder="input3" value="input3" id="qty3"></td>
      </tr>
      <tr>
        <td><input type="number" placeholder="input4" value="input4" id="qty4"></td>
        <td><input type="number" placeholder="input5" value="input5" id="qty5"></td>
        <td><input type="number" placeholder="input6" value="input6" id="qty6"></td>
      </tr>
      <tr>
        <td><input type="number" placeholder="input7" value="input7" id="qty7"></td>
        <td><input type="number" placeholder="input8" value="input8" id="qty8"></td>
        <td><input type="number" placeholder="input9" value="input9" id="qty9"></td>
      </tr>
    </tbody>
  </table>
  <!-- Sum : <input type="text" name="total" id="total"/>
    <a href="javascript:sumInputs()">Sum</a>-->
  <div align="center">
    <input type="button" onclick="Sum()" name="Sum" value="Sum" id="sum">
    <input id="answer">
  </div>

Answer 3

非常简单，只需将相同的类放在输入字段中，然后像这样遍历

在HTML中，

  <td>
    <input type="number" class="checkSame"  placeholder="input1"  value="input1"id="qty1"></td>
          <td>
    <input type="number" class="checkSame" placeholder="input2"  value="input2"  id="qty2"></td>
          <td>
    <input type="number" class="checkSame" placeholder="input3"value="input3"id="qty3"></td>

然后使用javascript

var inputs = document.getElementsByClassName("checkSame");
var temp;
var count = 1;
for(var i = 0; i < inputs .length; i++)
{
   temp = document.getElementsByClassName("checkSame")[i].value;
   if(temp == document.getElementsByClassName("checkSame")[count++].value)
   {
       //change your background color here
       break;
   }
}

我认为它可行。

Answer 4

我希望这会帮助您找到重复的字段

function Sum() {
  alert("hi");
  let arr = [];
  let sum;
  let duplicate = false;
  for (let i = 1; i <= 9; i++) {
    let num = Number(document.getElementById(`qty${i}`).value);
    let indexOfDuplicateNum = arr.indexOf(num);
    if (indexOfDuplicateNum > -1){
        duplicate = true;
       alert('Duplicate value found!');
  document.getElementsByTagName('body')[0].style.background = 'red';
  document.getElementById(`qty${i}`).classList.add('duplicate-error');
  document.getElementById(`qty${indexOfDuplicateNum+1}`).classList.add('duplicate-error');
    break;
    } else{
    //remove error class if value is not duplicate
    document.getElementById(`qty${i}`).classList.remove('duplicate-error');
     arr.push(num); 
     sum = arr.reduce((a, b) => a+b, 0);
    }
  }
  
  if (!duplicate) {
    document.getElementById('answer').value = sum;
    document.getElementsByTagName('body')[0].style.background = 'white';
  }
  }

.duplicate-error {
      border: 2px solid red;
    }
    table>tbody>tr:nth-child(odd){
        background-color: blue;
    }

    table>tbody>tr:nth-child(even){
        background-color: green;
    }

    table>tbody>tr:nth-child(odd)>td:nth-child(odd){
        background-color: green;
    }
    table>tbody>tr:nth-child(odd)>td:nth-child(even){
        background-color: blue;
    }

    table>tbody>tr:nth-child(even)>td:nth-child(odd){
        background-color: blue;
    }
    table>tbody>tr:nth-child(even)>td:nth-child(even){
        background-color: green;
    }
    #sumtable th, #sumtable td{
        padding:5px;

    }

<html>
    <head>
      <title>Sum Calculator</title>
    </head>
    <title>Sum Box</title>
    <body>
    <table align="center" id="sumtable">
      <tbody>
        <tr>
          <td>
    <input type="number"  placeholder="input1"  value="input1"id="qty1"></td>
          <td>
    <input type="number"  placeholder="input2"  value="input2"  id="qty2"></td>
          <td>
    <input type="number"placeholder="input3"value="input3"id="qty3"></td>
        </tr>
        <tr>
          <td><input type="number"  placeholder="input4"  value="input4"  id="qty4"  ></td>
          <td><input type="number"  placeholder="input5"  value="input5"  id="qty5"  ></td>
          <td><input type="number"  placeholder="input6"  value="input6"  id="qty6"  ></td>
        </tr>
        <tr>
          <td><input type="number" placeholder="input7"  value="input7"   id="qty7"  ></td>
          <td><input type="number" placeholder="input8"  value="input8"   id="qty8"  ></td>
          <td><input type="number" placeholder="input9"  value="input9"   id="qty9"  ></td>
        </tr>
        </tbody>
        </table>
       <!-- Sum : <input type="text" name="total" id="total"/>
        <a href="javascript:sumInputs()">Sum</a>-->
        <div align="center">
        <input type="button" onclick="Sum()" name="Sum" value="Sum" id="sum">
        <input id="answer">
        </div>
         </body>
    </html>

如何修复javascript

4 个答案: