时间戳

首页 > 解决方案 > 按钮在与默认选项卡不同的选项卡中不起作用

javascript - 按钮在与默认选项卡不同的选项卡中不起作用

问题描述

我在我的页面上制作了一些标签，但除非它们位于主页标签上，否则按钮不起作用。此外，我放置在事件侦听器下方的所有 js 代码都无法正常工作，该事件侦听器连接到与默认选项卡不同的选项卡中的按钮。

https://github.com/Vritta531/Vritta

我真的不知道这个问题是否与我编写标签的方式或其他方式有关。我还是个初学者。我将不胜感激任何帮助。

标签： javascripthtml

解决方案

只需将您的<script>标签移动到结束前的右下角<body>。

如果您运行代码并检查浏览器控制台，它会显示：

“ game.js:116 Uncaught TypeError: Cannot read property 'addEventListener' of null at game.js:116 ”

原因：因为您将<script>标签放在按钮之前id="uppickaxe"。由于您的脚本标记出现在元素存在之前，因此它返回为undefined/null。

...
<!-- INITIALLY HERE
<script src="game.js"></script>
 -->
  
<div id="Shop" class="tabcontent">
    <h3>Shop</h3>
    <button id="uppickaxe">Pickaxe || 1000 Wood</button>
</div>

<div id="Settings" class="tabcontent">
    <h3>Settings</h3>
    <h3>Work in progress...</h3>
</div>

<!-- MOVE JS HERE -->
<script src="game.js"></script>

</body>
</html>

推荐阅读