jquery警报框简单计算

jquery alert box simple calculation

本文关键字:简单 计算 jquery      更新时间:2023-09-26

我想用js和jQuery进行简单的计算。 关于字段中的值,警报框应显示计算。这是我的代码:

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

你去吧:

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

以防万一您对使用段落元素特别感兴趣,您不能通过 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>

希望这有帮助