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

Creating MySQL inserts from various dynamic HTML tables generated using PHP

Currently, I am faced with a challenge while working on a PHP file that produces multiple dynamic HTML tables through the use of an included PHP library. To provide a glimpse, here is a snippet of the HTML output (with just two tables and reduced rows) ava ...

Is the use of addEventListener("load",... creating an excessive number of XmlHttpRequests?

Consider a scenario where you have the following JavaScript code running in a Firefox plugin, aimed to execute an XmlHttpRequest on a page load: function my_fun(){ var xmlHttpConnection = new XMLHttpRequest(); xmlHttpConnection.open('GET', ...

Encrypting data using NodeJS Crypto and decrypting it in front-end JavaScript

I'm currently on the hunt for a way to perform AES256 CBC decryption on the client side. When working with nodeJS, I typically utilize this function for encryption: exports.encrypt = function(txt, cryptkey){ var cipher = crypto.createCipher(' ...

ways to invoke javascript function on body loading

I'm struggling to invoke a JavaScript function when the body loads. Currently, I have the function call on a button but cannot get it to work when added to the body load event. HTML: <body onload="bodyload();"> JavaScript: function bodyload( ...

Exploring Angular2's ability to interpret directive templates using the ng-container

Recently delving into angular2, I ventured into creating dynamic forms and generating fields by following the guide provided in this URL. The result was as expected. The dynamic form component renders each field one by one using ng-container, like shown b ...

Searching for text in an HTML table using PHP DOM query

How do I extract text from HTML table cells using PHP DOM query? Here is a sample HTML table: <table> <tr> <th>Job Location:</th> <td><a href="/#">Kabul</a> </td> </tr> <tr> ...

Issue: The error message "articales.forEach is not a function" is indicating

app.get('/', (req, res) => { const articales = { title: 'Test Articles', createdAt: Date.now(), description: "Test Description" } res.render('index', { articales : articales }) }) <div ...

Is the Vue-portal enabled conditionally?

I am looking to include some additional information in the navbar (parent component) using Vue Portal. So, within a component, I can use the following code: <portal to="navbar"> <b-button>Some option</b-button> </portal&g ...

Maintaining hot reload functionality by sharing components between two projects

We are currently working on developing 2 products utilizing Angular 2 (although the same issue may arise with React). Our goal is to find a way to share components between these two products. Initially, we considered breaking things up into npm modules as ...

Attempting to load using ajax, Chrome and jquery-mobile will modify the location of the window through setting window.location.href

I'm encountering a challenge with my mobile application where I need to redirect users to the login page on a 401 ajax call. However, it seems that jQM is attempting to load this via AJAX when the request is sent. This solution works flawlessly for s ...

Having trouble resolving the dependency tree within react-navigation-stack

Trying to understand navigation in React-native and attempting to execute the following code: import React, {Component} from 'react'; import {StyleSheet, Text, View} from 'react-native'; import {createAppContainer} from 'react-nav ...

What is the best way to detect component errors on the server with Angular Universal?

Here is a snippet of my server code that renders the Angular home.component: app.get("*", (req, res) => { res.render( `../${CLIENT_DIST_DIR}/index`, { req: req, res: res, providers: [ ...

Is there a way to pass locale data using props in VueJS Router?

To access hotel data, the URL path should be localhost:8080/hotel/:id (where id is equal to json.hoteID). For example, localhost:8080/hotel/101 This path should display the specific data for that hotel. In order to achieve this, we will utilize VueJS vu ...

I am encountering difficulties with importing Node modules into my Vue.js project

Having some trouble importing a node module via NPM in a Vue.js single file component. No matter which module I try to install, it always throws an error saying These dependencies were not found. I'm following the installation instructions correctly ( ...

When using NodeJS and MongoDB together, a POST request may receive a 404 error code

Despite having all the routes set up correctly, I'm encountering a 404 error when trying to send a POST request. I've searched through numerous similar questions but haven't come across a solution that addresses my specific issue. Below is ...

Tips for Ensuring a JavaScript Contact Form Submits Successfully

Snippet of HTML Code for Contact Form: Contact Me <label for="Name">Name:</label> <input type="text" name="name" id="Name" accesskey="N" tabindex="1"> ...

What is causing the TypeScript error in the MUI Autocomplete example?

I am attempting to implement a MUI Autocomplete component (v5.11) using the example shown in this link: import * as React from 'react'; import TextField from '@mui/material/TextField'; import Autocomplete from '@mui/material/Autoco ...

I am having trouble executing a script as the steps I have followed are not yielding the desired results. I am wondering where I may have made a mistake

I am trying to execute a script provided by Maciej Caputa in response to this question: How to import CSV or JSON to firebase cloud firestore The objective is to utilize a JSON file for uploading data to Cloud Firestore. As a newcomer to running scripts, ...

Unable to assign an IP address to an Express JS application

Struggling to test a specific endpoint in Express, but consistently encountering a 404 error. var express = require("express") var app = express() //var http = require('http').Server(app) app.get('/', function(req,res){ res. ...

Tips for ensuring all data is downloaded in Firebase (Firestore) Storage before proceeding?

I am currently developing a light dashboard in Vue that connects to Firestore and Storage. As someone who is not an expert, I have encountered a roadblock in what should be a simple task. The issue lies with a function that is meant to retrieve all URLs ba ...