基于输入值的Javascript输出文本答案

【问题标题】：Javascript output text based on input value基于输入值的Javascript输出文本
【发布时间】：2012-12-13 00:53:28
【问题描述】：

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

<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 的数字放入第一个文本框中，单击按钮，然后将“碱中毒”一词放入第二个文本框中，但如果数字小于 7.35，则改为“Acidosis”。

任何帮助将不胜感激

【问题讨论】：

您是否考虑过将 jQuery 添加到您的 HTML 文档中？这样做会使这样的事情变得更加简单。
我在添加 jQuery 方面没有任何问题，尽管我对它的经验很少，也不知道如何编写我正在尝试的函数。
@hellohellosharp - 我不明白 jQuery 怎么可能让这更简单。 i.stack.imgur.com/ssRUr.gif。另外：meta.stackexchange.com/questions/45176/…
@aj12 - 检查我的答案以获得快速的 jQuery 示例。
@gilly3 - 我明白你对 jQUery 的看法，但仍然：检索和更新表单值显然更简单。

标签： javascript forms if-statement input textbox

【解决方案1】：

嗯，你已经完成了大部分任务。不要让按钮成为提交按钮，而是尝试

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

【讨论】：

丢失javascript: 前缀。应该只是onclick="calculate()"。
谢谢，正是我所希望的。也很近！
主要是语义，但很好。只是多年前的旧习惯。

【解决方案2】：

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

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

希望有所帮助！

【讨论】：

【解决方案3】：

你有形式，你有功能，你只需要一种方法将它们联系在一起。通过将calculate() 分配为表单的submit 事件的事件处理程序来实现。确保return false 否则表单将被提交，calculate() 的结果将不会被看到。

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

jsfiddle.net/UhJG2

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

【讨论】：

【解决方案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>

【讨论】：