Upon script load, a random item from an array will be displayed and recorded in a separate array

Question

Upon script load, a random item from an array will be displayed and recorded in a separate array

I'm working on a fun code project where I aim to display random animal names in different colors that change when a specific keyboard key is pressed. The challenge I'm facing is that the first random animal name in a random color only appears after pressing either the "r" or "t" key, rather than showing up right at the beginning when the script starts running. I've attempted placing the initial display outside the event listener function but then encountered issues with saving the occurrence in the saveData array. I prefer not to add additional code just to save the first occurrence if possible. Here's a snippet of my code:

<!DOCTYPE html>
<html lang="en">
...

The desired output should look like this:

const showAnimal = () => {
    // Code for displaying random animals in colors
}

document.addEventListener('keydown', (event) => {
    // Event listener for changing animals on key press
});

showAnimal();

I need assistance in ensuring that a random name in a random color appears as soon as the script begins and is correctly saved in the saveData array along with subsequent occurrences triggered by keyboard inputs. Any suggestions on how to achieve this?

javascript html css

Answer 1

Answer №1

Hello there! 👋 I think I've come up with a possible solution for you to try out

To start, I suggest moving all of your code outside of the showAnimals function
Next, separate your code into different functions to improve readability
Eliminate any duplicate code that follows the same logic
Lastly, create a new function that incorporates your desired logic in an eventListener and call it when the page is loaded addAnimal(direction)


//Extracting code from showAnimal()
const animals = { dog: "yellow", cat: "black", fish: "blue", mouse: "gray" };
const colors = Object.keys(animals);
const name = Object.values(animals);

const numOfAnimals = 15;
let num = 0;

var saveData = [];

const displayAnimals = (
  randomText,
  randomColor
) => {
  if (num < numOfAnimals - 1) {
    document.getElementById("animals").innerText = `${randomColor}`;
    document.getElementById("animals").style.color = randomText;

    console.log(randomColor);
    console.log(randomText);
  } else {
    console.log(saveData);
  }
};

const selectRandomFeature = (name, colors) => {
  const randomTextIndex = Math.floor(Math.random() * name.length);
  const randomColorIndex = Math.floor(Math.random() * colors.length);

  var randomText = name[randomTextIndex];
  const randomColor = colors[randomColorIndex];

  return [randomText, randomColor, randomTextIndex, randomColorIndex];
};

const addAnimal = (direction) => {
  const [randomText, randomColor, randomTextIndex, randomColorIndex] =
    selectRandomFeature(name, colors);

  saveData.push({
    text: randomText,
    color: randomColor,
    direction: direction,
  });

  displayAnimals(randomText, randomColor, randomTextIndex, randomColorIndex);

  num++;
};

document.addEventListener("keydown", (event) => {
  if (event.key === "r" || event.key == "t") {
    const direction = event.key == "r" ? "left" : "right"; 
    addAnimal(direction);
  }
});

addAnimal("right");

Give this solution a go and see if it helps you out! 🧙‍♂️

Answer 2

Hello there! 👋 I think I've come up with a possible solution for you to try out

To start, I suggest moving all of your code outside of the showAnimals function
Next, separate your code into different functions to improve readability
Eliminate any duplicate code that follows the same logic
Lastly, create a new function that incorporates your desired logic in an eventListener and call it when the page is loaded addAnimal(direction)


//Extracting code from showAnimal()
const animals = { dog: "yellow", cat: "black", fish: "blue", mouse: "gray" };
const colors = Object.keys(animals);
const name = Object.values(animals);

const numOfAnimals = 15;
let num = 0;

var saveData = [];

const displayAnimals = (
  randomText,
  randomColor
) => {
  if (num < numOfAnimals - 1) {
    document.getElementById("animals").innerText = `${randomColor}`;
    document.getElementById("animals").style.color = randomText;

    console.log(randomColor);
    console.log(randomText);
  } else {
    console.log(saveData);
  }
};

const selectRandomFeature = (name, colors) => {
  const randomTextIndex = Math.floor(Math.random() * name.length);
  const randomColorIndex = Math.floor(Math.random() * colors.length);

  var randomText = name[randomTextIndex];
  const randomColor = colors[randomColorIndex];

  return [randomText, randomColor, randomTextIndex, randomColorIndex];
};

const addAnimal = (direction) => {
  const [randomText, randomColor, randomTextIndex, randomColorIndex] =
    selectRandomFeature(name, colors);

  saveData.push({
    text: randomText,
    color: randomColor,
    direction: direction,
  });

  displayAnimals(randomText, randomColor, randomTextIndex, randomColorIndex);

  num++;
};

document.addEventListener("keydown", (event) => {
  if (event.key === "r" || event.key == "t") {
    const direction = event.key == "r" ? "left" : "right"; 
    addAnimal(direction);
  }
});

addAnimal("right");

Give this solution a go and see if it helps you out! 🧙‍♂️

Answer 3

Answer №2

Due to the function being called only on the eventListener, it didn't load when the page initially loaded. By calling the function before the eventListener and storing the values in an array, the issue can be resolved. Moreover, there is a missing "t" at direction:right on line 49 of your code. Below is the updated code with these changes implemented. Kindly provide feedback.

 const displayAnimals = (randomText, randomColor, randomTextIndex , randomColorIndex) => {
        if (num < numOfAnimals - 1) {        
            document.getElementById("animals").innerText  = `${randomColor}`;   
            document.getElementById("animals").style.color = randomText;

            console.log(randomColor);
            console.log(randomText);
        } else {
            console.log(saveData)
        }
    }

    const [randomText, randomColor, randomTextIndex , randomColorIndex] = selectRandomFeature(name, colors);

    saveData.push({"text": randomText, "color": randomColor, "direction": randomColorIndex})
    // call function here so it shows when script loads
    displayAnimals(randomText, randomColor, randomTextIndex, randomColorIndex);

    document.addEventListener('keydown', (event) => {
        const [randomText, randomColor, randomTextIndex , randomColorIndex] = selectRandomFeature(name, colors);

        if (event.key === 'r') {            
            if (randomTextIndex == randomColorIndex) {
                saveData.push({"text": randomText, "color": randomColor, "direction":"left"})
            } else {
                saveData.push({"text": randomText, "color": randomColor, "direction":"left"})
            }          
            displayAnimals(randomText, randomColor, randomTextIndex , randomColorIndex);  
            num++;   
        } else if (event.key === 't') { 

            if (randomTextIndex == randomColorIndex) {
                saveData.push({"text": randomText, "color": randomColor, "direction":"right"})
            } else {
                saveData.push({"text": randomText, "color": randomColor, "direction":"right"})
            }   
            displayAnimals(randomText, randomColor, randomTextIndex , randomColorIndex);         
            num++;                        
        }        
    });
}  
showAnimal()

Answer 4

Due to the function being called only on the eventListener, it didn't load when the page initially loaded. By calling the function before the eventListener and storing the values in an array, the issue can be resolved. Moreover, there is a missing "t" at direction:right on line 49 of your code. Below is the updated code with these changes implemented. Kindly provide feedback.

 const displayAnimals = (randomText, randomColor, randomTextIndex , randomColorIndex) => {
        if (num < numOfAnimals - 1) {        
            document.getElementById("animals").innerText  = `${randomColor}`;   
            document.getElementById("animals").style.color = randomText;

            console.log(randomColor);
            console.log(randomText);
        } else {
            console.log(saveData)
        }
    }

    const [randomText, randomColor, randomTextIndex , randomColorIndex] = selectRandomFeature(name, colors);

    saveData.push({"text": randomText, "color": randomColor, "direction": randomColorIndex})
    // call function here so it shows when script loads
    displayAnimals(randomText, randomColor, randomTextIndex, randomColorIndex);

    document.addEventListener('keydown', (event) => {
        const [randomText, randomColor, randomTextIndex , randomColorIndex] = selectRandomFeature(name, colors);

        if (event.key === 'r') {            
            if (randomTextIndex == randomColorIndex) {
                saveData.push({"text": randomText, "color": randomColor, "direction":"left"})
            } else {
                saveData.push({"text": randomText, "color": randomColor, "direction":"left"})
            }          
            displayAnimals(randomText, randomColor, randomTextIndex , randomColorIndex);  
            num++;   
        } else if (event.key === 't') { 

            if (randomTextIndex == randomColorIndex) {
                saveData.push({"text": randomText, "color": randomColor, "direction":"right"})
            } else {
                saveData.push({"text": randomText, "color": randomColor, "direction":"right"})
            }   
            displayAnimals(randomText, randomColor, randomTextIndex , randomColorIndex);         
            num++;                        
        }        
    });
}  
showAnimal()

Upon script load, a random item from an array will be displayed and recorded in a separate array

Answer №1

Answer №2

Similar questions

Utilize the fetch function within a React functional component

Is it possible to modify the contents within the JSP div tag without replacing them through an AJAX call?

AngularJS static list with dynamically changing content

Creating full-width divs using BootstrapLearn how to easily create full-width div

If you're not utilizing v-model.lazy, Vue3 Cleave js may encounter functionality issues

The useEffect hook is triggering multiple unnecessary calls

Guidelines for setting up Kendo notifications using an angularjs service

Remove underlining from a Custom Link when hovering over it

Using Javascript libraries on a Chromebook: A comprehensive guide to getting started

Tips for executing Cross-Origin-Requests from Firebase Hosting to an AWS Lambda function

Is there a way to prevent users from selecting certain days in ion-datetime?

Effective way to manage Angular scope without resorting to $parent.$parent

Is there a more straightforward alternative method to retrieve the title attribute from an input within a table cell?

ng-view does not support ng-repeat rendering

Adaptive Style Sheets Strategy

Top strategies for avoiding element tampering

How come I am able to send back several elements in react without the need to enclose them in a fragment

"Firebase offers the flexibility to have several 'apps' configured, both on the client side and the server

Trouble with jQuery addClass function when trying to add to a specific object variable

Initiating, halting, and rejuvenating a timer in JavaScript