Develop Reference

How to do Button Group selected and change color?

I need to design buttons (I'm using bootstrap) in the Blazor project. I have 2 button groups on one Razor page. 3 to 4 buttons in each group. I want to use Javascript to change the color button which is onclick function.
User will click any button from group 1 (when clicking change color to green) and click the button from group 2 without deselecting button from group 1.
The onclick call need to be here <div class="btn-group"> because I already have onclick on my button<button type="button" class="btn btn-primary" #onclick="() => UpdateTheChart(13)">#Language.T37</button>
I have tried :focus in CSS but only 1 button can be select.
This is my code, I take out the onclick in button for test purposes.
.btn:hover {
font-weight: bold;
color: white;
/*green*/
background-color: #85c995;
}
<div class="row">
<div class="column" style="width:30%">
<div class="btn-group">
<button type="button" class="btn btn-primary" style="outline-color:red; ">Sunday</button>
<button type="button" class="btn btn-primary">Tuesday</button>
<button type="button" class="btn btn-primary">Friday</button>
</div>
</div>
<div class="column" style="width:70%">
<div class="btn-group">
<button type="button" class="btn btn-primary">9 am</button>
<button type="button" class="btn btn-primary">2 pm</button>
<button type="button" class="btn btn-primary">5 pm</button>
<button type="button" class="btn btn-primary">8 pm</button>
</div>
</div>
</div>

function switch_to_green(el){
//Check clicked button is on the same group
if(el.parentElement.getAttribute("data-group") == 1){
//Get all buttons of group 1
let g1_buttons = document.querySelectorAll('#group1 .btn');
for(let i =0; i<g1_buttons.length;i++){
//Remove green color from unselected buttons
g1_buttons[i].classList.remove('green');
}
}else{
//Get all buttons of group 2
let g2_buttons = document.querySelectorAll('#group2 .btn');
for(let i =0; i<g2_buttons.length;i++){
//Remove green color from unselected buttons
g2_buttons[i].classList.remove('green');
}
}
//Add green color to the only selected one
el.classList.add('green');
}
.btn:hover {
font-weight: bold;
color: white;
/*green*/
background-color: #85c995;
}
.btn.green{
color: white;
/*green*/
background-color: #85c995;
}
<div class="row">
<div class="column" style="width:30%">
<div class="btn-group" id="group1" data-group="1">
<button type="button" class="btn btn-primary" style="outline-color:red; " onclick="switch_to_green(this)">Sunday</button>
<button type="button" class="btn btn-primary" onclick="switch_to_green(this)">Tuesday</button>
<button type="button" class="btn btn-primary" onclick="switch_to_green(this)">Friday</button>
</div>
</div>
<div class="column" style="width:70%">
<div class="btn-group" id="group2" data-group="2">
<button type="button" class="btn btn-primary" onclick="switch_to_green(this)">9 am</button>
<button type="button" class="btn btn-primary" onclick="switch_to_green(this)">2 pm</button>
<button type="button" class="btn btn-primary" onclick="switch_to_green(this)">5 pm</button>
<button type="button" class="btn btn-primary" onclick="switch_to_green(this)">8 pm</button>
</div>
</div>
</div>

Uniform vertical stretch single column contents in bootstrap

I'm trying to get several buttons to vertically stretch to the size of the container, but I can't figure out how I did it before. I've tried all of the possibilities on https://getbootstrap.com/docs/4.0/utilities/flex/ (like align-items-stretch, align-self-stretch, align-content-stretch, but none seem to do anything for single column vertical stretching, at least how I implemented them. How is it done? Thanks!
(https://codepen.io/jasonws/pen/poyYMpz)
<div class="container mt-3">
<div class="d-flex align-content-stretch border" style="height:150px; width:200px; flex-direction: column">
<button type="button" class="btn btn-primary my-1">Flex item 1</button>
<button type="button" class="btn btn-primary my-1">Flex item 2</button>
<button type="button" class="btn btn-primary my-1">Flex item 3</button>
</div>
</div>

Just remove the other things from your d-flex class
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container mt-3">
<div class="border" style="display: grid">
<button type="button" class="btn btn-primary my-1 m-2">Flex item 1</button>
<button type="button" class="btn btn-primary my-1 m-2 ">Flex item 2</button>
<button type="button" class="btn btn-primary my-1 m-2 ">Flex item 3</button>
</div>
</div>

Bootstrap 4 Button Group wrapping fix border-radius

I'm using Bootstrap 4.3.1 if that makes any difference.
I have a button group that looks like this:
<div class="row mt-3">
<div class="col text-center">
<div id="alphabetGroup" class="btn-group flex-wrap" role="group">
<button id="btnHash" type="button" class="btn btn-outline-dark">#</button>
<button id="btnA" type="button" class="btn btn-outline-dark">A</button>
<button id="btnB" type="button" class="btn btn-outline-dark">B</button>
<button id="btnC" type="button" class="btn btn-outline-dark">C</button>
<button id="btnD" type="button" class="btn btn-outline-dark">D</button>
<button id="btnE" type="button" class="btn btn-outline-dark">E</button>
<button id="btnF" type="button" class="btn btn-outline-dark">F</button>
<button id="btnG" type="button" class="btn btn-outline-dark">G</button>
<button id="btnH" type="button" class="btn btn-outline-dark">H</button>
<button id="btnI" type="button" class="btn btn-outline-dark">I</button>
<button id="btnJ" type="button" class="btn btn-outline-dark">J</button>
<button id="btnK" type="button" class="btn btn-outline-dark">K</button>
<button id="btnL" type="button" class="btn btn-outline-dark">L</button>
<button id="btnM" type="button" class="btn btn-outline-dark">M</button>
<button id="btnN" type="button" class="btn btn-outline-dark">N</button>
<button id="btnO" type="button" class="btn btn-outline-dark">O</button>
<button id="btnP" type="button" class="btn btn-outline-dark">P</button>
<button id="btnQ" type="button" class="btn btn-outline-dark">Q</button>
<button id="btnR" type="button" class="btn btn-outline-dark">R</button>
<button id="btnS" type="button" class="btn btn-outline-dark">S</button>
<button id="btnT" type="button" class="btn btn-outline-dark">T</button>
<button id="btnU" type="button" class="btn btn-outline-dark">U</button>
<button id="btnV" type="button" class="btn btn-outline-dark">V</button>
<button id="btnW" type="button" class="btn btn-outline-dark">W</button>
<button id="btnX" type="button" class="btn btn-outline-dark">X</button>
<button id="btnY" type="button" class="btn btn-outline-dark">Y</button>
<button id="btnZ" type="button" class="btn btn-outline-dark">Z</button>
</div>
</div>
</div>
When looking on desktop, or any device that has a wide enough screen, it looks like this:
Alphabet Button Group
Now, when you go to a smaller screen, or mobile, it wraps around and instead looks like this:
Wrapped Button Group
I'm fine with how this looks, however there is something I would like to change:
I can make the top-left (first button) and bottom-right (last button) have the proper rounded corners, but how would I do this to the bottom-left and top-right buttons? Depending on the width of the window, the buttons themselves are not always the same, and I don't want to force group splitting (multiple groups at set breakpoints, etc).
Here's a JSFiddle you can play around with. For some reason it doesn't justify the buttons like in my own code, but it doesn't really matter - if you make the results pane thinner you can see the button group wrap, and the left side should be justified with the top line. If you can make that first line have border-bottom-left-radius then something similar should be able to be applied to the top right as well.
https://jsfiddle.net/cglatot/yu6w4rkv/1/

#alphabetGroup button:first-child
{
border-radius: 8px 0 0 8px;
}
#alphabetGroup button:last-child
{
border-radius: 0 8px 8px 0;
}
try something like this..

On click of button group how to identify which button is clicked

i have a button group consist of four buttons,what i am trying to do is whenever user clicks on any button i want fetch its text
I am doing something like this
$(".btn").click(function() {
var button_text = $('#oneMonth').text();
alert(button_text)
})
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js"></script>
<div class="btn-group" role="group" align="center">
<button type="button" class="btn btn-primary" id="sevenDays">Seven Days</button>
<button type="button" class="btn btn-primary" id="oneMonth">One Month</button>
<button type="button" class="btn btn-primary" id="sixMonths">Six Months</button>
<button type="button" class="btn btn-primary" id="oneYear">One Year</button>
</div>
I am doing something like this but its not the right way as i have to put each and every id of button to get the text
I want to do like if user clicks on any button just get the text of that button only

Use this keyword instead of specific selector in alert to get the text of the clicked button
var button_text = $(this).text();
This will always give the text of the button with id oneMonth
$('#oneMonth').text();
$(".btn").click(function() {
var button_text = $(this).text();
alert(button_text)
})
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js"></script>
<div class="btn-group" role="group" align="center">
<button type="button" class="btn btn-primary" id="sevenDays">Seven Days</button>
<button type="button" class="btn btn-primary" id="oneMonth">One Month</button>
<button type="button" class="btn btn-primary" id="sixMonths">Six Months</button>
<button type="button" class="btn btn-primary" id="oneYear">One Year</button>
</div>

You can do this by adding the this jQuery to your code. Here is a working snippet:
var buttons = $("button");
buttons.click(function() {
$(".display__text").text($(this).text());
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js"></script>
<div class="btn-group" role="group" align="center">
<button type="button" class="btn btn-primary" id="sevenDays">Seven Days</button>
<button type="button" class="btn btn-primary" id="oneMonth">One Month</button>
<button type="button" class="btn btn-primary" id="sixMonths">Six Months</button>
<button type="button" class="btn btn-primary" id="oneYear">One Year</button>
</div>
<div class="display__text"></div>

Dynamic Survey with Javascript

I want to create a dynamic survery webpage with JavaScript.
I have 10 Questions which display types are set to "none" expect the first/actual questions displaytype is "block". Each question is a yes-no question. It's relevant which answer the user choose to see the next question.
I know how to build this static but I wanted a dynamic solution for this problem.
Can anybody help?
Here is a schema of my problem
Example code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>10 Questions</title>
<script>
...
</script>
</head>
<body>
<header>A Dynamic Questionaire.</header>
<section>
<article>
<hgroup>
<h1>Questionaire</h1>
<h2>Anwer the questions in order as they appear.</h2>
</hgroup>
<div id="Question1" style="display:block;">
1.
<button type="button" id="btnYes1">Yes</button>
<button type="button" id="btnNo1">No</button>
</div>
<div id="Question2" style="display:none;">
2.
<button type="button" id="btnYes2">Yes</button>
<button type="button" id="btnNo2">No</button>
</div>
<div id="Question3" style="display:none;">
3.
<button type="button" id="btnYes3">Yes</button>
<button type="button" id="btnNo3">No</button>
</div>
<div id="Question4" style="display:none;">
4.
<button type="button" id="btnYes4">Yes</button>
<button type="button" id="btnNo4">No</button>
</div>
<div id="Question5" style="display:none;">
5.
<button type="button" id="btnYes5">Yes</button>
<button type="button" id="btnNo5">No</button>
</div>
<div id="Question5" style="display:none;">
6.
<button type="button" id="btnYes6">Yes</button>
<button type="button" id="btnNo6">No</button>
</div>
<div id="Question5" style="display:none;">
7.
<button type="button" id="btnYes7">Yes</button>
<button type="button" id="btnNo7">No</button>
</div>
<div id="Question5" style="display:none;">
8.
<button type="button" id="btnYes8">Yes</button>
<button type="button" id="btnNo8">No</button>
</div>
<div id="Question5" style="display:none;">
9.
<button type="button" id="btnYes9">Yes</button>
<button type="button" id="btnNo9">No</button>
</div>
<div id="Question5" style="display:none;">
10.
<button type="button" id="btnYes10">Yes</button>
<button type="button" id="btnNo10">No</button>
</div>
</article>
</section>
</body>
</html>

There are a ton of ways you could do this. A quick approach would be to put some information in the button that indicates where to take the user next. So here I've added a data-next value on each button that matches the id of the next panel to show, and I toggle a class in CSS to show/hide panels.
var buttons = document.getElementsByTagName('button'),
questions = document.getElementsByTagName('div');
for (var i = 0; i < buttons.length; i++) {
var button = buttons[i];
button.addEventListener('click', function() {
var target = this.getAttribute('data-next');
for (var j = 0; j < questions.length; j++) {
var question = questions[j];
if (question.id == target) {
question.classList.add('show');
} else if (question.classList.contains('show')) {
question.classList.remove('show');
}
}
});
}
div {
display: none;
}
.show {
display: block;
}
<div id="Question1" class="show">
1.
<button type="button" data-next="Question2">Yes</button>
<button type="button" data-next="Question3">No</button>
</div>
<div id="Question2">
2.
<button type="button" data-next="Question4">Yes</button>
<button type="button" data-next="Question5">No</button>
</div>
<div id="Question3">
3.
<button type="button" data-next="Question6">Yes</button>
<button type="button" data-next="Question6">No</button>
</div>
<div id="Question4">
4.
<button type="button" data-next="Question10">Yes</button>
<button type="button" data-next="Question10">No</button>
</div>
<div id="Question5">
5.
<button type="button" data-next="Question10">Yes</button>
<button type="button" data-next="Question10">No</button>
</div>
<div id="Question6">
6.
<button type="button" data-next="Question7">Yes</button>
<button type="button" data-next="Question8">No</button>
</div>
<div id="Question7">
7.
<button type="button" data-next="Question9">Yes</button>
<button type="button" data-next="Question9">No</button>
</div>
<div id="Question8">
8.
<button type="button" data-next="Question9">Yes</button>
<button type="button" data-next="Question9">No</button>
</div>
<div id="Question9">
9.
<button type="button" data-next="Question10">Yes</button>
<button type="button" data-next="Question10">No</button>
</div>
<div id="Question10">
10.
</div>