How to change classes with using JavaScript which has no ID?

Question

I am in trouble with changing the value of this code. In this code, I wanna change the class "selected" with a number set by JavaScript code.

Briefly speaking, I wanna reach the "li" items and give let say: 4 as a value, and it will add "selected" to the related class and will delete the previous one.

Edit: Additionally, it should also change the < div class="select-box">1< /div> value accordingly.

Here is the code:

<div class="select-container xl" id="_channel">
  <label class="select-title T_channel xl">Channel:</label>&nbsp;
  <div class="tp-select">
  <div class="select-box">1</div>
  <div class="select-icon-container"><span class="select-icon"></span></div>
    <ul class="drop-down" style="max-height: 204.55px; display: none;">
      <li style="cursor: default; border-bottom: 1px solid rgb(204, 204, 204);"></li>
      <li data-val="0" class="option-item">Auto</li>
      <li data-val="1" class="option-item selected">1</li>
      <li data-val="2" class="option-item">2</li>
      <li data-val="3" class="option-item">3</li>
      <li data-val="4" class="option-item">4</li>
      <li data-val="5" class="option-item">5</li>
      <li data-val="6" class="option-item">6</li>
      <li data-val="7" class="option-item">7</li>
      <li data-val="8" class="option-item">8</li>
      <li data-val="9" class="option-item">9</li>
      <li data-val="10" class="option-item">10</li>
      <li data-val="11" class="option-item">11</li>
      <li data-val="12" class="option-item">12</li>
      <li data-val="13" class="option-item">13</li>
    </ul>
  </div>
</div>

Thanks;

document.getElementsByClassName("selected")? document.querySelector(".selected")? — VLAZ
– VLAZ, Commented Sep 28, 2020 at 18:44
Hi, thanks for your answer. This line of code only selects the code. Not removing the previous one or not adding a new one accordingly. — user11961192
– user11961192, Commented Sep 28, 2020 at 18:50

Osman Durdag · Accepted Answer · 2020-09-28 20:24:00Z

0

let x = document.querySelector(".select-box").innerText;

let options = document.querySelectorAll("li.option-item");
options.forEach(item => {
  if (item.getAttribute("data-val") == x){
      item.classList.add("selected");
  }
  else{
      item.classList.remove("selected");
  }
});

console.log(options);

<div class="select-container xl" id="_channel">
  <label class="select-title T_channel xl">Channel:</label>&nbsp;
  <div class="tp-select">
  <div class="select-box">4</div>
  <div class="select-icon-container"><span class="select-icon"></span></div>
    <ul class="drop-down" style="max-height: 204.55px; display: none;">
      <li style="cursor: default; border-bottom: 1px solid rgb(204, 204, 204);"></li>
      <li data-val="0" class="option-item">Auto</li>
      <li data-val="1" class="option-item selected">1</li>
      <li data-val="2" class="option-item">2</li>
      <li data-val="3" class="option-item">3</li>
      <li data-val="4" class="option-item">4</li>
      <li data-val="5" class="option-item">5</li>
      <li data-val="6" class="option-item">6</li>
      <li data-val="7" class="option-item">7</li>
      <li data-val="8" class="option-item">8</li>
      <li data-val="9" class="option-item">9</li>
      <li data-val="10" class="option-item">10</li>
      <li data-val="11" class="option-item">11</li>
      <li data-val="12" class="option-item">12</li>
      <li data-val="13" class="option-item">13</li>
    </ul>
  </div>
</div>

edited Sep 28, 2020 at 20:24

answered Sep 28, 2020 at 19:01

Osman Durdag

9652 gold badges8 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

user11961192 Over a year ago

Hi, this actually worked pretty fine for the purpose. And it is my mistake to mention about one more issue -I will edit the question- It should also change the <div class="select-box">1</div> with the value of x

Osman Durdag Over a year ago

I am waiting for your comeback, is your problem solved ?

user11961192 Over a year ago

Hi @Osman Durdag. Thank you so much for your answers. It solved my problem, but I needed to add some more lines according to my project structure.

Luc Mosser · Accepted Answer · 2020-09-28 18:50:45Z

0

you should use getElementsByClassName

So your code will look something like

document.getElementsByClassName("selected")

edited Sep 28, 2020 at 18:50

answered Sep 28, 2020 at 18:48

Luc Mosser

532 silver badges12 bronze badges

1 Comment

user11961192 Over a year ago

Hi, thanks for your answer. This line of code only selects the code. Not removing the previous one or not adding a new one accordingly.

OregonTrail · Accepted Answer · 2020-09-28 18:50:48Z

0

It sounds like you are looking for nth-child

For example

var selectedElement = document.querySelector(".drop-down:nth-child(4)");
selectedElement.classList.add('selected');

answered Sep 28, 2020 at 18:50

OregonTrail

9,0897 gold badges46 silver badges63 bronze badges

Comments

David Bradshaw · Accepted Answer · 2020-09-28 18:54:44Z

0

Add an ID to the ul and then select the nth child element.

const selected = 4
documentGetElementById(‘myUl’)
  .childNodes[selected-1]
  .classList
  .add(‘selected’)

answered Sep 28, 2020 at 18:54

David Bradshaw

13.2k3 gold badges45 silver badges76 bronze badges

Comments

Barmar · Accepted Answer · 2020-09-28 18:55:03Z

0

Use a query selector that matches the class and data-val value.

// Remove the old selected item
document.querySelectorAll(".option-item.selected").forEach(item => item.classList.remove("selected"));

// Select the desired item
document.querySelector(".option-item[data-val='4']").classList.add("selected");

.option-item.selected {
  color: red;
}

<div class="select-container xl" id="_channel">
  <label class="select-title T_channel xl">Channel:</label>&nbsp;
  <div class="tp-select"><div class="select-box">1</div>
  <div class="select-icon-container"><span class="select-icon"></span></div>
    <ul class="drop-down" style="max-height: 204.55px;">
      <li style="cursor: default; border-bottom: 1px solid rgb(204, 204, 204);"></li>
      <li data-val="0" class="option-item">Auto</li>
      <li data-val="1" class="option-item selected">1</li>
      <li data-val="2" class="option-item">2</li>
      <li data-val="3" class="option-item">3</li>
      <li data-val="4" class="option-item">4</li>
      <li data-val="5" class="option-item">5</li>
      <li data-val="6" class="option-item">6</li>
      <li data-val="7" class="option-item">7</li>
      <li data-val="8" class="option-item">8</li>
      <li data-val="9" class="option-item">9</li>
      <li data-val="10" class="option-item">10</li>
      <li data-val="11" class="option-item">11</li>
      <li data-val="12" class="option-item">12</li>
      <li data-val="13" class="option-item">13</li>
    </ul>
  </div>
</div>

answered Sep 28, 2020 at 18:55

Barmar

789k57 gold badges555 silver badges669 bronze badges

1 Comment

user11961192 Over a year ago

Hi, this actually worked pretty fine for the purpose. And it is my mistake to mention about one more issue -I will edit the question- It should also change the <div class="select-box">1</div> with the value accordingly

Vikrant · Accepted Answer · 2020-09-28 18:59:22Z

0

Since you want all the li elements with "selected" and then modify the class of a specific element. A js code like this should work.

//remove the selected class first 
document.querySelector("selected").className = "option-item"

//get all li items with class option-item
listOfLi = document.querySelectorAll("li.option-item")


selectedElement = listOfLi.filter(e=>e.data-val==4)//whatever value you want to match it with

selectedElement.className = whatever classes you want to assign.(eg."selected")

edited Sep 28, 2020 at 18:59

answered Sep 28, 2020 at 18:50

Vikrant

3401 silver badge7 bronze badges

Collectives™ on Stack Overflow

How to change classes with using JavaScript which has no ID?

6 Answers 6

3 Comments

1 Comment

Comments

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

3 Comments

1 Comment

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related