Adding EventListeners for Click Handling: A Step-by-Step Guide

Here is the part of my code in HTML:

<!DOCTYPE html>
<html>
    <head>
        <h>
            <title> This page</title>
        </h>
    </head>
     <body>
         <button id = "go-button" >GO</button>
         <script src="main.js"></script> 
     </body>
</html>

This is the JavaScript section of my code:

function buttonClicked(){
    console.log("button clicked");
}

var btn = document.getElementById("go-button");

btn.addEventListener("clicked", buttonClicked);

I am facing an issue where no output is showing on the console when I try to print it, and this has left me puzzled.

Answer №1

No events have been clicked, however a click event is triggered:

btn.addEventListener("click", buttonClicked);

Answer №2

Change clicked to click and the function will execute correctly.

Answer №3

It's the event name "click", not "clicked"

Answer №4

When using the addEventListener method, it requires two arguments: the event and the function to be executed. It seems like there is a typo in the first parameter.

btn.addEventListener('click', buttonClicked);

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is there a way I can detect a browser timeout and display a custom error message?

My webpage in classic asp contains a link to a local IP address, shown below: <a href="http://192.168.1.89">Link</a> When the local IP address is not available, the web browser eventually times out and shows its own error message. I ...

Issue arising from CSS and div elements

I am facing some challenges in making certain divs behave as desired. Take a look at the following references: Link 1: - contains two divs Link 2: - has only one div I am trying to utilize two divs (.content) without them being positioned incorrectly ...

Developing Webpart Postback logic in C# script

I am currently facing challenges with SharePoint webparts programming. I am unsure about how to trigger a postback for an object at a specific time. I have come across suggestions to use "javascript" for this purpose, but I am having trouble understanding ...

Created a custom function that includes a specific target href parameter

I have a website that implements role-based authentication, where the application displayed is dependent on the user's role. The code for this functionality is as follows: <asp:Repeater ID="ui_rprApp" runat="server" DataSourceID="odsApp"> ...

Assign the Firebase token to the JavaScript cookie value

Can a cookie store a token value? In my setup with js-cookie, Firebase auth/firestore, and Next.js, I am setting my cookie within the handleUser function like this: const handleUser = async (rawUser) => { if (rawUser) { const user = await fo ...

Incorporate a website link into an isotope filter

My filter configuration is as follows: <ul class="filters filter-portfolio"> <li><a href="#" class="selected animated" data-animation="fadeInUp" data-filter="*">All</a></li> <li><a hre ...

What is the process for selecting and accessing a DOM element?

Looking to utilize jQuery selector for accessing deep within the DOM. HTML <table> ...more here <tr> <td class="foo bar clickable"> <div> <div class="number">111</div> //Trying to retrieve "111" ...

Combining Multiple Arrays into One | Node.js

Can someone explain how to merge an array of arrays to me? For instance, I have the following array: [ [ {brand: 'fiat', model: 'palio'} ], [ {brand: 'nissan', model: 'march'} ] ] I want to transform this array int ...

The transformation from CSS and HTML to RoR resulted in sprites being converted into mysterious black boxes

Previously, this site was functioning fine without Ruby on Rails. However, after moving the code to Rails, a strange issue has arisen where the hover images turn black when the mouse is placed over them. // Place all the styles related to the home control ...

Retrieving online content and updating it upon reestablishing internet connection

Currently, I am in the process of developing an app that will feature a substantial amount of web content. My plan is to use Phone Gap build for its release; however, I intend to host all the content online and link to it from within the app. I have been c ...

Rotating the icon in Bootstrap Accordion upon opening

I am trying to customize a Bootstrap 4 accordion by conditional rotating the icon to point up when it is open and back down when closed. I managed to achieve this using CSS, but now I need to implement it conditionally based on active states rather than ev ...

Having Issues with Cms Installation

I've been experimenting with a content management system that I plan to use for a project, but I encountered some errors. It seems like any "dynamic" elements are not displaying properly. Warning: mysqli::prepare() [mysqli.prepare]: (42S02/1146): Tab ...

Update the class information using jQuery after performing an action and serialize the button's ID for AJAX requests

I'm facing an issue with two buttons on my page: <td> <button id="1" class="green-button">Publish</button> <button id="1" class="yellow-button">Delete</button> </td> The green-button and red-button have different ...

The field 'XXX' is not a valid property on the type 'CombinedVueInstance<Vue, {}, {}, {}, Readonly<Record<never, any>>>'

When creating a Vue component with TypeScript, I encountered an error message in the data() and methods() sections: Property 'xxx' does not exist on type 'CombinedVueInstance<Vue, {}, {}, {}, Readonly<Record<never, any>>>& ...

Guide on incorporating interactive visuals or features within a panoramic image viewer through the use of THree.js and webGL

Seeking advice on how to incorporate more images and hyperlinks within a panoramic viewer, similar to the examples below: This particular link Panorado js viewer. I have noticed that these viewers feature embedded hyperlinks and overlays, I have attempt ...

What is preventing me from generating a string for transform:translate within Angular.js?

Attempting a new approach here $scope.graph.transform = "transform: translate(" + $scope.graph.width + "," + $scope.graph.height + ");"; Despite my efforts <h3>transform: <span ng-bind="grap ...

Variable scope fails to update upon selection change

I'm currently setting up a select dropdown with an ng-options. The dropdown is appearing correctly on the HTML page, but for some reason, when I choose an option, the variable specified by ng-model is not updating in $scope. This is the HTML code: &l ...

Flexible DIVs with a maximum width of 50% that adjust to different

I'm having trouble getting these two DIVs to display properly within a parent DIV while maintaining responsiveness. I want them to each take up 50% of the screen with a 10px margin between them. Does my current code approach seem correct? .box-cont ...

Cypress OPENSSL_internal:NO_START_LINE error detected

Has anyone encountered this error before? I've already tried clearing the cypress cache and reinstalling it, but the error persists. I couldn't find a solution to resolve this issue. The version I am using is 6.5.0. Error: error:0900006e:PEM rou ...

The update feature seems to be malfunctioning within the MEAN Stack environment, specifically with node.js and angular js

Looking for some assistance as a beginner in the mean stack. I'm trying to update a record using the update function, but it's not working as expected. I need to update a specific object based on its ID, however, I'm encountering issues wit ...