PHPFixing
  • Privacy Policy
  • TOS
  • Ask Question
  • Contact Us
  • Home
  • PHP
  • Programming
  • SQL Injection
  • Web3.0

Saturday, October 15, 2022

[FIXED] How to target divs with other content using DOM

 October 15, 2022     dom, javascript     No comments   

Issue

I have a bunch of divs with some text in them. I am trying to create a simple function that targets divs with a specific text and gives them a class. I also want to give the divs with other text a common class.

I have managed to target the divs with the specific texts, but I cant figure out how to target the divs with other texts.

This is the HTML

<h1>The divs</h1>

  <div>High</div>
  <div>Low</div>
  <div>Medium</div>

  <div>Hit 'em high</div>
  <div>Medium rare</div>

  <div>A funky name</div>

and this is the function

const divs = document.querySelectorAll('div');
function classChanger () {
    for (let i = 0; i < divs.length; i++) {
        if (divs[i].textContent === 'High') {
            divs[i].classList.add('high');
        } if (divs[i].textContent === 'Medium') {
            divs[i].classList.add('medium');
        } if (divs[i].textContent === 'Low') {
            divs[i].classList.add('low');
        } if (divs[i].textContent === 'anything') {
            divs[i].classList.add('none');
        } 
    }
};

classChanger();

I have tried to use several more if statemets with !== 'High' and so on, but they just overwrite the previous code.

So I am just wondering, how do I target the last three divs and give them the class none? I have tried googling but I dont think im googling the right question, thats why I am asking here.


Solution

You can add High, Medium, and Low to an array. As you loop over the elements check to see if array includes the text (and set the class to the lowercase version of the text), otherwise add a none class.

const divs = document.querySelectorAll('div');

const range = ['High', 'Medium', 'Low'];

function classChanger() {
  for (let i = 0; i < divs.length; i++) {
    const text = divs[i].textContent;
    if (range.includes(text)) {
      divs[i].classList.add(text.toLowerCase());
    } else {
      divs[i].classList.add('none');
    }
  }
}

classChanger();
.high { color: red; }
.medium { color: orange; }
.low { color: yellow; }
.none { color: darkgray; }
<div>High</div>
<div>Low</div>
<div>Medium</div>

<div>Hit 'em high</div>
<div>Medium rare</div>

<div>A funky name</div>



Answered By - Andy
Answer Checked By - Terry (PHPFixing Volunteer)
  • Share This:  
  •  Facebook
  •  Twitter
  •  Stumble
  •  Digg
Newer Post Older Post Home

0 Comments:

Post a Comment

Note: Only a member of this blog may post a comment.

Total Pageviews

Featured Post

Why Learn PHP Programming

Why Learn PHP Programming A widely-used open source scripting language PHP is one of the most popular programming languages in the world. It...

Subscribe To

Posts
Atom
Posts
Comments
Atom
Comments

Copyright © PHPFixing