I have been looking into different ways to use JS to switch from one image to another. I tried using classList.toggle and now eventListener method, which I thought will work just fine but the button is not working in all scenarios. I also want to change the text of the button using .textContent. I realized that some of my syntax is light blue. Wondering what I am missing. I checked the console several times but no issues found.
I tried the declaration function with direct image switch and it worked, but the arrow function with event listener is not working. Which is what I want to use. I am preparing for an interview and need to show I can use the event listener method to switch images.
<!Doctype html>
<html lang="en">
<head>
<title>About Us</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>ABOUT US</h1>
<a href="#bottompg">Jump to Bottom Page</a>
<button id="showGiftCardBtn">
Open Me
</button>
<img id="discountCode" src="images/gift.png.gif" alt="letters and numbers on a white background" class="code" style="display:none">
<script src="script.js"></script>
</body>
</html>
JavaScript:
const showGiftCard = document.getElementById("ShowGiftCardBtn");
const showCodeImage = document.getElementById("discountCode");
showGiftCard.addEventListener("click", () => {
showCodeImage.style.dispaly = "block";
let cardButton = document.getElementById('showGiftCardBtn')
console.log(cardButton)
cardButton.textContent = " Your code! 10% off any of our products or services. Thank You For Your Bussiness"
});
user24807062 is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
You have a typo in getElementById(“ShowGiftCardBtn”), it should be “showGiftCardBtn” with a lowercase “s” matching the id of your button element and there’s a typo in showCodeImage.style.dispaly = “block”;. It should be display instead of dispaly.
const showGiftCard = document.getElementById("showGiftCardBtn");
const showCodeImage = document.getElementById("discountCode");
showGiftCard.addEventListener("click", () => {
showCodeImage.style.display = "block";
let cardButton = document.getElementById('showGiftCardBtn');
cardButton.textContent = "Your code! 10% off any of our products or services. Thank You For Your Business";
});this code should work.