Ways to adjust text color after clicking on an element

Question

Ways to adjust text color after clicking on an element

Just a heads up, I didn't write all of the web-page code so I'm not exactly sure what pdiv is. But I want to see if I can fix this small issue [making text color change when clicked on to show which section you're reading].

This particular section looks like this:

https://i.sstatic.net/EDem4.png

and when you click on it, it will display all menu sections:

https://i.sstatic.net/WTa4o.png

function menuShowPol(pdiv){
  
          if(document.getElementById('menu_pol_div'+pdiv).
                                        style.display=="none") { 
          document.getElementById('menu_pol_div'+pdiv)
                              .style.display = "inline-block";
      } else {
          document.getElementById('menu_pol_div'+pdiv)
                                      .style.display = "none";
      }
      }
      function changeColor(pdiv){
      {
        document.getElementById('menu_pol_div'+pdiv)
                          .style.color = "#ff0000"; // forecolor
        document.getElementById('menu_pol_div'+pdiv)
                 .style.backgroundColor = "#ff0000"; // backcolor
      }

 if($showpol==1){
        $menutext .= "<div id=\"country_menu_report_name\"
                        onclick=\"menuShowPol('".$pol."');
                        changeColor('".$pol."'); return 
                                  false;\">".$thispol."</div>\n";

Is there any way to achieve this using only CSS? Or if JavaScript is required, can you offer some assistance? Thank you.

javascript jquery html css

Answer 1

Answer №1

If you pass "this" to your events, it will provide direct access to the element that was interacted with. Here's a simple version (as suggested by others, using CSS classes for different div states is recommended).

Take note of the onclick="changeColor(this)" in the header divs. Additionally, I connected country_menu_report_X to menu_pol_X, which may not be the best practice, but it gets the job done and is basic.

function changeColor(pdiv){
   var myid = pdiv.id;
   var otherid = myid.replace("country_menu_report_", "menu_pol_");
   var otherdiv = document.getElementById(otherid);
   var toggle = otherdiv.style.display == "none";
   if(!toggle){
       pdiv.style.color = "#0000ff"; // forecolor
       pdiv.style.backgroundColor = "#ccccff"; // backcolor
      otherdiv.style.display = "none";
   }else{
       pdiv.style.color = "#000000"; // forecolor
       pdiv.style.backgroundColor = "#aaeeaa"; // backcolor
       otherdiv.style.backgroundColor = "#ccffcc"; // backcolor
       otherdiv.style.display = "block";
   }
}

<div id="country_menu_report_a" onclick="changeColor(this)" style="user-select:none; cursor:pointer; color:#0000ff; background-color:#ccccff;" >test div A. click me</div>
<div id="menu_pol_a"style="display:none" >menu item A</div>
<div id="country_menu_report_b" onclick="changeColor(this)" style="user-select:none; cursor:pointer; color:#0000ff; background-color:#ccccff;" >test div B. click me</div>
<div id="menu_pol_b" style="display:none" >menu item B</div>

Answer 2

If you pass "this" to your events, it will provide direct access to the element that was interacted with. Here's a simple version (as suggested by others, using CSS classes for different div states is recommended).

Take note of the onclick="changeColor(this)" in the header divs. Additionally, I connected country_menu_report_X to menu_pol_X, which may not be the best practice, but it gets the job done and is basic.

function changeColor(pdiv){
   var myid = pdiv.id;
   var otherid = myid.replace("country_menu_report_", "menu_pol_");
   var otherdiv = document.getElementById(otherid);
   var toggle = otherdiv.style.display == "none";
   if(!toggle){
       pdiv.style.color = "#0000ff"; // forecolor
       pdiv.style.backgroundColor = "#ccccff"; // backcolor
      otherdiv.style.display = "none";
   }else{
       pdiv.style.color = "#000000"; // forecolor
       pdiv.style.backgroundColor = "#aaeeaa"; // backcolor
       otherdiv.style.backgroundColor = "#ccffcc"; // backcolor
       otherdiv.style.display = "block";
   }
}

<div id="country_menu_report_a" onclick="changeColor(this)" style="user-select:none; cursor:pointer; color:#0000ff; background-color:#ccccff;" >test div A. click me</div>
<div id="menu_pol_a"style="display:none" >menu item A</div>
<div id="country_menu_report_b" onclick="changeColor(this)" style="user-select:none; cursor:pointer; color:#0000ff; background-color:#ccccff;" >test div B. click me</div>
<div id="menu_pol_b" style="display:none" >menu item B</div>

Answer 3

Answer №2

From my perspective, I believe When attempting to click the button

$menutext .= "<div id=\"country_menu_report_name\" onclick=\"menuShowPol('".$pol."');changeColor('".$pol."'); return false;\">".$thispol."</div>\n";

The function should target the exact same button

Check the function that is searching for an element with the ID:

document.getElementById('menu_pol_div'+pdiv).style.display = "inline-block";

You must search for the same ID in this line:

document.getElementById('country_menu_report_name\')

or $menutext .= "".$thispol."\n";

and ensure that "pvid" is included in the ID: for example

for

$menutext .= "<div id=\"country_menu_report_name\" onclick=\"menuShowPol('".$pol."');changeColor('".$pol."'); return false;\">".$thispol."</div>\n";

you can use:

pvid = "report_name\"
document.getElementById('country_menu_'+pvid)

Answer 4

From my perspective, I believe When attempting to click the button

$menutext .= "<div id=\"country_menu_report_name\" onclick=\"menuShowPol('".$pol."');changeColor('".$pol."'); return false;\">".$thispol."</div>\n";

The function should target the exact same button

Check the function that is searching for an element with the ID:

document.getElementById('menu_pol_div'+pdiv).style.display = "inline-block";

You must search for the same ID in this line:

document.getElementById('country_menu_report_name\')

or $menutext .= "".$thispol."\n";

and ensure that "pvid" is included in the ID: for example

for

$menutext .= "<div id=\"country_menu_report_name\" onclick=\"menuShowPol('".$pol."');changeColor('".$pol."'); return false;\">".$thispol."</div>\n";

you can use:

pvid = "report_name\"
document.getElementById('country_menu_'+pvid)

Answer 5

Answer №3

In my approach, I define two CSS classes as follows:

.read{
   color: red;
}

.unread {
   color: blue;
}

To implement this, my code would look something like this:

function changeColor(currentDiv){
    // Remove 'read' class from all divs.
    var divs = document.getElementsByClassName('read');
    for(var i=0; i<divs.length; i++){
        divs[i].classList.remove('read');
    }
    // Add 'read' class to the current div.
    currentDiv.classList.add('read');
}

Answer 6

In my approach, I define two CSS classes as follows:

.read{
   color: red;
}

.unread {
   color: blue;
}

To implement this, my code would look something like this:

function changeColor(currentDiv){
    // Remove 'read' class from all divs.
    var divs = document.getElementsByClassName('read');
    for(var i=0; i<divs.length; i++){
        divs[i].classList.remove('read');
    }
    // Add 'read' class to the current div.
    currentDiv.classList.add('read');
}

Ways to adjust text color after clicking on an element

Answer №1

Answer №2

Answer №3

Similar questions

AngularJS supports asynchronous validation on blur

Transform or retrieve information from input into unformatted text

Learn the process of automatically copying SMS message codes to input fields in Angular17

The app is having trouble loading in Node because it is unable to recognize jQuery

What is the best way to determine if two external values are equal within a mongodb criteria object?

Guide on sending a message to a specific channel using Discord.js version 13 with TypeScript

Extract information from a JSON string and present it on the screen

A guide to activating an input field based on the value of another input field in AngularJs

What is the method for retrieving a value with a designated key?

The HTML table fails to refresh after an Ajax request has been made

Looking for a skilled JavaScript expert to help create a script that will automatically redirect the page if the anchor is changed. Any t

How to showcase base64 encoded images in pug (jade) with node.js

ReactJS - Unable to access property of undefined object

Stop the back button from working on a jQuery Mobile webpage

By employing the $watch method, the table disappears from the div element

Migration processes encountering delays due to running nodes

I am in need of a customized 'container' template that will display MyComponent based on a specific condition known as 'externalCondition'. MyComponent includes the usage of a Form and formValidation functionalities

The Angular Universal error arises due to a ReferenceError which indicates that the MouseEvent is not

Guide to executing API PATCH request on the server for a system that approves outings?

What's the best way to constrain a draggable element within the boundaries of its parent using right and bottom values?