jquery alert box 简单计算答案

【问题标题】：jquery alert box simple calculationjquery alert box 简单计算
【发布时间】：2015-03-16 13:45:16
【问题描述】：

我想用js和jquery做简单的计算。关于字段中的值，alertbox 应该显示计算。这是我的代码：

<!DOCTYPE html> 
<html> 
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    </head >
    <body>

        <p id="demo"></p>

        <script>
            $(document).ready(function(){
                $("#btn1").click(function(){
                    alert("Solution: " + $("#demo").val());
                });
            });

            function myFunction(a, b) {
                var a;
                var b;
                return a * b;
            }

            document.getElementById("demo").innerHTML = myFunction(a, b);
        </script>

        <input id="a" type="text" value="10" />
        <input id="b" type="text" value="5" />
        <button id="btn1">Result</button>
    </body>
</html>

【问题讨论】：

$("#demo").val() 此代码将返回空结果，因为<p> 不是表单元素。更改为$("#demo").html() 或$("#demo").text()
谢谢你，但它不起作用，我收到警告框和文本“解决方案：”没有计算
为什么要在myFunction 中创建var a; var b;？ a 和 b 已在函数签名中声明

标签： javascript jquery jquery-ui javascript-events

【解决方案1】：

给你：

<script>
    $(document).ready(function(){

        //Grab Values
        $('#demo').val(myFunction($('#a').val(), $('#b').val()));

        $("#btn1").click(function(){
           alert("Solution: " + $("#demo").val());
        });
    });
    function myFunction(a, b) {
        return a * b;
    }
</script> 

<input id = "a" type = "text" value = "10" /> 
<input id = "b" type = "text" value = "5" /> <button id = "btn1"> Result </button>

【讨论】：

你明白了！没问题！
你能告诉我......在你获取值的部分，你把变量a和b放在#demo中吗？这就是为什么以这种方式在警报中调用它？
那里的第一行从输入中获取值，然后调用函数对其进行处理，最后将 demo 的值设置为函数的返回值。然后当你点击按钮时，它会抓取 demo 的值，并提醒它。

【解决方案2】：

以防万一您特别关注使用段落元素，您不能通过 Id 访问段落元素，而是通过标签名称访问。您的代码可以修改为这样以实现结果：

<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
  alert("Solution: " + document.getElementsByTagName('p')[0].innerHTML);
});

  document.getElementsByTagName('p')[0].innerHTML = myFunction($('#a').val(), $('#b').val());
});
function myFunction(a, b) {
var a;
var b;
return a * b;
}

</script >
</head>
<body>

  <p id='demo'></p>
  <input type='text' value='10' id='a'>
  <input type='text' value='5' id='b'>
  <button id='btn1'>Result</button>
</body>

希望对你有帮助

【讨论】：