JavaScript event listener 'click' not functioning properly

Question

JavaScript event listener 'click' not functioning properly

I'm facing an issue with a click event in a script that is associated with a specific div id. When I move the mouse within the div area and click (the cursor remains unchanged), the event listener does not activate. How can I make the div area clickable?

<script>
  var myEl = document.getElementById('dealdata');

  myEl.addEventListener('click', function() {
    alert('Hello world');
  }, false);
</script>



<td  BGCOLOR="#91be40" align="center" valign="center">
<div id="dealdata">
<br /><?echo $dpromo;?> 
<h1><?echo $dealvalue; ?></h1>
</div> 
</td>

javascript html css

Answer 1

Answer №1

It seems like the variable dealdata may not exist when your script is executed, possibly because it lies within the <script> tag.

You can solve this issue by using an onload event handler:

 window.onload = function() {
     var myElement = document.getElementById('dealdata');

     myElement.addEventListener('click', function() {
        alert('Greetings');
     }, false);
 };

To change the mouse pointer on hover, you need to specify it in CSS:

<style>
    #dealdata { cursor: pointer; }
</style>

Answer 2

It seems like the variable dealdata may not exist when your script is executed, possibly because it lies within the <script> tag.

You can solve this issue by using an onload event handler:

 window.onload = function() {
     var myElement = document.getElementById('dealdata');

     myElement.addEventListener('click', function() {
        alert('Greetings');
     }, false);
 };

To change the mouse pointer on hover, you need to specify it in CSS:

<style>
    #dealdata { cursor: pointer; }
</style>

Answer 3

Answer №2

Modify

let myElement = document.querySelector('#dealdata'); //the id of your div is 'ddata'

with

let myElement = document.getElementById('ddata');

JSFiddle link: http://jsfiddle.net/lisp/Mr2jc/

Answer 4

Modify

let myElement = document.querySelector('#dealdata'); //the id of your div is 'ddata'

with

let myElement = document.getElementById('ddata');

JSFiddle link: http://jsfiddle.net/lisp/Mr2jc/

Answer 5

Answer №3

The identifier for your div element is set as ddata, however, in your JavaScript code you are looking for a different identifier called dealdata.

Answer 6

The identifier for your div element is set as ddata, however, in your JavaScript code you are looking for a different identifier called dealdata.

JavaScript event listener 'click' not functioning properly

Answer №1

Answer №2

Answer №3

Similar questions

Displaying a ReactJS component inside a map function by giving it a unique identifier

When implementing CSS, the background image in the header section of my webpage is not visible to me

Leveraging Global SCSS Variables in Next.JS with SASS

Unexpected request causes a dilemma during the karma test for an Angular directive

Ways to transmit data multiple times within a single request

Stripping away HTML tags from a JSON output

What is the reason behind lightbox not disabling scrolling?

Unable to sort the list items when utilizing the load() function

Can a hyperlink be generated by simply inputting the URL once?

Every time I switch views using the router in vue.js, my three.js canvas gets replicated

The ThemeProvider does not automatically provide theme injections

String passed instead of JSON in Ext JS grid sorting

adjust the width of an element based on the size of characters within it

Scrolling horizontally within SVG graphics

Surprising automatic scrolling upon pressing the keydown button in Bootstrap

Vue looping through nested checkbox groups

Difficulty with spacing in HTML/CSS styling

The PHP-generated table is not being appended to the specified div with jQuery

What's the best way to customize the color of the text "labels" in the Form components of a basic React JS module?

Tips for extracting the chosen value from a dropdown list within a table cell using JavaScript