如何使用HTML表和JavaScript构建危险的游戏



我的目标是使用HTML和JavaScript开发在线危险游戏网站。我试图将每个表单元与赌注链接到一个小弹出窗口,该窗口提出问题。

我已经使用HTML表创建了背景游戏板。

<body>
<table>
<tr>
<td colspan=5><h1>Biomedical Blazer!</h1> </td>
</tr>
<tr>
        <td><h1> 1 </h1></td>
        <td><h1> 2 </h1></td>
        <td><h1> 3 </h1></td>
        <td><h1> 4 </h1></td>
        <td><h1> 5 </h1></td>
</tr>
<tr>
        <td id="1cat500"><h1> $500 </h1></td>
        <td id="2cat500"><h1> $500 </h1></td>
        <td id="3cat500"><h1> $500 </h1></td>
        <td id="4cat500"><h1> $500 </h1></td>
        <td id="5cat500"><h1> $500 </h1></td>
</tr>
<tr>
        <td id="1cat400"><h1> $400 </h1></td>
        <td id="2cat400"><h1> $400 </h1></td>
        <td id="3cat400"><h1> $400 </h1></td>
        <td id="4cat400"><h1> $400 </h1></td>
        <td id="5cat400"><h1> $400 </h1></td>
</tr>
<tr>
        <td id="1cat300"><h1> $300 </h1></td>
        <td id="2cat300"><h1> $300 </h1></td>
        <td id="3cat300"><h1> $300 </h1></td>
        <td id="4cat300"><h1> $300 </h1></td>
        <td id="5cat300"><h1> $300 </h1></td>
</tr>
<tr>
        <td id="1cat200"><h1> $200 </h1></td>
        <td id="2cat200"><h1> $200 </h1></td>
        <td id="3cat200"><h1> $200 </h1></td>
        <td id="4cat200"><h1> $200 </h1></td>
        <td id="5cat200"><h1> $200 </h1></td>
</tr>
<tr>
        <td id="1cat100"><h1> $100 </h1></td>
        <td id="2cat100"><h1> $100 </h1></td>
        <td id="3cat100"><h1> $100 </h1></td>
        <td id="4cat100"><h1> $100 </h1></td>
        <td id="5cat100"><h1> $100 </h1></td>
</tr>

我无法将JavaScript上的OnClick方法与单个单元格ID链接。

const cell = document.querySelector('#1cat500');
cell.addEventListener('click', e => {
   // stuff in here
});

使用模态弹出窗口,这将提出问题。

将问题放入JSON文件中,并利用javaScript的获取方法,该方法将读取JSON文件并获取问题。

最新更新