I am having difficulty changing the background color of a selected button after displaying its value in a textbox. The code below successfully displays the button value in the textbox, but I can't figure out how to change the 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><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>