javascript - if 循环中的按钮

Question

我正在为我正在参加的类(class)编写 javascript/html 中的琐事代码，当您按下正确的按钮时，我希望显示复选标记的图像。 现在，对于我的复选标记，我正在使用“不透明”特性:

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

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

我的问题:我怎么说“如果这个按钮被点击，然后将不透明度更改为 1/将这个图像放在网页上。else 控制台日志再试一次” 帮助？ 另外，这是我现在拥有的 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;
    });
}