老师麻烦看下代码遇到个问题我写在代码注释里面了

<!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>
    <input type='text' id='num1' />
    <select id='operate'>
        <option value='+'>+</option>
        <option value="-">-</option>
        <option value="*">*</option>
        <option value="/">/</option>
    </select>
    <input type='text' id='num2' />
    <input type='button' value=' = ' id="btn" />
    <input type='text' id='result' />
    <script>
        //先取到每个节点
        var num1 = document.getElementById('num1');
        var select_s = document.getElementById('operate');
        var num2 = document.getElementById('num2');
        var btn = document.getElementById('btn');
        var result = document.getElementById('result');
        //定义了一个盒子sum来装计算结果
        var sum = 0;
        //监听事件来决定进行什么运算然后把结果装进sum
        select_s.onclick = function () {
            var ysf = select_s.value;
            switch (ysf) {
                case '+':
                    sum = Number(num1.value) + Number(num2.value);
                    console.log(sum);

                    break;
                case '-':
                    sum = num1.value - num2.value;
                    break;
                case '*':
                    sum = num1.value * num2.value;
                    break;
                case '/':
                    sum = num1.value / num2.value;
                    break;

                default:
                    break;
            }

        }
        //但是不知道为什么这sum值并没有变化，我是定义的全局变量sum啊，，，老师求解
        console.log(sum);
        btn.onclick = function () {

            result.innerHTML = sum;
        }
    </script>
</body>
</html>

咸鱼王派大星 2021-04-01

源自：DOM 4-14 项目作业

收起

2回答

好帮手慕言 2021-04-01 15:48:33

同学你好，解答如下：

1、事件只有触发时才会执行，sum是在点击+-*/时才会重新赋值，在打印sum值的时候，点击事件还未触发，所以打印的sum值是初始值，也就是0。

2、给表单赋值，需要使用value属性，因此修改如下：

3、两个输入框中都输入内容，例如数字5，点击等号，得到的结果是0，很显然，结果是不对的。

这是因为在同学提供的代码中，只有点击+-*/时才会对sum重新赋值，点击等号不会改变sum的值，建议：点击等号就可以得出结果，修改如下：

去掉如下代码（如果不去掉的话，按钮的第二个点击事件会覆盖第一个点击事件）：

祝学习愉快~

收起回答

qq_口天吴_0 2021-04-01 12:24:35

<!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>
    <input type='text' id='num1' />
    <select id='operate'>
        <option value='+'>+</option>
        <option value="-">-</option>
        <option value="*">*</option>
        <option value="/">/</option>
    </select>
    <input type='text' id='num2' />
    <input type='button' value=' = ' id="btn" />
    <input type='text' id='result' />
    <script>
        //先取到每个节点
        var num1 = document.getElementById('num1');
        var select_s = document.getElementById('operate');
        var num2 = document.getElementById('num2');
        var btn = document.getElementById('btn');
        var result = document.getElementById('result');
        //定义了一个盒子sum来装计算结果
        var sum = 0;
        //监听事件来决定进行什么运算然后把结果装进sum
        // 监听 "=" 按钮  btn  而不是监听选择按钮 + - * /  
        // select_s.onclick = function () {
        btn.onclick = function () {
            var ysf = select_s.value;
            switch (ysf) {
                case '+':
                    sum = Number(num1.value) + Number(num2.value);                   
                    console.log(sum);

                    break;
                case '-':
                    sum = num1.value - num2.value;
                    break;
                case '*':
                    sum = num1.value * num2.value;
                    break;
                case '/':
                    sum = num1.value / num2.value;
                    break;

                default:
                    break;
            }           
            //代码要移动到这里
            result.value = sum;
        }
        //但是不知道为什么这sum值并没有变化，我是定义的全局变量sum啊，，，老师求解
        console.log(sum);
        // btn.onclick = function () {

        //     // result.innerHTML = sum;
        //     //  计算结果sum 是要变成 result的值(value).而不是变成代码
        //     // 而且要在一次监听里面完成计算,  如果分开代码应该是覆盖了,重写了.
        //     result.value = sum;
        // }
    </script>
</body>

</html>

首先,我也是自学的,不是老师.解释不一定正确.但是代码已经实现功能了.

其次你这个代码的逻辑也太乱了,我记得回答里面还是笔记里面有一个标准答案,我也是参考那个的.我一开始写的稍微比较乱,但没你这么乱.我记得我有发布在笔记里面

收起回答

提问者咸鱼王派大星 #1

怎么写对我知道，只是想不通我定义的全局变量sum,经过了第一个onclick事件后在外面控制台打印sum还是为零。

2021-04-01 14:23:25
qq_口天吴_0 回复提问者咸鱼王派大星 #2
你监听的是 + - * / 的按钮啊
```
select_s.onclick
```
你要是选择点击select_s的按钮,控制台就会出现sum值啊.
你是不是点错了.
我在代码中也备注了
2021-04-01 14:47:08
提问者咸鱼王派大星回复 qq_口天吴_0 #3

你还没懂我意思我的源代码是监听+ - * / 当我点了这其中一个就吧前后两个数字进行计算然后赋值给sum,我现在的疑问是为什么全局变量sum没有发生变化

2021-04-01 15:20:41