I'm using bootstrap buttons, and in this case I have 5 different buttons with 5 different classes. When one of the buttons is clicked on, I want it to be the only one filled in, and the others to only be the outline. Here is how I currently do it:
$(".canvas_btn").on("click",function(){
for(var i = 0; i < $(".canvas_btn").length; i++){
document.getElementById($(".canvas_btn")[i].id).className = document.getElementById($(".canvas_btn")[i].id).className.replace("btn-outline-","btn-");
document.getElementById($(".canvas_btn")[i].id).className = document.getElementById($(".canvas_btn")[i].id).className.replace("btn-","btn-outline-");
}
document.getElementById(this.id).className = document.getElementById(this.id).className.replace("btn-outline","btn");
});
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="btn btn-outline-info canvas_btn" align="left" id="new_text_btn">Text</button>
<button class="btn btn-outline-secondary canvas_btn" align="left" id="new_audio_btn">Audio</button>
<button class="btn btn-outline-success canvas_btn" align="left" id="new_image_btn">Image</button>
<button class="btn btn-outline-danger canvas_btn" align="left" id="new_video_btn">Video</button>
<button class="btn btn-outline-warning canvas_btn" align="left" id="new_input_btn">Input</button>
It feels a bit odd the way I've done it - is there a more elegant way to do it? A way to use jQuery to make it tidier would be great!
I'm also not sure how I'm causing the error in the console - I think it's to do with the bootstrap script I call in, so don't know what I can do about that.