Console not displaying any logs following the occurrence of an onClick event

Question

Console not displaying any logs following the occurrence of an onClick event

One interesting feature I have on my website is an HTML div that functions as a star rating system.

Currently, I am experimenting with some JavaScript code to test its functionality. My goal is for the console to log 'hello' whenever I click on one of the stars.

<div class=rating>
    <div class="ratings_stars" data-rating="1"></div>
    <div class="ratings_stars" data-rating="2"></div>
    <div class="ratings_stars" data-rating="3"></div>
    <div class="ratings_stars" data-rating="4"></div>
    <div class="ratings_stars" data-rating="5"></div> 
</div>

$('.ratings_stars').on('click', function() {
    console.log('Hello');
});

The JavaScript code is stored in a separate file which I have successfully linked to.

javascript html css

Answer 1

Answer №1

Ensure that your class is enclosed in quotation marks, and remember to include your jQuery event handlers within a document ready function:

$(document).ready(function() {
  $('.ratings_stars').on('click', function() {
    console.log('Hello');
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="rating">
  <div class="ratings_stars" data-rating="1">Click me</div>
  <div class="ratings_stars" data-rating="2">Click me</div>
  <div class="ratings_stars" data-rating="3">Click me</div>
  <div class="ratings_stars" data-rating="4">Click me</div>
  <div class="ratings_stars" data-rating="5">Click me</div>
</div>

Answer 2

Ensure that your class is enclosed in quotation marks, and remember to include your jQuery event handlers within a document ready function:

$(document).ready(function() {
  $('.ratings_stars').on('click', function() {
    console.log('Hello');
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="rating">
  <div class="ratings_stars" data-rating="1">Click me</div>
  <div class="ratings_stars" data-rating="2">Click me</div>
  <div class="ratings_stars" data-rating="3">Click me</div>
  <div class="ratings_stars" data-rating="4">Click me</div>
  <div class="ratings_stars" data-rating="5">Click me</div>
</div>

Answer 3

Answer №2

Everything is now in order.

Just had to encase it in a DOMReady Event.

Appreciate the assistance from all of you.

$(function () {
$('.ratings_stars').on('click', function() {
    console.log('Greetings');
});
});

Answer 4

Everything is now in order.

Just had to encase it in a DOMReady Event.

Appreciate the assistance from all of you.

$(function () {
$('.ratings_stars').on('click', function() {
    console.log('Greetings');
});
});

Answer 5

Answer №3

Refer to MichaelvE's solution for the initial code implementation. In addition, please include the following snippet within your existing code:

$(document).ready(function() {
  $('.ratings_stars').on('click', function() {
    console.log('Hello');
  });
});

The

$(document).ready(function() {/* code to be executed */});

portion is crucial for allowing the DOM structure to fully load. The Document Object Model (DOM) serves as a representation of the HTML elements in memory, enabling us to dynamically modify it using JavaScript/jQuery. By internally assigning event handlers to all elements with the class rating_stars, JQuery facilitates interaction with these specific elements.

Executing JavaScript code prior to the complete DOM construction can result in errors, as JQuery attempts to bind an event handler to elements that have not yet been created.

Answer 6

Refer to MichaelvE's solution for the initial code implementation. In addition, please include the following snippet within your existing code:

$(document).ready(function() {
  $('.ratings_stars').on('click', function() {
    console.log('Hello');
  });
});

The

$(document).ready(function() {/* code to be executed */});

portion is crucial for allowing the DOM structure to fully load. The Document Object Model (DOM) serves as a representation of the HTML elements in memory, enabling us to dynamically modify it using JavaScript/jQuery. By internally assigning event handlers to all elements with the class rating_stars, JQuery facilitates interaction with these specific elements.

Executing JavaScript code prior to the complete DOM construction can result in errors, as JQuery attempts to bind an event handler to elements that have not yet been created.

Console not displaying any logs following the occurrence of an onClick event

Answer №1

Answer №2

Answer №3

Similar questions

What is the most streamlined way to send data from HTML forms using solely JavaScript?

Is there a way to switch out the WordPress page title for an image instead?

Insert HTML content into an iframe with a callback function

Guide to fetching and returning data from AJAX using a function

Validating the length of form inputs and selected items from a dropdown menu

Transforming a simple MySQL query into a structured nested JSON format

HTML5 Positioning Timeout

Angular failing to append hash to ng-href in browsers that do not support it

Can HTML Elements be used within a Contenteditable section?

Navigating through complex immutable entities

Stopping a JavaScript promise.all() based on a certain condition

What is the best way to incorporate these elements into my Bootstrap 5 navbar design?

Is it possible for numerous identical components to trigger the display of the identical modal on a single webpage?

Calculating a 30-minute interval between two given times using JavaScript/jQuery

Having trouble with Node.js executing commands in the console

The AWS API Gateway quickly times out when utilizing child_process within Lambda functions

How to create a loop in Selenium IDE for selecting specific values from a drop-down list?

Using async/await in a for loop | The await keyword can only be used inside an asynchronous function

Can other JavaScript event listeners be synchronized with an asynchronous event?

Retrieving the original state value after updating it with data from local storage