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

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

javascript html

Javascript 如何在同一文本框中显示不同的功能？,javascript,html,Javascript,Html,我有这个带有javascript的html代码。我的平均值显示正确，但我的“查找最小值”没有显示任何内容。它应该在用户单击框上的find min按钮时显示 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Calculate Your Grade</title> <link rel="stylesheet" href="ca

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

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


计算你的分数
var$=函数（id）{
返回文档.getElementById（id）；
}
var calculateGrade=函数（）{
var exam1=parseFloat（$（“exam1”）.value）；
var exam2=parseFloat（$（“exam2”）.value）；
var exam3=解析浮点（$（“exam3”）.值）；
if（isNaN（exam1）| isNaN（exam2））{
警报（“所有三个条目都必须是数字”）；
}
否则{
var平均值=（exam1+exam2+exam3）/3；
$（“平均值”）。值=平均值；
}
}   
var min=函数（）{
var exam1=parseFloat（$（“exam1”）.value）；
var exam2=parseFloat（$（“exam2”）.value）；
var exam3=解析浮点（$（“exam3”）.值）；
如果（（exam1问题在于min
功能。您没有设置文本框的值（可能在代码示例中缺少），而是设置按钮“mini
”的值（这是不正确的）
更新：
您需要再包含一个文本框

并更新min
函数以设置其值，如下所示：
$("txtMin").value=exam1;
...
$("txtMin").value=exam2;
...
$("txtMin").value=exam3;


计算你的分数
var$=函数（id）{
返回文档.getElementById（id）；
}
var平均值=函数（）{
var exam1=parseFloat（$（“exam1”）.value）；
var exam2=parseFloat（$（“exam2”）.value）；
var exam3=解析浮点（$（“exam3”）.值）；
if（isNaN（exam1）| isNaN（exam2）| isNaN（exam3））{
警报（“所有三个条目都必须是数字”）；
}
否则{
var平均值=（exam1+exam2+exam3）/3；
$（“结果”）。值=平均值；
}
}   
var min=函数（）{
var exam1=parseFloat（$（“exam1”）.value）；
var exam2=parseFloat（$（“exam2”）.value）；
var exam3=解析浮点（$（“exam3”）.值）；
if（isNaN（exam1）| isNaN（exam2）| isNaN（exam3））{
警报（“所有三个条目都必须是数字”）；
}否则{
$（“结果”）.value=Math.min（exam1、exam2、exam3）；
}
}
window.onload=函数（）{
$（“平均值”）。onclick=平均值；
$（“迷你”）.onclick=min；
$（“exam1”）.focus（）；
}
算计
Exam1：


Exam2：


Exam3：




您似乎正在将最小值设置为迷你按钮的值。这是我遇到的问题，但您如何将最小值设置为文本框而不是按钮？请演示给我看。非常感谢。非常感谢。使用数学函数似乎比我尝试做的更容易。
<!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>