Generate a loop specifically designed to execute the code following the menu in the script

Question

Generate a loop specifically designed to execute the code following the menu in the script

My website has the code snippet below:

let txt_com = document.querySelector(".text_user");
let num_com_user = document.querySelector(".massage_for_user");

txt_com.addEventListener("click", function() {
  if (this.classList.contains("num_com_user")) {
    this.classList = "num_com_user";
    num_com_user.style.display = "none";
  } else {
    this.classList = "num_com_user";
    num_com_user.style.display = "block";
  }

  return;
})

<div class="box_main">
  <div class="box-txt">
    <span class="text_user">click</span>
  </div>

  <span class="massage_for_user">No text found!</span>
</div>

The issue I am facing is that this code works only once and requires a page refresh for it to work again. What I actually want is for the menu to toggle open/close every time I click on the post.

javascript html css

Answer 1

Answer №1

Instead of using a loop, it is recommended not to replicate CSS functionality in JavaScript. Simply toggle a class rather than modifying the .style property.

A good practice is to create a utility class like .hidden to hide an element and then toggle that class on the desired element. Here's an example:

let txt_com = document.querySelector(".text_user");
let num_com_user = document.querySelector(".massage_for_user");

txt_com.addEventListener("click", function() {
  num_com_user.classList.toggle('hidden');
  
  // any additional code here will execute each time the menu is clicked
})

.hidden {
  display: none;
}

<div class="box_main">
  <div class="box-txt">
    <span class="text_user">click</span>
  </div>

  <span class="massage_for_user">No text found!</span>
</div>

Answer 2

Instead of using a loop, it is recommended not to replicate CSS functionality in JavaScript. Simply toggle a class rather than modifying the .style property.

A good practice is to create a utility class like .hidden to hide an element and then toggle that class on the desired element. Here's an example:

let txt_com = document.querySelector(".text_user");
let num_com_user = document.querySelector(".massage_for_user");

txt_com.addEventListener("click", function() {
  num_com_user.classList.toggle('hidden');
  
  // any additional code here will execute each time the menu is clicked
})

.hidden {
  display: none;
}

<div class="box_main">
  <div class="box-txt">
    <span class="text_user">click</span>
  </div>

  <span class="massage_for_user">No text found!</span>
</div>

Generate a loop specifically designed to execute the code following the menu in the script

Answer №1

Similar questions

The dropdown menu button stubbornly remains open and refuses to close

I am getting NaN as the output from my function, but I am unsure of the reason behind

What is the best way to launch a Popup window that spans from the top to the bottom of the screen?

Where should JSON data be sourced from when developing a service in AngularJS?

Retrieving device information through JavaScript, jQuery, or PHP

Delaying loops with JQuery Ajax

Altering the dimensions of Bootstrap's default navbar for a more compact look

Challenges with differentiating between addition and concatenation in Vue computed properties

Angular 2 ngFor generates a collection of rows and columns forming a single large column

Can the ::before selector be used in HTML emails?

Tips for implementing a jQuery plugin on specific elements within an HTML page

Android experiencing issues with dynamically loading Border XML

Ways to widen a selected drop-down menu outside the dialog box containing it

Ensuring a response is sent back only after a loop has completed in NodeJs

Seeking a breakdown of fundamental Typescript/Javascript and RxJs code

Update specific fields in a MySQL database using Express.js only if they are passed as parameters

Unable to move cursor in contenteditable section

Guide for implementing onclick event for info boxes in push pins on Bing Maps using ReactJS

Alter the content of a div depending on the values of three different elements

Determine the presence of an image by using a wildcard in the URL