I want when click on the img using JS, it will be selected and others will blur out.
That what I’m expect :
Here the code for the 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>
Im trying to use target event when click on the img. But I stuck right here and don’t know how to change the attribute of that img tag in the target section.
Here what I’m stuck at :
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);
}