Question

我有这个带有javascript的html代码。我的平均值显示正确但我的最小值没有显示任何内容。它应该显示当用户点击框上的查找最小按钮时。

 <!DOCTYPE html>
 <html lang="en">
 <head>
<meta charset="UTF-8">
<title>Calculate Your Grade</title>
<link rel="stylesheet" href="calc.css">
<script>
    var $ = function (id) {
        return document.getElementById(id);
    }
    var calculateGrade = function () {
        var exam1 = parseFloat($("exam1").value);
        var exam2 = parseFloat($("exam2").value);
        var exam3=parseFloat($("exam3").value);

        if (isNaN(exam1) || isNaN(exam2) ) {
            alert("All three entries must be numeric");
        }
        else {
            var average = (exam1 + exam2 + exam3) / 3;
            $("average").value = average;
        }

        }   
        var min  = function () {
        var exam1 = parseFloat($("exam1").value);
        var exam2 = parseFloat($("exam2").value);
        var exam3=parseFloat($("exam3").value);

        if ( (exam1<exam2) && (exam1<exam3)){
            $("mini").value=exam1;}
        else if ((exam2<exam1) && (exam2<exam3)){
            $("mini").value=exam2;}
        else {
            $("mini").value=exam3;
            }       
    }
        window.onload = function () {
        $("calculate").onclick = calculateGrade;
        $("mini").onclick = min;

        $("exam1").focus();
        }









</script>
</head>
<body>
<section>
    <h1>Calculate Average</h1>
    <label for="exam1">Exam1:</label>
    <input type="text" id="exam1"><br>
    <label for="exam2">Exam2:</label>
    <input type="text" id="exam2"><br>
    <label for="exam3">Exam3:</label>
    <input type="text" id="exam3"><br>
     <label for="average"></label>
    <input type="text" id="average"disabled ><br>  
    <label>&nbsp;</label>



    <input type="button" id="calculate" value="Calc Avg">
    <input type="button" id="mini" value="Find min"> 
  </section>
 </body>
</html>

Answer 1

问题在于min功能。您没有设置文本框的值（可能在代码示例中丢失），而是设置按钮“mini”的值（这是不正确的）。

<强>更新您需要再添加一个文本框<input type="text" id="txtMin" disabled ><br>

并更新您的min函数以设置它的值，如下所示：

$("txtMin").value=exam1;
...
$("txtMin").value=exam2;
...
$("txtMin").value=exam3;

Answer 2

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Calculate Your Grade</title>
<link rel="stylesheet" href="calc.css">
<script>
    var $ = function (id) {
        return document.getElementById(id);
    }

    var average = function () {
        var exam1 = parseFloat($("exam1").value);
        var exam2 = parseFloat($("exam2").value);
        var exam3 = parseFloat($("exam3").value);

        if (isNaN(exam1) || isNaN(exam2) || isNaN(exam3)) {
            alert("All three entries must be numeric");
        }
        else {
            var average = (exam1 + exam2 + exam3) / 3;
            $("result").value = average;
        }
    }   

    var min  = function () {
        var exam1 = parseFloat($("exam1").value);
        var exam2 = parseFloat($("exam2").value);
        var exam3 = parseFloat($("exam3").value);

        if (isNaN(exam1) || isNaN(exam2) || isNaN(exam3)) {
            alert("All three entries must be numeric");
        } else {
            $("result").value = Math.min(exam1,exam2,exam3); 
        }
    }

    window.onload = function () {
        $("average").onclick = average;
        $("mini").onclick = min;
        $("exam1").focus();
    }
</script>
</head>
<body>
<section>
    <h1>Calculate</h1>
    <label for="exam1">Exam1:</label>
    <input type="text" id="exam1"><br>
    <label for="exam2">Exam2:</label>
    <input type="text" id="exam2"><br>
    <label for="exam3">Exam3:</label>
    <input type="text" id="exam3"><br>
     <label for="average"></label>
    <input type="text" id="result" disabled ><br>  
    <label>&nbsp;</label>

    <input type="button" id="average" value="Calc Avg">
    <input type="button" id="mini" value="Find min"> 
  </section>
 </body>
</html>

如何在同一个文本框中显示不同的功能？

2 个答案: