Tips for executing a function on a specific class selector using the document.getElementsByClassName method

Question

Tips for executing a function on a specific class selector using the document.getElementsByClassName method

When I click on a specific class, I want to implement a fade-out function in JavaScript. However, I am struggling to make a particular class fade out successfully. I attempted to use the this keyword, but it seems like I might be using it incorrectly because I keep getting an error saying that it is not defined.

<div class="opaque">
<h3>Fade Heading</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.</p>
</div>

<div class="opaque">
<h3>Fade Heading</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.</p>
</div>

<div class="opaque">
<h3>Fade Heading</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.</p>
</div>

 var o =1;
 var r = 0.1;
 var a;
 var counter;
 var e;


 function myFunction(e)
{
 e = this.style.opacity = o;
console.log(this.style.opacity);
counter = setInterval(fadeO(e),5000);



}

function execute()
{  


  a = document.getElementsByClassName('opaque');
  for( var i = 0; i< a.length; i++)
  {
    a[i].addEventListener('click',myFunction(e));
  }

}//end execute

function fadeO(e)
{
 this.a = document.getElementsByClassName('opaque');


if(e.style.opacity <=0)
{
 clearInterval(counter);
}
else{
 e.style.opacity = o ;
 console.log(e.style.opacity);
  o -=0.1;

}
}

window.onload = function()
{

execute();

}

javascript html css

Answer 1

Answer №1

There are a couple of issues here, namely in the usage of addEventListener and setInterval(). Instead of passing function references, you are directly invoking the handlers.

var o = 1;
var r = 0.1;
var a;
var counter;
var e;


function myFunction(e) {
  this.style.opacity = 1;
  console.log(this.style.opacity);
  counter = setInterval(fadeO.bind(this), 100);//remember to pass a function reference to `interval()` without invoking it by adding (), in this modification, instead of passing the element reference as an argument we are passing it as the `this` reference using Function.bind()
}

function execute() {
  a = document.getElementsByClassName('opaque');
  for (var i = 0; i < a.length; i++) {
    a[i].addEventListener('click', myFunction);//ensure to pass the handler reference, avoiding invocation with `()`
  }

} //end execute

function fadeO() {
  if (this.style.opacity <= 0) {
    clearInterval(counter);
  } else {
    this.style.opacity = o;
    console.log(this.style.opacity);
    o -= 0.1;
  }
}

window.onload = function() {
  execute();
}

<div class="opaque">
  <h3>Fade Heading</h3>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium
    quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.</p>
</div>

<div class="opaque">
  <h3>Fade Heading</h3>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium
    quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.</p>
</div>

<div class="opaque">
  <h3>Fade Heading</h3>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium
    quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.</p>
</div>

_{Note: This solution may require additional modifications to handle multiple clicks and similar functionalities}

Answer 2

There are a couple of issues here, namely in the usage of addEventListener and setInterval(). Instead of passing function references, you are directly invoking the handlers.

var o = 1;
var r = 0.1;
var a;
var counter;
var e;


function myFunction(e) {
  this.style.opacity = 1;
  console.log(this.style.opacity);
  counter = setInterval(fadeO.bind(this), 100);//remember to pass a function reference to `interval()` without invoking it by adding (), in this modification, instead of passing the element reference as an argument we are passing it as the `this` reference using Function.bind()
}

function execute() {
  a = document.getElementsByClassName('opaque');
  for (var i = 0; i < a.length; i++) {
    a[i].addEventListener('click', myFunction);//ensure to pass the handler reference, avoiding invocation with `()`
  }

} //end execute

function fadeO() {
  if (this.style.opacity <= 0) {
    clearInterval(counter);
  } else {
    this.style.opacity = o;
    console.log(this.style.opacity);
    o -= 0.1;
  }
}

window.onload = function() {
  execute();
}

<div class="opaque">
  <h3>Fade Heading</h3>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium
    quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.</p>
</div>

<div class="opaque">
  <h3>Fade Heading</h3>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium
    quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.</p>
</div>

<div class="opaque">
  <h3>Fade Heading</h3>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium
    quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.</p>
</div>

_{Note: This solution may require additional modifications to handle multiple clicks and similar functionalities}

Answer 3

Answer №2

Can you explain the significance of variable e in the following code snippet?

for( var i = 0; i< a.length; i++)
  {
    a[i].addEventListener('click',myFunction(e));
  }

Consider the revised code below:

for( var i = 0; i< a.length; i++)
  {
    a[i].addEventListener('click',myFunction, false);
  }

Further insights can be found here. The context of this is determined by how your function is invoked. In this scenario, when called correctly, this should correspond to the value of your e. For more details, refer to this resource.

Answer 4

Can you explain the significance of variable e in the following code snippet?

for( var i = 0; i< a.length; i++)
  {
    a[i].addEventListener('click',myFunction(e));
  }

Consider the revised code below:

for( var i = 0; i< a.length; i++)
  {
    a[i].addEventListener('click',myFunction, false);
  }

Further insights can be found here. The context of this is determined by how your function is invoked. In this scenario, when called correctly, this should correspond to the value of your e. For more details, refer to this resource.

Tips for executing a function on a specific class selector using the document.getElementsByClassName method

Answer №1

Answer №2

Similar questions

"Place text at the center of a div that is rotated

Steps to sending an email to an administrator using PHP and jQuery

Injecting a controller into an AngularJS module within an anonymous function

Exploring Browser History using Cascading Style Sheets

Utilizing the position relative property with Firefox browser

How to assign various column values to a PHP array in JSON format from a MySQL database

jQuery checkbox toggles multiple divs instead of targeting specific ones

Parse multiple JSON files, manipulate their contents, and store the updated data

"Troubleshooting: Why Won't insertAfter Function Work with

How can AJAX be utilized to show search results dynamically?

What is the method to extract a value from the $emit payload using Vue.js?

The checkbox generated from the JSON is failing to display the alert when it is clicked

Is there a way to convert HTML into a structured DOM tree while considering its original source location?

Convert a JSON array with a single element into a valid JavaScript object

The iFrame is set to a standard width of 300 pixels, with no specific styling to dictate the size

Having difficulty modifying styles within the React Material-UI app bar component

Do not directly change a prop - VueJS Datatable

Changing Text in React Native is Customizable

I'm having trouble getting this angular expression to cooperate in Plunker. Can anyone shed some light on why {{ 843 / 42

Every time I use Axios with NextJS, I keep getting a frustrating 405 method not allowed