So, I'm new to coding, and I have been struggling to make a dropdown button turn green when you click the main button "Pronto". I've followed some steps from similar questions here, but they didn't work for me. No effects at all. Can you give me some insights?
HTML:
<div class="btn-group">
<button class="btn btn-default">Pronto</button>
<button type="button" class="btn btn-default dropdown-toggle dropdown-icon" data-toggle="dropdown" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu" role="menu" style="">
<a class="dropdown-item" href="#">Pronto</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Item Não Disponível</a>
</div>
JavaScript:
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl)
})
var registerAccountButton = document.getElementById('registerAccountButton');
var registerAccountModal = new bootstrap.Modal(document.getElementById('registerAccountModal'), {
keyboard: false
})
registerAccountButton.addEventListener('click', function () {
registerAccountModal.toggle();
})
$('input[type="button"]').click(function(){
$('input[type="button"].green').removeClass('green')
$(this).addClass('green');
});
CSS:
.green {
background-color: greenyellow;
}
You can even see I tried creating a class and calling it, but didn't work. What am I missing?
Your problem is the following code
$('input[type="button"]').click(function(){
$('input[type="button"].green').removeClass('green')
$(this).addClass('green');
});
You have created your buttons using the <button> in html, but in js you are referencing them using <input type="button"> which is not present & hence is ignored by jQuery.
Your code should be something like follows, to make the dropdown button green, when the Pronto button is clicked:
$('#prontoButton').on('click', function(evt) {
$('.dropdownButton').addClass('green');
});