Question

我正在做一些独立的JavaScript学习，我正在试图弄清楚如何将参数从HTML传递到JavaScript，然后在完成逻辑之后从JavaScript输出HTML。

在这个例子中，我有两个输入文本框和一个按钮。理想情况下，文本框中会包含数字，按钮将调用JavaScript。 JavaScript只是比较哪个数字大于另一个，然后将结果输出到id为“output”的<p>元素。代码如下......

   <html>
    <body>
        <script type="text/javascript">
            var htmlop = "";
            function compareX(a,b){
                if(a < b){
                    htmlop= a+"is greater than "+b;
                }
                else{
                    htmlop= b+"is greater than "+a;
                }
                document.getElementById('output').innerHTML = htmlop;
            }
        </script>
        <div>
            Input1: <input type="text" name="input1" /></br>
            Input2: <input type="text" name="input2" />
        </div>
        <div>
            <input type="button" value="Run Logic" onclick="compareX(document.getElementByName("input1").value,document.getElementByName("input2").value)" />
        </div></br></br>
        <div>
            <p id="output"></p>
        </div>
    </body>
</html>

我在这里没有得到任何类型的输出，但我不知道是否要将HTML中的值正确地传递给JavaScript。有人可以在这里提供帮助吗？

Answer 1

   <html>
    <body>
        <script type="text/javascript">
            var htmlop = "";
            function compareX(){
                var a=document.getElementsByName('input1')[0].value;
                var b=document.getElementsByName("input2")[0].value;

                if(a < b){
                    htmlop= a+" is greater than "+b;
                }
                else{
                    htmlop= b+" is greater than "+a;
                }

                document.getElementById('output').innerHTML = htmlop;
            }
        </script>
        <div>
            Input1: <input type="text" name="input1" /></br>
            Input2: <input type="text" name="input2" />
        </div>
        <div>
            <input type="button" value="Run Logic" onclick="compareX()" />
        </div></br></br>
        <div>
            <p id="output"></p>
        </div>
    </body>
</html>

Answer 2

在这里尝试这个你有另一个问题，在你的代码中你比较a和b并假设它们是整数但实际上它们是字符串所以你将无法得到你想要的结果。尝试更改为您的JavaScript代码。

<html>
<body>
    <script type="text/javascript">
        var htmlop = "";
        function compareX(a,b){
            if(parseInt(a) < parseInt(b)){
                htmlop= a+"is greater than "+b;
            }
            else{
                htmlop= b+"is greater than "+a;
            }
            document.getElementById('output').innerHTML = htmlop;
        }
    </script>
    <div>
        Input1: <input type="text" name="input1" /></br>
        Input2: <input type="text" name="input2" />
    </div>
    <div>
        <input type="button" value="Run Logic" onclick="compareX(document.getElementsByName("input1")[0].value, document.getElementsByName("input2")[0].value)" />
    </div></br></br>
    <div>
        <p id="output"></p>
    </div>
</body>

Answer 3

重新发布代码如果您想使用名称而不是ID，请使用上面的代码修改函数调用。

<!DOCTYPE html>
<html>
<body>
<script type="text/javascript">
    var htmlop = "";

    function compareX(a,b){

        if(parseInt(a) < parseInt(b)){
            htmlop= a+"is greater than "+b;
        }
        else{
            htmlop= b+"is greater than "+a;
        }
        document.getElementById('output').innerHTML = htmlop;
    }
</script>
<div>
    Input1: <input type="text" id="input1" name="input1"></br>
    Input2: <input type="text" id="input2" name="input2">
</div>
<div>
    <input type="button" value="Run Logic" onclick='compareX(document.getElementById("input1").value,document.getElementById("input2").value )' />
</div></br></br>
<div>
    <p id="output"></p>
</div>

将HTML输入值传递给javascript函数，然后将JS结果输出到<p> HTML </p>

3 个答案: