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

Question

I have this html code with javascript. 我有这个HTML代码和javascript。 My average value displays correctly but my find minimum is not displaying anything. 我的平均值显示正确，但我的发现最小值未显示任何内容。 Its supposed to show when the user clicks on the find min button on the box. 它应该在用户单击框上的“查找最小”按钮时显示。

 <!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

The issue is with the min function. 问题出在min功能上。 Instead of setting the value of textbox (probably, missing in your code example) you are setting the value of button " mini " (which is incorrect). 而不是设置文本框的值（可能在代码示例中丢失），而是设置按钮“ mini ”的值（不正确）。

Update: You need to be including one more textbox <input type="text" id="txtMin" disabled ><br> 更新：您需要再添加一个文本框<input type="text" id="txtMin" disabled ><br>

and update your min function to set the value of it, as follows: 并更新您的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 个解决方案

解决方案1
0 2014-11-04 17:14:30

解决方案2
0 2014-11-04 17:23:40

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

问题描述

2 个解决方案

解决方案1 0 2014-11-04 17:14:30

解决方案2 0 2014-11-04 17:23:40

解决方案1
0 2014-11-04 17:14:30

解决方案2
0 2014-11-04 17:23:40