多次点击按钮,点击正确btn show img,点击错误按钮显示X.

时间:2018-02-09 13:08:25

标签: javascript jquery angularjs

请您帮忙解决以下代码:)。先感谢您。

我希望能够点击正确的按钮,例如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>

2 个答案:

答案 0 :(得分:0)

下面的代码段是一个解决方案,使用一种功能可以在用户点击任何按钮时隐藏requestPermissions()correct图像。

另外,您的代码存在一些问题:

  • wrongIMG元素有correct个元素。 id应该是唯一的。
  • 你的toggleBtn函数中的if / else结构似乎没用。 if和your else块中会出现相同的指令。

<!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谢谢你,我的问题解决了。

这是此问题的解决方案。