jquery警报框简单计算

时间:2015-03-16 13:45:17

标签: javascript jquery jquery-ui javascript-events

我想使用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>

2 个答案:

答案 0 :(得分:2)

你走了:

    

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

答案 1 :(得分:1)

如果您特别关注使用段落元素,则无法通过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>

希望这有帮助