Javascript - 尝试从数组中随机选择并根据选择的内容填充内部 HTML - 不起作用

Question

这是我的 JavaScript 代码:

var enemyPokemon = ["Charmander", "Bulbasaur", "Squirtle"];
var playerPokemon = ["Charmander", "Bulbasaur", "Squirtle"];

// Randomly pick Pokemon from Enemy Pokemon List

var enemyChosenPokemon = 
enemyPokemon[Math.floor(Math.random()*enemyPokemon.length)];

console.log(enemyChosenPokemon);

// Populate Enemy Information with computer picked Pokemon

// Set Enemy Pokemon Name
    if (enemyChosenPokemon == "Charmander"){
        document.getElementsByClassName("enemy-pokemon-name").innerHTML = "Charmander";
    } else if (enemyChosenPokemon == "Bulbasaur"){
        document.getElementsByClassName("enemy-pokemon-name").innerHTML = "Bulbasaur";
    } else if (enemyChosenPokemon == "Squirtle"){
        document.getElementsByClassName("enemy-pokemon-name").innerHTML = "Squirtle";
    };

我的 HTML 基本上是这样的:

<div class="enemy-pokemon-name">Enemy Pokemon</div>

我希望将名称“Enemy Pokemon”替换为正确的名称，具体取决于从 3 个列表中随机挑选的 Pokemon，但我似乎无法更改内部 HTML。

有人可以告诉我我做错了什么吗？

Answer 1

将类更改为 div 上的 ID:

<div id="enemy-pokemon-name">Enemy Pokemon</div>

你的 JS 将是这样的:

document.getElementById("enemy-pokemon-name").innerHTML = "Charmander";

正如 Emiel 所说，添加这样的 var 会更有效:

var enemyElement = document.getElementById("enemy-pokemon-name");

然后像这样使用它:

enemyElement.innerHTML = "Charmander";