Javascript Code
var orderPizzaCheck = document.getElementsByClassName("orderPizza");
orderPizzaCheck.addEventListener("click", handler);
function handler() {
console.log("Hello from console");
}
HTML Code
<div class="order-form">
<button type="button" class='orderPizza' id="landingButton"><a href="orderPizza.html">ORDER
PIZZA</a>
</button>
</div>
The functionality that I need:
Whenever the user clicks on the button with the className = 'orderPizza', a message on console should be displayed "Hello from console".
My Approach
In the javascript file, using document.getElementsByClassName, I'm fetching the button of className = 'orderPizza'. I add an event listener to this element by creating a function handler().
ERROR:
Uncaught TypeError: orderPizzaCheck.addEventListener is not a function
My take on:
I understand that it is a very repeated question, but I'm still unable to solve this error. I have put my script tag inside the body tag so that script is not executed prior to the html element but it still doesn't solve the issue. Please help!