VS Code中console.log无输出且calc()未定义问题排查

嘿，我一眼就瞅到问题的核心啦！你的代码在VS Code里跑不起来，主要是因为一个超容易疏忽的拼写错误。

第一步：修复致命的拼写错误 #

你HTML里的script标签属性写错了——把src写成了scr！浏览器根本识别不了这个错误属性，自然没法加载你的app.js文件，导致点击按钮时找不到calc()函数。

把这段代码：

<script scr="app.js"></script>

改成：

<script src="app.js"></script>

验证修复效果 #

改完之后，确保app.js和index.html放在同一个文件夹下，再用Live Server打开页面，点击计算按钮，控制台应该就能正常输出计算结果了。

额外的优化建议（可选） #

为了让代码更健壮、更易维护，还可以做这些调整：

• 替换内联事件绑定：把按钮上的onclick="calc()"去掉，换成在JS里用事件监听，代码结构会更清晰：

  // 在app.js的末尾添加这段代码
  document.querySelector('button[type="button"]').addEventListener('click', calc);
  

• 处理异常输入：当前代码如果用户输入非数字，或者做除法时除数为0，会出现异常结果，可以加个判断逻辑：

  function calc() {
    var a = parseInt(document.querySelector('#value1').value);
    var b = parseInt(document.querySelector('#value2').value);
    
    // 检查输入是否为有效数字
    if (isNaN(a) || isNaN(b)) {
      console.log("请输入有效的数字哦！");
      return;
    }
    
    var op = document.querySelector('#operator').value;
    var calculate;
    
    if (op == 'add') {
      calculate = a + b;
    } else if (op == 'min') {
      calculate = a - b;
    } else if (op == 'div') {
      // 处理除数为0的情况
      if (b === 0) {
        console.log("除数不能为0呀！");
        return;
      }
      calculate = a / b;
    } else if (op == 'mul') {
      calculate = a * b;
    }
    console.log(calculate);
  }
  

内容的提问来源于stack exchange，提问作者Anon2945