我的目标是使用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文件并获取问题。