First of all thank you for helping newbies like me. My problem is that I have to create a (supposed to be) simple game for a class. A random hour is displayed, and children have to click on the right image corresponding to that time of the day (basically sunrise/sunset, day, and night). If they don't pick the right image, it's replaced by another. If the answer is right, the image stays the same.
<body>
<div id="container">
<input type="image" id="moment1" src="soleil.png" alt="leve-couche-soleil" onclick="bon1()" style="display:inline">
<input type="image" id="moment2" src="nuit.png" alt="nuit" onclick="bon2()" style="display:inline">
<input type="image" id="moment3" src="jour.png" alt="jour" onclick="bon3()" style="display:inline">
<input type="image" id="gris1" src="gris_leve_couche-soleil.png" onclick="bon1()" style="display:none">
<input type="image" id="gris1" src="gris_nuit.png" onclick="bon2()" style="display:none">
<input type="image" id="gris1" src="gris_jour.png" onclick="bon3()" style="display:none">
</div>
<div id="js">
<script>
var heuresmoment1 = ['19 heures', '20 heures', '6 heures', '7 heures', '21 heures', '22 heures', '23 heures', 'minuit', '1 heure', '2 heures', '3 heures', '4 heures', '5 heures', '8 heures', '9 heures', '10 heures', '11 heures', 'midi' ,'13 heures', '14 heures', '15 heures', '16 heures', '17 heures', '18 heures'];
var mom1 = heuresmoment1.slice(0, 3);
var mom2 = heuresmoment1.slice(4, 12);
var mom3 = heuresmoment1.slice(13, 23);
var randomIndex = Math.floor(Math.random() * heuresmoment1.length);
var Consigne = ['Il est '];
document.write(Consigne + (heuresmoment1[randomIndex]).bold() + '.');
var img1 = document.getElementById("moment1");
var img2 = document.getElementById("moment2");
var img3 = document.getElementById("moment3");
function bon1() {
if(randomIndex.value == mom1.value) {
moment1.style.display = 'inline';
gris1.style.display = 'none';
}
else {
moment1.style.display = 'none';
gris1.style.display = 'inline';
}
}
function bon2() {
if(randomIndex.value == mom2.value) {
moment2.style.display = 'inline';
gris2.style.display = 'none';
}
else {
moment1.style.display = 'none';
gris2.style.display = 'inline';
}
}
function bon3() {
if(randomIndex.value == mom3.value) {
moment3.style.display = 'inline';
gris3.style.display = 'none';
}
else {
moment3.style.display = 'none';
gris3.style.display = 'inline';
}
}
</script>
</div>
</body>
I managed to display random hours, but my code for changing the image according to the random hour doesn't work. I don't get any error messages, it just doesn't change anything.
Aucun commentaire:
Enregistrer un commentaire