Question

我是JavaScript的新手。我的页面上有一系列文本框和一个按钮。按下按钮时，我想找到最大的数字，并在该文本框周围添加边框。

目前，当我点击按钮时没有任何变化，我不确定我哪里出错了。

<html>
  <head>
    <script>

document.getElementById("findMax").addEventListener("click", function(){

var num1 = document.getElementById('number1').value
var num2 = document.getElementById('number2').value
var num3 = document.getElementById('number3').value
var num4 = document.getElementById('number4').value
var num5 = document.getElementById('number5').value

// Find the largest of the nums
if ((num1 > num2) && (num1 > num3) && (num1 > num4) && (num1 > num5){
document.getElementById("number1").style.borderColor="#008000"
}
else if((num2> num1) && (num2> num3) && (num2> num4) && (num2> num5)){
document.getElementById("number2").style.borderColor="#008000"
}
else if((num3> num1) && (num3> num2) && (num3> num4) && (num3> num5)){
document.getElementById("number3").style.borderColor="#008000"
}
else if((num4> num1) && (num4> num2) && (num4> num3) && (num4> num5)){
document.getElementById("number4").style.borderColor="#008000"
}
else if((num5> num1) && (num5> num2) && (num5> num3) && (num5> num4)){
document.getElementById("number4").style.borderColor="#008000"
}
else{
// ERROR: No Largest Num!
}});

    </script>
    <style>
      input[type='text'] {width:50px;}
      textarea {width:500px;height:300px;}
    </style>
  </head>
  <body>
  <div>
    <h2>Test</h2>
    <p>
    <input type="text" id="number1" />
    <input type="text" id="number2" />
    <input type="text" id="number3" />
    <input type="text" id="number4" />
    <input type="text" id="number5" />
    </p>
    <button id="findMax">Calculate</button>
  </div>
  </body>
</html>

Answer 1

使用Math.max函数，这是工作模板

document.getElementById("findMax").addEventListener("click", function() {

  var num1 = parseInt(document.getElementById('number1').value) || 0;
  var num2 = parseInt(document.getElementById('number2').value) || 0;
  var num3 = parseInt(document.getElementById('number3').value) || 0;
  var num4 = parseInt(document.getElementById('number4').value) || 0;
  var num5 = parseInt(document.getElementById('number5').value) || 0;

  var max = Math.max(num1, num2, num3, num4, num5);

  document.getElementById("number1").style.borderColor = (max == num1) ? "#008000" : "inherit";
  document.getElementById("number2").style.borderColor = (max == num2) ? "#008000" : "inherit";
  document.getElementById("number3").style.borderColor = (max == num3) ? "#008000" : "inherit";
  document.getElementById("number4").style.borderColor = (max == num4) ? "#008000" : "inherit";
  document.getElementById("number5").style.borderColor = (max == num5) ? "#008000" : "inherit";
});

input[type='text'] {
  width: 50px;
}
textarea {
  width: 500px;
  height: 300px;
}

<div>
  <h2>Test</h2>
  <p>
    <input type="text" id="number1" />
    <input type="text" id="number2" />
    <input type="text" id="number3" />
    <input type="text" id="number4" />
    <input type="text" id="number5" />
  </p>
  <button id="findMax">Calculate</button>
</div>

Answer 2

试试这个。

var maxNum = -Infinity,
    maxDom = null;

for(var i = 1; i <= 5; i++) {
    var dom = document.getElementById('number' + i),
        num = parseInt(dom.value);

    if(!isNaN(num) && num > maxNum) {
        maxNum = num;
        maxDom = dom;
    }
}

if(maxDom) {
    maxDom.style.borderColor = '#008000';
}

查找编号最大的文本框

2 个答案: