请您帮忙解决以下代码:)。先感谢您。
我希望能够点击正确的按钮,例如H并显示复选标记和前进链接(图像),如果用户单击错误的按钮,则显示X图像,直到单击正确的按钮,所有按钮都被禁用,并且仅单击前进按钮。任何帮助表示赞赏。
<!DOCTYPE html>
<html>
<body>
<!--When the correct button is clicked, the checkmark image and the next image bellow should appear on table-->
<button id="d" name="d" type="button" onclick="toggleBtn('correct')">D</button>
<!--When the Wrong buttons are clicked the X mark appeas until user clicks the corect answer-->
<button id="h" name="h" type="button" onclick="toggleBtn('wrong')">H</button><br/><br/>
<button id="a" name="a" type="button" onclick="toggleBtn('wrong')">A</button>
<button id="x" name="x" type="button" onclick="toggleBtn('wrong')">X</button>
<script type="text/javascript">
function toggleBtn(id) {
var e = document.getElementById(id);
if (e.style.display == 'block')
e.style.display = 'block';
else
e.style.display = 'block';
}
</script>
<table>
<tr>
<td>
<!--This element should be shown with the check mark when the correct button is clicked-->
<img style="display:none;" id="correct" src="https://png.pngtree.com/element_origin_min_pic/17/01/07/e9de203a108e1511282a8d35e8857090.jpg" width="100" height="132">
<!--This element should be shown when the wrong button is clicked-->
<img style="display:none;" id="wrong" src="https://png.pngtree.com/element_origin_min_pic/16/12/20/74ab28b776c19ad9411de1a5c2c98807.jpg" width="100" height="132">
</td>
<!--This element should be shown with the check mark when the correct button is clicked, all buttons should be disabled except the next-->
<td><img style="display:none;" id="correct" title="forward"src="https://png.pngtree.com/element_origin_min_pic/17/03/21/1b78f0da4326aa5f574061d9b403340e.jpg" width="100" height="132"></td>
</tr>
</table>
</body>
</html>
答案 0 :(得分:0)
下面的代码段是一个解决方案,使用一种功能可以在用户点击任何按钮时隐藏requestPermissions()
和correct
图像。
另外,您的代码存在一些问题:
wrong
个IMG
元素有correct
个元素。 id应该是唯一的。
<!DOCTYPE html>
<html>
<body>
<!--When the correct button is clicked, the checkmark image and the next image bellow should appear on table-->
<button id="d" name="d" type="button" onclick="toggleBtn('correct')">D</button>
<!--When the Wrong buttons are clicked the X mark appeas until user clicks the corect answer-->
<button id="h" name="h" type="button" onclick="toggleBtn('wrong')">H</button><br/><br/>
<button id="a" name="a" type="button" onclick="toggleBtn('wrong')">A</button>
<button id="x" name="x" type="button" onclick="toggleBtn('wrong')">X</button>
<script type="text/javascript">
function toggleBtn(id) {
// hiding the previous result
hideResults();
var e = document.getElementById(id);
e.style.display = 'block';
if (id === "correct") {
document.getElementById("forward").style.display = 'block';
}
}
function hideResults() {
document.getElementById("correct").style.display = 'none';
document.getElementById("wrong").style.display = 'none';
document.getElementById("forward").style.display = 'none';
}
</script>
<table>
<tr>
<td>
<!--This element should be shown with the check mark when the correct button is clicked-->
<img style="display:none;" id="correct" src="https://png.pngtree.com/element_origin_min_pic/17/01/07/e9de203a108e1511282a8d35e8857090.jpg" width="100" height="132">
<!--This element should be shown when the wrong button is clicked-->
<img style="display:none;" id="wrong" src="https://png.pngtree.com/element_origin_min_pic/16/12/20/74ab28b776c19ad9411de1a5c2c98807.jpg" width="100" height="132">
</td>
<!--This element should be shown with the check mark when the correct button is clicked, all buttons should be disabled except the next-->
<td><img style="display:none;" id="forward" title="forward"src="https://png.pngtree.com/element_origin_min_pic/17/03/21/1b78f0da4326aa5f574061d9b403340e.jpg" width="100" height="132"></td>
</tr>
</tr>
</table>
</body>
</html>
答案 1 :(得分:0)
RogerC谢谢你,我的问题解决了。
这是此问题的解决方案。