I'm having trouble getting the event listener to trigger when clicking on an image in VanillaJS. Can anyone help me troubleshoot this issue?

I am attempting to create a script that can extract data from my rock paper scissors gameplay on a specific website ():

var h_choice = document.querySelectorAll(".play-page-gamer__choices")[0];
var h_rock = document.querySelectorAll(".play-page-gamer__choices")[0]
    .childNodes[1].childNodes[2];
var h_paper = document.querySelectorAll(".play-page-gamer__choices")[0]
    .childNodes[3].childNodes[2];
var h_scissors = document.querySelectorAll(".play-page-gamer__choices")[0]
    .childNodes[5].childNodes[2];

game = [];

h_rock.addEventListener("click", () => {
    console.log("rock");
});
h_paper.addEventListener("click", () => {
    console.log("paper");
});
h_scissors.addEventListener("click", () => {
    console.log("scissors");
});

This is just a snapshot of the code, let me know if you need more details 😁

I have set up event listeners to detect which choice I make through clicking but unfortunately, the events are not triggered when I click on the image.

Upon clicking an image, I expect to see a message in the console like 'paper' if I click on paper, however, nothing is displayed. Interestingly, when I simulate a click using h_paper.click(), it does return 'paper' in the console.

I even checked if the event listener was removed, but it appears intact as seen in the array with my function:

() => {
    console.log('paper')
}

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

Replacing elements with jQuery

In the process of designing a webapp, I am utilizing jquery's .replaceWith() function. The HTML structure I have is as follows: {% for service in services %} <div id="service" name="name" value="{{service.name}}"> {{service.n ...

Using JSON / jQuery: How to Handle XML Data in the Success Function of an AJAX Post Request

Greetings! I am currently performing an ajax post through a JSP. The JSON data is being sent in string format (parsed using parseJSON, then converted back to a string using JSON stringify). The post operation functions correctly. However, my query lies in ...

Is there a way to invoke an AngularJS function using JavaScript without specifying the ID parameter?

I am interested in invoking an AngularJS function without relying on the use of an id parameter. My current method for calling the AngularJS function is shown below: JS File: angular.element(document.getElementById('service_search')).scope().s ...

Failure to trigger success or error callbacks in Angular's $http.get request

Trying to access the nutritionix v1_1 API through a get request has been a bit tricky. Despite the function being called successfully and passing the correct data, the $http.get request seems to be causing some trouble. It simply skips over the remaining c ...

Generating charts using JSON data with the help of JavaScript

Hi there! I have a JSON file shown in the first image and I would like to create a chart similar to the one in the second image using JavaScript (using any library). Can anyone provide me with a simple example code on how to achieve this? ...

Why does the useEffect() from before continue to run for a long period after the component has already been rendered?

At the moment, my ReactJs code looks like this as I work on implementing a stopwatch: const App: React.FC = () => { const [seconds, setSeconds] = useState(0); const [isPaused, setIsPaused] = useState(false); const secondsToTimerFormat = (seconds: ...

Error in Typescript persists even after short-circuit evaluation is used

Kindly review the provided code sample type type1 = string[] | undefined; let variable1 : type1 = undefined; console.log(variable1 && variable1.length); Upon attempting to run this code in Typescript Playground, an error is generated stating Pro ...

There is a lack of communication between the tomcat application and the database

I am currently working on a web application that is stored in a war file and runs with Tomcat. Initially, I start my MySQL 5.7 database, followed by running a Spring Boot project created with the necessary files. After completing these steps, I deploy my ...

`I'm experiencing difficulty sending JSON data to Typeahead using PHP`

I am having trouble passing an array of data from PHP to typeahead. I have tried various solutions but nothing seems to work. When I display the response on the console, it shows the array of strings but they are not populating in the typeahead field. PHP ...

Generate a new passport session for a user who is currently logged in

I am currently utilizing passport js for handling the login registration process. After a new user logs in, a custom cookie is generated on the browser containing a unique key from the database. Here's how the program operates: When a new user logs ...

The ng-model is not properly syncing values bidirectionally within a modal window

I am dealing with some html <body ng-controller="AppCtrl"> <ion-side-menus> <ion-side-menu-content> <ion-nav-bar class="nav-title-slide-ios7 bar-positive"> <ion-nav-back-button class="button-icon ion-arrow-le ...

After completing the mapSeries operation, I aim to re-implement the function

How can I return queries (functions) after performing mapSeries? Any help is appreciated! async querys(querys) { const pool = await poolPromise; if (pool != null) { const transaction = new sql.Transaction(pool); ...

The UPDATE query failed to make any changes to the data stored in the MySQL

Currently I am developing an application using express.js. In my project, I have incorporated the "mysql" add-on (https://www.npmjs.com/package/mysql). The issue I am facing is while sending an UPDATE query to the server and receiving a response that shows ...

"Error 404: Invalid request encountered while using React and

I am encountering an issue with a 404 not found error when I attempt to send a post request in React. My code involves using Django Rest Framework on the backend and React Axios on the frontend, but I am facing errors while making the post request. Below i ...

What is the best way to store numerous objects in an array at once?

Upon clicking the save button, I encounter this object: {description: "ghhg", dateSelected: "2020-02-27", startDate: "2020-02-27", company_id: "2", hr_id: 72, …} However, every time I click on save, a new object ...

The function Page.render() will output a value of false

Currently, I am utilizing phantomjs to capture screenshots of multiple webpages. The code snippet below is what I have used to generate a screenshot image. var page = require('webpage').create(); page.viewportSize = { width: 1200,height: 800}; ...

Unexpected Behavior when Passing @Input() Data Between Parent and Child Components in Angular 2 Application

I am currently in the process of abstracting out a tabular-data display to transform it into a child component that can be loaded into different parent components. The main aim behind this transformation is to ensure that the overall application remains "d ...

What is preventing me from "importing" react-dom.js?

Implementing ReactDOM into my Jest tests has been a bit of a challenge. Let's take a look at the code snippet below. const React = require('../src/js/vendor/react/build/react.js'); const ReactDOM = require('../src/js/vendor/react/build ...

Struggling to assign the value of a JavaScript variable to an HTML field?

Is it possible to click on an HTML cell and extract the cell's html data, then insert it into a form field for future use? I have been able to assign a value directly through coding like: blah = 99; however, when trying to change that value to a varia ...

Emulating a Javascript API request

I'm looking to practice simulating API calls for a VueJS application. Currently, I am fetching data from a hardcoded JSON file that I've created. Within my App.vue: <template> <p>{{ teams.yankees.city }}</p> // Output will b ...