Button in if loop

Question

Я работаю над кодом trivia в javascript/html для класса, который я беру, и когда вы нажимаете правильную кнопку, я хочу, чтобы изображение галочки отображалось. Прямо сейчас, на мой галочкой я использую «непрозрачности» особенность:

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

, а затем позже я хотел бы добавить, что при нажатии на правую кнопку, непрозрачность будет изменяться от О до 1 (если вы знаю лучший способ, чем это, это нормально, я полностью согласен с этим).

Мой вопрос: Как я могу сказать «Если это кнопка нажата, а затем измените непрозрачность на 1/поместить этот файл на веб-странице еще журнала консоли попробуйте еще раз.» Помощь? Кроме того, здесь приведен пример 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> 

Затем в обработчик щелчка, вы можете получить значение этого атрибута и использовать его, чтобы изменить соответствующее изображение:

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; 
    }); 
}