October 6, 20205 yr Hello friends, I am trying to make a button color switcher but somehow its not working although i see no error in the console here is the code <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script> </head> <body> <div class ="container text-center"> <h2 id="changeMyColor">Challenge4: Change Color of buttons</h2> <br><br><br> <div class="row" style="border:1px solid black;padding:10px;min-height:80px;" id =""> <div class="col-md-2 col-xs-12"> <form> <div class="form-group"> <select class="form-control" name="backdrop" id="background" onchange="colorChange(this)"> <option>Random</option> <option>Red</option> <option>Green</option> <option>Reset</option> </select> </div> </form> </div> <div class="col-md-10 col-xs-12"> <div class="row"> <div class="col-md-3"> <button class="btn btn-info">Whoa!</button> </div> <div class="col-md-3"> <button class ="btn btn-danger">Yahoo!</button> </div> <div class="col-md-3"> <button class="btn btn-warning">Google!</button> </div> <div class="col-md-3"> <button class="btn btn-success">Facebook!</button> </div> </div> </div> </div> </div><!--container end--> </body> </html> and here is the javascript main.js //Challenge 4 color change let all_buttons = document.getElementsByTagName('button'); // console.log(all_buttons); //my_buttons = Array.from(all_buttons); // console.log(my_buttons); let copyAllButtons = []; for(let i = 0;i< all_buttons.length;i++){ copyAllButtons.push(all_buttons[i].classList[1]); } function colorChange(buttonThingy){ console.log(buttonThingy.value); if(buttonThingy.value === 'red'){ buttonsRed(); }else if(buttonThingy.value === 'green'){ //buttonsGreen(); }else if(buttonThingy.value === 'random'){ //buttonsRandom(); }else if(buttonThingy.value === 'reset'){ //buttonsReset(); } } function buttonsRed(){ /* copyAllButtons.forEach(function(button){ button.classList.remove(all_buttons[i].classList[1]); button.classList.add('btn-danger'); }); */ for(let i = 0; i<all_buttons.length;i++) { all_buttons[i].classList.remove(all_buttons[i].classList[1]); all_buttons[i].classList.add('btn-danger'); } } console.log(copyAllButtons); All i want to do is replace the second btn class in each button and replace with btn-danger but somehow its not working
Create an account or sign in to comment