Quiero que cuando haga clic en la imagen usando JS, se seleccionará y otros se desdibujarán. Eso es lo que espero:

Aquí el código para el HTML:

 <section class="choice-grid"> <div data-choice-id="blepping" data-question-id="one"> <img src="images/blepdog.jpg"/> <img class="checkbox" src="images/unchecked.png"/> </div> <div data-choice-id="happy" data-question-id="one"> <img src="./images/happydog.jpg"/> <img class="checkbox" src="images/unchecked.png"/> </div> <div data-choice-id="sleeping" data-question-id="one"> <img src="./images/sleepingdog.jpg"/> <img class="checkbox" src="images/unchecked.png"/> </div> <div data-choice-id="dopey" data-question-id="one"> <img src="./images/dopeydog.jpg"/> <img class="checkbox" src="images/unchecked.png"/> </div> <div data-choice-id="burger" data-question-id="one"> <img src="./images/burgerdog.jpg"/> <img class="checkbox" src="images/unchecked.png"/> </div> </section>

Estoy tratando de usar el evento objetivo cuando hago clic en la imagen. Pero me quedé aquí y no sé cómo cambiar el atributo de esa etiqueta img en la sección de destino.

Aquí en lo que estoy atascado:

 function getEventTarget(e) { e = e || window.event; return e.target || e.srcElement; } var choice = document.querySelector('.choice-grid'); choice.onclick = function(event) { var target = getEventTarget(event); var test = target.attributes.src; // test // var test =target.lastChild.src alert(test); }