Question

我正在尝试创建一个表单，您可以在其中输入一个数字到文本框，并根据该表单将文本响应放在文本框中。这是我一直努力工作的一个例子：

<html>
    <head>
        <script type="text/javascript">
            function calculate()
            {
                var ph = document.test.ph.value;
                if (ph > 7.45) {
                    var str = "Alkalosis";
                }
                else if (ph < 7.35) {
                    var str = "Acidosis";
                }
                else {
                    var str = "Normal";
                }
                document.test.acidalk.value = str;
            }
        </script>
    </head>
    <body>
        <form name="test">
            pH<input type="textbox" name="ph"><br>
            <input type="submit" value="Calculate"><br>
            <input type="textbox" id="acidalk" >
        </form>
    </body>
</html>

我想要实现的目标是，如果在第一个文本框中输入高于7.45的数字，单击该按钮，则将“Alkalosis”一词放在第二个文本框中，但如果数字小于7.35，相反，这个词是“酸中毒”。

非常感谢任何帮助

Answer 1

您的代码基础这将是一种方法：

<html>
<head>
    <script type="text/javascript">
        function calculate(){
            var ph = document.getElementById('ph').value;
            if(ph > 7.45){
                var str="Alkalosis";
            }else if(ph < 7.35){
                var str="Acidosis";
            } else{
                var str="Normal";
            }
            document.getElementById('acidalk').value =str;
        }
    </script>
</head>
<body>
    pH<input type="textbox" name="ph"><br>
    <button onclick="calculate()">Calculate</button>
    <input type="textbox" id="acidalk" >
</body>
</html>

希望有所帮助！

Answer 2

嗯，你大部分都在那里。不要让按钮成为提交按钮，请尝试

<input type="button" onclick="calculate();" value="Calculate" />

Answer 3

你有表格，你有这个功能，你只需要一种方法将它们绑在一起。通过将calculate()指定为表单submit事件的事件处理程序来完成此操作。请务必return false其他方式提交表单，并且不会看到calculate()的结果。

<form name="test" onsubmit="calculate(); return false">

jsfiddle.net/UhJG2

绑定到表单的submit事件而非按钮的click事件具有在按下 enter 时调用该函数的额外好处。它还确保表格不会被意外提交。

Answer 4

使用jQuery：

<html>
<head>
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
</head>

<body>pH
    <input type="textbox" name="ph" id="ph">
    <br>
    <button id="calculate">Calculate Acid Level</button>
    <br />
    <input type="textbox" id="acidalk" value="" />
</body>
<script type="text/javascript">
    $("#calculate").click(function () {
        var ph = $("#ph").val();
        if (ph > 7.45) str = "Alkalosis";
        else if (ph < 7.35) var str = "Acidosis";
        else var str = "Normal";

        $("#acidalk").val(str);
    });
</script>
</html>

Javascript根据输入值输出文本

4 个答案: