Question

嗨，我是新手，还在学习哈哈，所以对我很轻松。

我正在尝试使用地图符号作为图像进行简单的识别游戏。点击后我有一个开始按钮会问你一个问题，但似乎也无法得到随机图片。每当用户选择正确的按钮/符号时，我也会点亮灰色的星星。这是代码：

<!DOCTYPE html>
    <style> 
        body{ background-color: lightblue; }
    </style>
    <html>
        <head>
            <title>OS Map Symbols</title>
            <meta charset="utf-8" />
        </head>
        <body>
        <p> <input onclick="btnStart(); displayRandomImage();" type="button" value="Start" /> </p> 

        <input id="btnTrain" type="button" value="Train Station" disabled="disabled"/>
        <input id="btnBus" type="button" value="Bus Station" disabled="disabled"/>
        <input id="btnYouth" type="button" value="Youth Hostel" disabled="disabled"/>
        <input id="btnFootpath" type="button" value="FootPath" disabled="disabled"/>
        <input id="btnBridle" type="button" value="Bridleway" disabled="disabled"/>
        <input id="btnWorship" type="button" value="Place of Worship" disabled="disabled"/>
        <input id="btnHouse" type="button" value="Public House" disabled="disabled"/>
        <input id="btnCar" type="button" value="Car Park" disabled="disabled"/>
        <input id="btnRoad" type="button" value="Road" disabled="disabled"/>
        <input id="btnPillar" type="button" value="Triangulation Pillar" disabled="disabled"/>

        <center> <p> <p id="paragrapgh"> </p> </center> 
        <center> <div class="contents" id="content"></div> </center>

        <img id="imgTrain.jpg" img src="C:\Users\ekene\OneDrive\Pictures\MapSym_TS.jpg" width="100" height="100" style="display:none;"/>
        <img id="imgBus.jpg"  img src="C:\Users\ekene\OneDrive\Pictures\MapSym_BS.jpg" width="100" height="100" style="display:none;"/>
        <img id="imgYouth.jpg"  img src="C:\Users\ekene\OneDrive\Pictures\MapSym_YH.jpg" width="100" height="100" style="display:none;"/>
        <img id="imgFootpath.jpg" img src="C:\Users\ekene\OneDrive\Pictures\MapSym_FP.jpg" width="100" height="100" style="display:none;"/>
        <img id="imgBridle.jpg" img src="C:\Users\ekene\OneDrive\Pictures\MapSym_BW.jpg" width="100" height="100" style="display:none;"/>
        <img id="imgWorship.jpg" img src="C:\Users\ekene\OneDrive\Pictures\MapSym_PW.jpg" width="100" height="100" style="display:none;"/>
        <img id="imgHouse.jpg" img src="C:\Users\ekene\OneDrive\Pictures\MapSym_PH.jpg" width="100" height="100"  style="display:none;"/>
        <img id="imgCar.jpg" img src="C:\Users\ekene\OneDrive\Pictures\MapSym_CP.jpg" width="100" height="100"  style="display:none;"/>
        <img id="imgRoad.jpg" img src="C:\Users\ekene\OneDrive\Pictures\MapSym_RD.jpg" width="100" height="100"  style="display:none;"/>
        <img id="imgPillar.jpg" img src="C:\Users\ekene\OneDrive\Pictures\MapSym_TP.jpg" width="100" height="100"  style="display:none;"/>

        <img src="C:\Users\ekene\OneDrive\Pictures\star-g.gif" img id="imgStar1" />
        <img src="C:\Users\ekene\OneDrive\Pictures\star-g.gif" img id="imgStar2" />
        <img src="C:\Users\ekene\OneDrive\Pictures\star-g.gif" img id="imgStar3" />
        <img src="C:\Users\ekene\OneDrive\Pictures\star-g.gif" img id="imgStar4" />
        <img src="C:\Users\ekene\OneDrive\Pictures\star-g.gif" img id="imgStar5" />
        </body>     
    </html>
<script> 
    function btnStart() {
        var x = document.getElementById("paragrapgh");
        x.style.fontSize = "25px";
        x.style.color = "red";
        document.getElementById("paragrapgh").innerHTML = "What Is This Symbol?";
    }
    function displayRandomImage(){
        var Images1 = new Array();
        Images1[0]= "C:\Users\ekene\OneDrive\Pictures\MapSym_TS.jpg"
        Images1[1]= "C:\Users\ekene\OneDrive\Pictures\MapSym_BS.jpg"
        Images1[2]= "C:\Users\ekene\OneDrive\Pictures\MapSym_YH.jpg"
        Images1[3]= "C:\Users\ekene\OneDrive\Pictures\MapSym_BW.jpg"
        Images1[4]= "C:\Users\ekene\OneDrive\Pictures\MapSym_PH.jpg"
        Images1[5]= "C:\Users\ekene\OneDrive\Pictures\MapSym_RD.jpg" 
        Images1[6]= "C:\Users\ekene\OneDrive\Pictures\MapSym_FP.jpg"
        Images1[7]= "C:\Users\ekene\OneDrive\Pictures\MapSym_PW.jpg" 
        Images1[8]= "C:\Users\ekene\OneDrive\Pictures\MapSym_CP.jpg"
        Images1[9]= "C:\Users\ekene\OneDrive\Pictures\MapSym_TP.jpg"

        var random = Images1[Math.floor(Math.random() * Images1.length)];
        document.getElementById("content").innerHTML = random;
    }
</script>

Answer 1

你非常接近。您遇到的问题可以使用addEventListener方法将事件连接到元素来解决。在这种情况下，在您的开始按钮中添加id并在点击时触发事件将如下所示

<强> JSFIDDLE

<强> HTML

<input id="startButton" type="button" value="Start" />

<强> JS

var startButton = document.getElementById('startButton');
startButton.addEventListener('click', function(){
    btnStart();
    displayRandomImage();
});

值得一提的是，您有许多HTML语法问题，包括html元素style之外的未关闭标记，script和using . in id attributes标记，并使用center等弃用标签。

不幸的是，因为你有本地链接的图像，我不确定你是否要求如何使gif项再次动画（Can you control GIF animation with Javascript?），或者你是否要求使用js交换图像src（{{ 3}}）

从编码的角度来看，你可以通过从JS对象开始，从那里生成项目，特别是当你有一致的路径时，你想要将图像链接到按钮的方式变得更加简单到图像。这样的事情：Programmatically change the src of an img tag

如何使用may符号制作一个简单的识别游戏

1 个答案: