Why src in this.id.src undefined (in debugger) [inside an iife]

Question

Why is the src in this.id.src undefined in debugger? I don't understand why this doesn't work. I've had this working before, but with a specific id (not this.id) Does anyone have any suggestions?

 document.getElementById("a1").addEventListener("click", myFunction); function myFunction (id) { console.log(this.id); // works this.id.src="images/red.jpg"; }

 <div> <img id="a1" src="images/black.jpg"> </div>

Answer 1

There is no src property on the id property. You must used it directly this.src . And the parameter that is passed to the function is the event not the id:

 document.getElementById("a1").addEventListener("click", myFunction); function myFunction(e) { this.src = "http://via.placeholder.com/150x150"; }

 <div> <img id="a1" src="http://via.placeholder.com/100x100"> </div>