How to convert the attached code to ES6 using queryselector and addeventlistener functions // what the new converted code will be ?

Question

1.00/5 (1 vote)

See more:

<!DOCTYPE html>
<html>
<head>

<script>
function on(){
document.getElementById('myImage').src='pic_bulbon.gif';
}
function off(){
document.getElementById('myImage').src='pic_bulboff.gif';
}
</script>

</head>
<body>
<h2>Turn the pulp on or off !</h2>
<button onclick="on()">Turn on the light</button>
<img id="myImage" src="pic_bulboff.gif" width="100px">
<button onclick="off()">Turn off the light</button>
</body>
</html>

What I have tried:

<!DOCTYPE html>
<html>
<head>

<script>
function on(){
document.getElementById('myImage').src='pic_bulbon.gif';
}
function off(){
document.getElementById('myImage').src='pic_bulboff.gif';
}
</script>

</head>
<body>
<h2>Turn the pulp on or off !</h2>
<button onclick="on()">Turn on the light</button>
<img id="myImage" src="pic_bulboff.gif" width="100px">
<button onclick="off()">Turn off the light</button>
</body>
</html>

Posted 23-May-21 1:36am

Member 15212231

Updated 23-May-21 22:44pm

Add a Solution

1 solution

Add a Solution

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Richard Deeming · Answer 1 · 2021-05-23T22:44:00

Document.querySelector() - Web APIs | MDN[^]
EventTarget.addEventListener() - Web APIs | MDN[^]

However, since you're attaching an event listener to a single element, it would be simpler to add an id to that element, and use getElementById instead of querySelector.

For example:

HTML

<button id="onButton" type="button">Turn on the light</button>

JavaScript

document.getElementById("on").addEventListener("click", function(){
    document.getElementById("myImage").src = "pic_bulbon.gif";
});

How to convert the attached code to ES6 using queryselector and addeventlistener functions // what the new converted code will be ?

1 solution

Solution 1

Add your solution here

Preview 0

How to convert the attached code to ES6 using queryselector and addeventlistener functions // what the new converted code will be ?

1 solution

Solution 1

Add your solution here

Preview 0

Existing Members

...or Join us