How to display random text everytime when page loads?-CodePudding

I tried to create a function to display random text when page loads every time. Code works, but how to make one function for "parrotFact", "lionFact" and "rabbitFact"?

As all have the same functionality, how to club the 3 functions into one?

I'm sharing the code below:

<div id="parrotFact"></div>
<div id="lionFact"></div>
<div id="rabbitFact"></div>

// JS for parrotFact

function displayRandomMessage() {
            var parrotFact = [
                "Parrots can talk.",
                "Parrots love sunflower seeds.",
                "Parrots can make your day."
            ];

            var randomIndex = Math.floor(Math.random() * parrotFact.length);
            var randomMessage = parrotFact [randomIndex];

            var messageElement = document.getElementById("parrotFact");
            messageElement.innerHTML = randomMessage;
        }

        // Call the function when the page loads
        window.onload = displayRandomMessage;

// JS for lionFact

function displayRandomMessage() {
            var lionFact = [
                "Lion can't talk.",
                "Lion is a part of cat family.",
                "Lion is the King of the Jungle."
            ];

            var randomIndex = Math.floor(Math.random() * lionFact.length);
            var randomMessage = lionFact [randomIndex];

            var messageElement = document.getElementById("lionFact");
            messageElement.innerHTML = randomMessage;
        }

        // Call the function when the page loads
        window.onload = displayRandomMessage;

// JS for rabbitFact

function displayRandomMessage() {
            var rabbitFact = [
                "Rabbit can't talk.",
                "Rabbits are cute.",
                "Rabbits are small."
            ];

            var randomIndex = Math.floor(Math.random() * lionFact.length);
            var randomMessage = rabbitFact [randomIndex];

            var messageElement = document.getElementById("rabbitFact");
            messageElement.innerHTML = randomMessage;
        }

        // Call the function when the page loads
        window.onload = displayRandomMessage;

CodePudding user response：

If you're planning on having a separate HTML elements for each fact type, then you could do it like this:

const allFacts = {
  "parrot": [
    "Parrots can talk.",
    "Parrots love sunflower seeds.",
    "Parrots can make your day."
  ],
  "lion": [
    "Lion can't talk.",
    "Lion is a part of cat family.",
    "Lion is the King of the Jungle."
  ],
  "rabbit": [
    "Rabbit can't talk.",
    "Rabbits are cute.",
    "Rabbits are small."
  ]
}

function displayRandomMessage(animalType) {
  var facts = allFacts[animalType]
  var randomIndex = Math.floor(Math.random() * facts.length);
  var randomMessage = facts[randomIndex];
  var messageElement = document.getElementById(animalType   "Fact");
  messageElement.innerHTML = randomMessage;
}

displayRandomMessage("lion")

Combine your array into an object and you can pass to the function the animal type you would like a random fact about to see.

However, if you would like a fact for every animal type at once, then you could iterate over the object like this instead:

const allFacts = {
  "parrot": [
    "Parrots can talk.",
    "Parrots love sunflower seeds.",
    "Parrots can make your day."
  ],
  "lion": [
    "Lion can't talk.",
    "Lion is a part of cat family.",
    "Lion is the King of the Jungle."
  ],
  "rabbit": [
    "Rabbit can't talk.",
    "Rabbits are cute.",
    "Rabbits are small."
  ]
}

function displayRandomMessages() {
  for (var animalType in allFacts) {
    var facts = allFacts[animalType]
    var randomIndex = Math.floor(Math.random() * facts.length);
    var randomMessage = facts[randomIndex];
    var messageElement = document.getElementById(animalType   "Fact");
    messageElement.innerHTML = randomMessage;
  }
}

displayRandomMessages()

CodePudding user response：

Considering you want to combine all on page with single <div>

function displayRandomMessage() {
  var factData = [
    "Parrots can talk.",
    "Parrots love sunflower seeds.",
    "Parrots can make your day.",
    "Lion can't talk.",
    "Lion is a part of cat family.",
    "Lion is the King of the Jungle.",
    "Rabbit can't talk.",
    "Rabbits are cute.",
    "Rabbits are small."
  ];

  var randomIndex = Math.floor(Math.random() * factData.length);
  var randomMessage = factData[randomIndex];

  var messageElement = document.getElementById("factData");
  messageElement.innerHTML = randomMessage;
}

// Call the function when the page loads
window.onload = displayRandomMessage;

<div id="factData"></div>

Considering you want to combine all on page with multiple <div>

function randomizeFact(factData, factId) {
  var randomIndex = Math.floor(Math.random() * factData.length);
  var randomMessage = factData[randomIndex];

  var messageElement = document.getElementById(factId);
  messageElement.innerHTML = randomMessage;
}

function displayRandomMessage() {
  var parrotFact = [
    "Parrots can talk.",
    "Parrots love sunflower seeds.",
    "Parrots can make your day."
  ];

  var lionFact = [
    "Lion can't talk.",
    "Lion is a part of cat family.",
    "Lion is the King of the Jungle."
  ];

  var rabbitFact = [
    "Rabbit can't talk.",
    "Rabbits are cute.",
    "Rabbits are small."
  ];

  randomizeFact(parrotFact, "parrotFact");
  randomizeFact(lionFact, "lionFact");
  randomizeFact(rabbitFact, "rabbitFact");
}

// Call the function when the page loads
window.onload = displayRandomMessage;

<div id="parrotFact"></div>
<div id="lionFact"></div>
<div id="rabbitFact"></div>