函数的调用方式

最新推荐文章于 2024-04-11 17:57:58 发布

超级小丑_Supclown

最新推荐文章于 2024-04-11 17:57:58 发布

阅读量324

点赞数

文章标签： html javascript 前端

本文链接：https://blog.youkuaiyun.com/m0_57860459/article/details/122256482

版权

本文探讨了两种函数调用方式：手动调用和通过事件绑定触发函数执行。并通过实例展示了如何编写一个计算50到500相加结果的函数，并将其显示在网页上。此外，还提出了一个需求，即输入两个加数，通过事件绑定计算它们的和，并将结果显示在页面上，以此锻炼前端开发中的交互实现能力。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

(1) 手动调用

(2) 绑定一个事件来触发函数的运行

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width='device-width', initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <button onclick="say()">按钮</button>
 
  <script>
    function say(){
      console.log('哈哈哈哈哈');
    }
    // 调用函数
    say();
  </script>
</body>
</html>

// 练习

1.写一个函数,实现50 到 500 相加, 并输出到网页上

<script>
    function sum() {
      var total = 0;
      for(var i=50;i<=500;i++) {
        total += i;
      }
      document.write(total);
    }
    sum();
  </script>

2.需求: 从页面上输入两个加数,绑定事件,计算两个加数相加的结果,并显示在页面上

<!DOCTYPE html>
<html lang="en"> 
<body>
  <input class="num"> + <input class="num"> 
  <button onclick="add()">=</button> 
  <span id="sum">?</span>
  <script>
     function add() {
       // 获取两个input元素对象
       var $inputs = document.querySelectorAll('.num');
      // 获取第一个input的值
       var num1 = $inputs[0].value; 
      // 获取第二个input的值
       var num2 = $inputs[1].value; 
      // 两个加数相加,赋值给sum
       var sum = num1*1 + num2*1;
       var $sum = document.querySelector('#sum');
       $sum.innerHTML = sum;
     }
  </script>
</body>
</html>

// 代码调试例子
<body>
    <input class="num" type="text">+<input class="num" type="text"><button onclick="sum()">=</button>
    <span id="app">?</span>
    <script>
        function sum(){
            var $num = document.querySelectorAll('.num');
            var $num1 = $num[0].value;
            var $num2 = $num[1].value;
            var $app = document.querySelector('#app');
            $app.innerTxet= $num1*1+ $num2*1;
            console.log($app)
        }
    </script>
</body>