点击按钮触发onclick函数后所有HTML元素消失的问题求助

核心问题分析 #

• 函数名冲突：自定义的open()函数和浏览器内置的window.open()方法重名，点击按钮时触发内置方法，导致页面出现元素消失的异常表现。
• HTML结构不规范：按钮元素放在<html>标签下但不在<body>内部，浏览器渲染时会产生不可预期的问题。
• 变量未声明：itms和itm未使用let/const/var声明，成为全局变量，容易引发意外冲突。

修复后的完整代码 #

<!DOCTYPE html>
<html>
<head>
</head>
<body>
  <button id="someid" onclick="openBoosterPack()">Open A Booster Pack</button>
  <button id="somid" onclick="viewGarage()">View Garage</button>
  <p id="demo"></p>

  <script>
    let collectedCar;

    function openBoosterPack(){
      const cars = ['2014 Nissan 350z', '2019 VW golf GTI ', '1995 Mazda 323 Protoge', '1990 BMW 8-series', '1990 ford mustang svt cobra', '1990 mazda rx7', '1990 nissan skyline gt-r'];
      collectedCar = cars[Math.floor(Math.random()*cars.length)];
      console.log(collectedCar);
    }

    function viewGarage(){
      const demoElement = document.getElementById("demo");
      demoElement.innerHTML = collectedCar ? collectedCar : "You haven't opened any booster packs yet!";
    }
  </script>
</body>
</html>

关键修复点说明 #

• 重命名函数：将open()改为openBoosterPack()，view()改为viewGarage()，彻底避免和浏览器内置API的命名冲突。
• 修正DOM结构：把所有交互元素（按钮）和内容容器都移入<body>标签内，符合HTML标准规范。
• 规范变量声明：用let声明存储收集车辆的变量，const声明车辆数组，明确变量作用域，避免全局污染。
• 增加边界处理：在查看车库的函数中添加判断，当用户还未打开卡包时给出提示，避免出现未定义内容的报错。

内容的提问来源于stack exchange，提问作者Foxtrot -14