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