Question

首先感谢你帮助像我这样的新手。我的问题是我必须为一个类创建一个（应该是）简单的游戏。显示随机小时，儿童必须点击与当天的那个时间相对应的右图像（基本上是日出/日落，白天和黑夜）。如果他们没有选择正确的图像，它将被另一个图像取代。如果答案是正确的，则图像保持不变。

<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>

我设法显示随机时间，但我根据随机时间更改图像的代码不起作用。我没有收到任何错误消息，它只是没有改变任何内容。

Answer 1

欢迎来到StackOverflow。

你必须重新考虑你的逻辑，你有太多function做同样的事情。我以不同的方式重构您的代码，我希望它可以帮助您;）

jsFiddle

Javascript函数取决于随机字符串

1 个答案: