在文本框中显示按钮的值并更改 javascript 中选定按钮的颜色

Question

I am trying to display the button value in the textbox and I want to change the background color of the selected button. Here is the code. Displaying the button value in the textbox works fine but how to change background color of the selected button

<div class="input-group">
      <input type="text" id="display" class="form-control" aria-label="Text input with dropdown button" >
      <div class="input-group-btn">
      
    
        <div class="dropdown-menu dropdown-menu-right">
          <button type="button" class="dropdown-item" value="1000">1000</button>
          
          <button type="button" class="dropdown-item" value="2000">2000</button>
          <div role="separator" class="dropdown-divider"></div>
          <button type="button" class="dropdown-item" value="3000">3000</button>
          <div role="separator" class="dropdown-divider"></div>
          <button type="button" class="dropdown-item" option value="4000">4000</button>
        
        </div>
      </div>
    </div>
  </div>
</div><br><br>
<input name="submit" type ="submit" value="click to submit">
<input name="reset" type ="reset" value="Reset">
</fieldset>
</form>

<script type="text/javascript">
var buttons = document.querySelectorAll('.dropdown-item')
var textbox = document.getElementById('display')

for (let i=0; i < buttons.length; i++) {
    buttons[i].addEventListener("click", function(e) {
        textbox.value = e.target.value
    })
}
</script>

Answer 1

You can use a CSS class to highlight the active button. You can reference the clicked button using the this keyword in the event handler to add the class. To remove the class from all buttons you can use the buttons collection.

If you put the latter logic in to its own function, then you can also call it on the reset event of the form.

Try this:

 let form = document.querySelector('#yourForm'); let buttons = document.querySelectorAll('.dropdown-item'); let textbox = document.getElementById('display'); let setAllButtonsInactive = () => buttons.forEach(btn => btn.classList.remove('active')); buttons.forEach(btn => { btn.addEventListener("click", function(e) { textbox.value = e.target.value; setAllButtonsInactive(); this.classList.add('active'); }) }); form.addEventListener('reset', setAllButtonsInactive);

 button.active { background-color: #C00; color: #FFF; }

 <form id="yourForm"> <fieldset> <div> <div> <div class="input-group"> <input type="text" id="display" class="form-control" aria-label="Text input with dropdown button"> <div class="input-group-btn"> <div class="dropdown-menu dropdown-menu-right"> <button type="button" class="dropdown-item" value="1000">1000</button> <button type="button" class="dropdown-item" value="2000">2000</button> <div role="separator" class="dropdown-divider"></div> <button type="button" class="dropdown-item" value="3000">3000</button> <div role="separator" class="dropdown-divider"></div> <button type="button" class="dropdown-item" option value="4000">4000</button> </div> </div> </div> </div> </div><br><br> <input name="submit" type="submit" value="click to submit"> <input name="reset" type="reset" value="Reset"> </fieldset> </form>