if 循环中的按钮

Question

我正在 javascript/html 中编写我正在拍摄的 class 中的琐事代码，当您按下正确的按钮时，我希望显示复选标记的图像。现在，我正在使用 "opacity" 特征作为复选标记：

<img id="checkOne" src="check.jpg" style="opacity: 0">

然后我想补充一点，如果您单击右键，不透明度将从 O 变为 1（如果您知道比这更好的方法，那没关系，我完全同意更改它）。

我的问题：我怎么说"if this button is clicked, then change the opacity to 1/put this image on the webpage. else console log try again." 帮助？此外，这是我现在拥有的 html 的示例：

<p> where is the atacama desert located? </p>
<button class="southAmerica" data-image="checkOne">South America</button>
<button >Africa</button>
<button >Canada</button>
<button >Russia</button>

Answer 1

在按钮中，添加一个属性，说明它与哪个图像相关联，例如

<button class="answerButton" data-image="checkOne">Button text</button>

然后在click handler中，可以获取到这个属性的值，用来修改对应的图片：

var answerButtons = document.getElementsByClassName('answerButton');
for (var i = 0; i < answerButtons.length; i++) {
    answerButtons[i].addEventListener('click', function() {
        var imageId = this.getAttribute('data-image');
        document.getElementById(imageId).style.opacity = 1;
    });
}

if 循环中的按钮

Button in if loop

html

javascript

css

if-statement

button