Javascript，程序没有通过按钮点击进入功能

Posted 2023-04-13

【中文标题】Javascript，程序没有通过按钮点击进入功能

【英文标题】：Javascript, program not entering function with button clicks

【发布时间】：2017-10-08 16:55:36

【问题描述】：

我的代码中的 startGame 函数有问题，正在寻求帮助。最初，我有一些像这样的 html 代码：

`

<div id="startScreen">
        <h1>Spell and Blade</h1>
        <button id="startButton">Start</button>
        <!-- Pop-up window -->
        <div id="popUpWindow" class="popUpWindow">
            <!-- Pop-up window content -->
            <div class="popUpWindow-content">
                <span class="close">&times;</span>
                <p>
                    Please select a character type that best fits your play style.
                    The character type you choose will be the character you control!
                </p>
                <div id="characterButtons">
                    <button class="tank" onclick="startGame(1)">Tank</button>
                    <button class="wizard" onclick="startGame(2)">Wizard</button>
                    <button class="elf" onclick="startGame(3)">Elf</button>
                </div>
            </div>
        </div>

`

^^此代码嵌入在正文标签中，脚本标签位于按钮处。这是 HTML 页面的主要内容。 当用户单击任何字符按钮时，在我的 javascript 中调用此函数将其标记为未定义。

Javascript，Canvas.js 文件名：

`function startGame(characterType)
         //Code that starts the game.
  `

我尝试过的其他解决方案位于另一个名为 ButtonProperties.js 的文件中：

    characterButtons.onclick = function () 
        console.log("Here in characterButton function");
        var characterType = 0;
        var tankButton = document.getElementsByClassName("tank");
        var wizardButton = document.getElementsByClassName("wizard");
        var elfButton = document.getElementsByClassName("elf");

        if (tankButton.onclick) 
            console.log("Here in tankButton if statement");
            characterType = 1;
            startGame(characterType);
        
        if (wizardButton.onclick) 
            characterType = 2;
            startGame(characterType);
        
    if (elfButton.onclick) 
        characterType = 3;
        startGame(characterType);
    `enter code here`

上面的文件也有与弹出窗口相关的代码，但我不认为这是问题所在，也 var characterButtons = document.getElementById("characterButtons");位于文件顶部附近，只是上面没有列出。

我不知道为什么没有调用该函数。 console.log 函数计算一个字符按钮被点击的次数，但程序不会进入任何 if 语句。非常感谢任何人提供的任何帮助！

【参考方案1】：

您正在使用返回数组的 getElementsByClassName，因此您的按钮 tankBut​​ton、wizardButton 等是数组。我建议您更改代码，如下所示

<div id="characterButtons">
                    <button id="tank" onclick="startGame(1)">Tank</button>
                    <button id="wizard" onclick="startGame(2)">Wizard</button>
                    <button id="elf" onclick="startGame(3)">Elf</button>
                </div>

并使用

var tankButton = document.getElementById("tank");
        var wizardButton = document.getElementById("wizard");
        var elfButton = document.getElementById("elf");

那么它应该可以工作。这在性能方面也更好。

【讨论】：

工作就像一个魅力！谢谢你的帮助！！