Question

0

162

Views

Randomize loaded content

I want to make a website that shows different content every time the side gets reloaded. The content contains an image and an audio I´ve found an script that randomizes my images after every reload but it plays all the sounds at the same time. I think I have to use an other tag than "ID" but since I am an absolute beginner I didn´t found the right one yet. Thanks in advace!

<!DOCTYPE html
<html>
<head>
    <title>johannes</title>
    <script language="javascript" type="text/javascript" src="random.js"></script>
</head>

<body>

    <div id="spaghetti">

    <img src="/Users/henrigimm/Documents/Johannes test/Illu Johannes/spaghetti.png">

    <audio autoplay>
      <source src="/Users/henrigimm/Documents/Johannes test/spaghetti.mp3" type="audio/mpeg">
      Your browser does not support the audio element.
    </audio>

    </div>

    <div id="bier">

        <img src="/Users/henrigimm/Documents/Johannes test/Illu Johannes/bier.png">

    <audio autoplay>
      <source src="/Users/henrigimm/Documents/Johannes test/bier.mp3" type="audio/mpeg">
      Your browser does not support the audio element.
    </audio>

    </div>

    <div id="zelt">

    <img src="/Users/henrigimm/Documents/Johannes test/Illu Johannes/zelt.png">

    <audio autoplay>
      <source src="/Users/henrigimm/Documents/Johannes test/zelt.mp3" type="audio/mpeg">
      Your browser does not support the audio element.
    </audio>

    </div>
</body>
</html>

randomNumber = Math.floor(Math.random()*3+1);

window.onload = function() {
    if (randomNumber == 1) {
        document.getElementById("spaghetti").style.display = "inline";
        document.getElementById("zelt").style.display = "none";
        document.getElementById("bier").style.display = "none";
    }
    if (randomNumber == 2) {
        document.getElementById("spaghetti").style.display = "none";
        document.getElementById("zelt").style.display = "inline";
        document.getElementById("bier").style.display = "none";
    }
    if (randomNumber == 3) {
        document.getElementById("spaghetti").style.display = "none";
        document.getElementById("zelt").style.display = "none";
        document.getElementById("bier").style.display = "inline"; 
    }
}

about 4 years ago · Juan Pablo Isaza

1 answers

Answer question

0

Answer question

Find remote jobs

Accepted Answer · 2022-07-13T04:39:10.780Z

You can simplify this

const IDs = ["spaghetti","zelt","bier"];
const randomNumber = Math.floor(Math.random()*IDs.length);
document.getElementById(IDs[randomNumber]).style.display = "inline";
document.getElementById(IDs[randomNumber]+"Play").play();

and have css

#spaghetti,#zelt, #bier { display:none;}

or better give them all the same class and have

.audioLoad { display:none;}

Note I removed the autoplay and added an ID I could trigger

const IDs = ["spaghetti", "zelt", "bier"];
window.addEventListener("load", function() { // when page loads
  const randomNumber = Math.floor(Math.random() * IDs.length);
  document.getElementById(IDs[randomNumber]).style.display = "inline";
document.getElementById(IDs[randomNumber]+"Play").play();
})

.audioLoad {
  display: none
}

img { height: 400px}

<html>

<head>
  <title>johannes</title>
  <script src="random.js"></script>
</head>

<body>
  <div id="spaghetti" class="audioLoad">spaghetti
    <img src="https://www.solo.be/uploadedimages/recepten/afbeeldingen/168335-spaghetti-bolognese.jpg">
    <audio id="spaghettiPlay">
      <source src="/Users/henrigimm/Documents/Johannes test/spaghetti.mp3" type="audio/mpeg">
      Your browser does not support the audio element.
    </audio>
  </div>
  <div id="bier" class="audioLoad">bier
    <img src="https://static.ah.nl/static/gall/img_228761_Gall_500.png">
    <audio id="bierPlay">
      <source src="/Users/henrigimm/Documents/Johannes test/bier.mp3" type="audio/mpeg">
      Your browser does not support the audio element.
    </audio>
  </div>
  <div id="zelt" class="audioLoad">zelt
    <img src="https://images.obi.at/product/DE/1500x1500/566276_3.jpg">
    <audio id="zeltPlay">
      <source src="/Users/henrigimm/Documents/Johannes test/zelt.mp3" type="audio/mpeg">
      Your browser does not support the audio element.
    </audio>
  </div>
</body>
</html>

0

162

Randomize loaded content

1 answers

0

Find remote jobs

Andres GPT