Question

我的目标是使用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关联起来。

Answer 1

const cell = document.querySelector('#1cat500');

cell.addEventListener('click', e => {
   // stuff in here
});

Answer 2

使用Modal弹出窗口，询问问题。

将问题放入json文件中，并利用javascript的fetch方法读取json文件并接受问题。

如何使用html表格和javascript构建危险游戏？

2 个答案: