CODEWITHSUNDEEP
javascripthtmlarraysarraylist
Marc R Design
Marc R Design

Reputation: 9

Javascript - Trying to randomly pick from an array and populate inner HTML based off what was picked - Not working

Here is my Javascript code:

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";
    };

My HTML is basically this:

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

I want the name "Enemy Pokemon" to be replaced with the correct name dependent of what Pokemon is randomly picked from the list of 3 but I can't seem to get the inner HTML to change.

Can someone tell me what I'm doing wrong?

Upvotes: 0

Views: 71

Answers (4)

Aaron Plocharczyk
Aaron Plocharczyk

Reputation: 2832

Here's a solution that uses randojs.com to make randomness a bit more readable:

var enemyPokemon = ["Charmander", "Bulbasaur", "Squirtle"];
document.querySelector(".enemy-pokemon-name").innerHTML = rando(enemyPokemon).value;
<script src="https://randojs.com/1.0.0.js"></script>
<div class="enemy-pokemon-name">Enemy Pokemon</div>

Upvotes: 0

AndrewL64
AndrewL64

Reputation: 16301

Assuming you want to use class name instead of an id and only have one html element with the class name enemy-pokemon-name, you can just use the querySelector() method to target the div and since your result and the array element text content is the same, you can directly render the result on the div like this:

var enemyPokemon = ["Charmander", "Bulbasaur", "Squirtle"];
var playerPokemon = ["Charmander", "Bulbasaur", "Squirtle"];
document.querySelector(".enemy-pokemon-name").innerHTML = enemyPokemon[Math.floor(Math.random()*enemyPokemon.length)];

The same above code could be used if you changed your class name to an id too by simply targeting #enemy-pokemon-name instead of .enemy-pokemon-name in the querySelector.

Check and run the following Code Snippet or open this JSFiddle link for a practical example of the above code:

var enemyPokemon = ["Charmander", "Bulbasaur", "Squirtle"];
var playerPokemon = ["Charmander", "Bulbasaur", "Squirtle"];
document.querySelector(".enemy-pokemon-name").innerHTML = enemyPokemon[Math.floor(Math.random() * enemyPokemon.length)];
<div class="enemy-pokemon-name">Enemy Pokemon</div>

Upvotes: 2

Suzette Buxmann
Suzette Buxmann

Reputation: 133

Change the class to ID on the div:

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

and your JS will be like this:

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

As Emiel said though, it would be more efficient to add a var like this:

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

and then use it like this:

enemyElement.innerHTML = "Charmander";

Upvotes: 2

Suzette Buxmann
Suzette Buxmann

Reputation: 133

Change the class to ID and use getElementByID, or use the querySelector:

if (enemyChosenPokemon == "Charmander"){
        document.querySelector(".enemy-pokemon-name").innerHTML = "Charmander";
    } else if (enemyChosenPokemon == "Bulbasaur"){
        document.querySelector(".enemy-pokemon-name").innerHTML = "Bulbasaur";
    } else if (enemyChosenPokemon == "Squirtle"){
        document.querySelector(".enemy-pokemon-name").innerHTML = "Squirtle";
    };

Upvotes: 1

Related Questions