Javascript : change class attribute value in a tag-CodePudding

I have an html where I want to change with a javascript function the value of one class attribute.

Here is the html code :

<select name="client"  id="id_client" style="display : none "> 
    <option value="1109">Charles</option> 
    <option value="1108">Fred</option> 
    <option value="1107">Lionel</option> 
    <option value="1106">Robert</option> 
    <option value="1105">Mike</option>
</select>
<div >
    <button  data-dselect-text="Charles" type="button" data-bs-toggle="dropdown" aria-expanded="false">
      Charles
    </button>
    <div >
      <div >
        <input onkeydown="return event.key !== 'Enter'" onkeyup="dselectSearch(event, this, 'dselect-wrapper', 'form-select', false)" type="text"  placeholder="Search" autofocus="">
        <div  style="max-height:360px;overflow:auto">
          <button  data-dselect-value="1109" type="button" onclick="dselectUpdate(this, 'dselect-wrapper', 'form-select')">Charles</button>
          <button  data-dselect-value="1108" type="button" onclick="dselectUpdate(this, 'dselect-wrapper', 'form-select')">Fred</button>
          <button  data-dselect-value="1107" type="button" onclick="dselectUpdate(this, 'dselect-wrapper', 'form-select')">Lionel</button>
          <button  data-dselect-value="1106" type="button" onclick="dselectUpdate(this, 'dselect-wrapper', 'form-select')">Robert</button>
          <button  data-dselect-value="1105" type="button" onclick="dselectUpdate(this, 'dselect-wrapper', 'form-select')">Mike</button>
        </div>
        <div >No results found</div>
      </div>
    </div>
  </div>

How can I change value of this class to

<button  data-dselect-value="1109" type="button" onclick="dselectUpdate(this, 'dselect-wrapper', 'form-select')">Charles</button>

I did that but not sure that it is the right way

var old_selected = document.getElementsByClassName("dropdown-item active").className = "dropdown-item";
console.log(old_selected);

CodePudding user response：

There is more than one button with .dropdown-item and active classes, you need to use querySelectorAll and loop through and set the className

document.querySelectorAll(".dropdown-item.active").forEach(button => button.className = "dropdown-item");

document.querySelectorAll(".dropdown-item.active").forEach(button => button.className = "dropdown-item");

.dropdown-item.active {
  background-color: red;
  color: white;
}

<select name="client"  id="id_client" style="display : none "> 
    <option value="1109">Charles</option> 
    <option value="1108">Fred</option> 
    <option value="1107">Lionel</option> 
    <option value="1106">Robert</option> 
    <option value="1105">Mike</option>
</select>
<div >
    <button  data-dselect-text="Charles" type="button" data-bs-toggle="dropdown" aria-expanded="false">
      Charles
    </button>
    <div >
      <div >
        <input onkeydown="return event.key !== 'Enter'" onkeyup="dselectSearch(event, this, 'dselect-wrapper', 'form-select', false)" type="text"  placeholder="Search" autofocus="">
        <div  style="max-height:360px;overflow:auto">
          <button  data-dselect-value="1109" type="button" onclick="dselectUpdate(this, 'dselect-wrapper', 'form-select')">Charles</button>
          <button  data-dselect-value="1108" type="button" onclick="dselectUpdate(this, 'dselect-wrapper', 'form-select')">Fred</button>
          <button  data-dselect-value="1107" type="button" onclick="dselectUpdate(this, 'dselect-wrapper', 'form-select')">Lionel</button>
          <button  data-dselect-value="1106" type="button" onclick="dselectUpdate(this, 'dselect-wrapper', 'form-select')">Robert</button>
          <button  data-dselect-value="1105" type="button" onclick="dselectUpdate(this, 'dselect-wrapper', 'form-select')">Mike</button>
        </div>
        <div >No results found</div>
      </div>
    </div>
  </div>
How can I change value of this class to 

<button  data-dselect-value="1109" type="button" onclick="dselectUpdate(this, 'dselect-wrapper', 'form-select')">Charles</button>

CodePudding user response：

const btn = document.querySelector(".dropdown-item")
btn.classList.remove('active')

this should work for only the first button

the proper way to do it is to get all buttons and remove all of active class

const btns = document.querySelectorAll(".dropdown-item")
btns.forEach(button => button.classList.remove('active'))