第五次修改和第六次修改听的就不太明白了。。。

方法一

<!DOCTYPE html>
<html>
<head>
    <title> 事件</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=' = ' onclick="count()" />
    <input type='text' id='result'/>
    <script type="text/javascript">
        function count() {
            /*此处写代码*/
            var all = {
                frist:document.querySelector('#num1'),
                second:document.querySelector('#num2'),
                last:document.querySelector('#result'),
                operate:document.querySelector('#operate')
            }
             
            if(isNaN(all.frist.value) || isNaN(all.second.value)){
                alert('请输入数字');
                throw new Error('不是数字');
            }
            switch(all.operate.value){
                case '+':
                    return all.last.value = +all.frist.value + +all.second.value;break;
                case '-':
                    return all.last.value = all.frist.value - all.second.value;break;
                case '*':
                    return all.last.value = all.frist.value * all.second.value;break;
                case '/':
                    return all.last.value = all.frist.value / all.second.value;break;
            }
        }
    </script>
</body>
</html>

方法二

<!DOCTYPE html>
<html>
<head>
    <title> 事件</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=' = ' onclick="count()" />
    <input type='text' id='result'/>
    <script type="text/javascript">
        function count() {
            /*此处写代码*/
            var all = {
                frist:document.querySelector('#num1'),
                second:document.querySelector('#num2'),
                last:document.querySelector('#result'),
                operate:document.querySelector('#operate')
            }
             
            var operation = {
                add:function(num1,num2){
                    return +num1 + +num2;
                },
                subtract:function(num1,num2){
                    return num1 - num2;
                },
                multiply:function(num1,num2){
                    return num1 * num2;
                },
                divide:function(num1,num2){
                    return num1 / num2;
                }
            }
 
            function outputResult(result){
                all.last.value = result;
            }
 
            if(isNaN(all.frist.value) || isNaN(all.second.value)){
                alert('请输入数字');
                throw new Error('输入的不是数字');
            }
             
            switch(operate.value){
                case '+':
                outputResult(operation.add(all.frist.value,all.second.value));break;
                case '-':
                outputResult(operation.subtract(all.frist.value,all.second.value));break;
                case '*':
                outputResult(operation.multiply(all.frist.value,all.second.value));break;
                case '/':
                outputResult(operation.divide(all.frist.value,all.second.value));break;
            }
        }
    </script>
</body>
</html>

老师第五次修改和第六次修改真听不明白了，这两种方法可以吗，感觉越老越绕

宝慕林3013065 2020-06-05

源自：项目：JS实现简易计算器案例 4-8 编程练习

收起

2回答

好帮手慕慕子回答被采纳获得+3积分 2020-06-05 15:43:05

同学你好，对于你的问题解答如下：

老师进行多次修改，主要是在原来的基础上进行封装，目的是为了将功能相似的代码封装成函数，方便后期调用，这里的项目比较小，同学可能体会不到这么做的好处，可以先跟着老师学习封装的思想，培养编码习惯。
后面的组件化项目中，也会继续采用这种封装的思想去实现效果，到时候同学会更加清晰直观的感受到封装的好处了。
因为这样的写法并不存在语法错误，只不过是最后计算的结果不对而已，不会出现报错的

如果我的回答帮助到了你，欢迎采纳，祝学习愉快~

收起回答