How to change background colour dynamically using Css - javascript

I've set up a method which when a button is clicked changes it's background colour and resets the colour of the other three buttons. The method for button1 looks like this
<script>
function changeBttn1() {
document.getElementById("bttn1").style.backgroundColor = '#add8e6';
document.getElementById("bttn2").style.backgroundColor = '#D3D3D3';
document.getElementById("bttn3").style.backgroundColor = '#D3D3D3';
document.getElementById("bttn4").style.backgroundColor = '#D3D3D3';
}...
Also I want to be able to make the Div that applies to each button appear and the others hidden with the same button press. The Div uses Class=Collapse which corresponds to Display:None in Bootstrap.css but I want to change it to run from the same method as the buttons. How can I do both events using Css?

Please do it like this very simple and easy
$('.my-btn').on('click',function(){
var colorval=$(this).attr('color');
$('.my-btn').css('background-color', 'grey');
$(this).css('background-color', colorval);
});
button{
background-color:grey;
padding:10px;
border:1px solid #000000;
color:#ffffff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="button-wrapper">
<button class="my-btn" color="red">Red</button>
<button class="my-btn" color="green">Green</button>
<button class="my-btn" color="purple">Purple</button>
</div>

Related

Is there any way to change background color of ::selection (selected text) using JavaScript?

I want to change the background of my text selection using HTML button.
Is there any way to change background color of ::selection (selected text) using JavaScript?
In general where it's not possible to directly change pseudo element settings via JS it is possible to set CSS variables using JS.
So if you have something like this in your stylesheet:
::selection {
background-color: var(--selcolor);
}
and something like this in your JS:
element.style.setProperty('--selcolor', selcolor)
it will work.
Here's small example. It changes the selection color variable in the body:
function selChange(color) {
document.body.style.setProperty('--selcolor', color);
}
body {
--selcolor: yellow;
}
::selection {
background-color: var(--selcolor);
}
<button onclick="selChange('cyan');">Cyan</button>
<button onclick="selChange('magenta');">Magenta</button>
<button onclick="selChange('yellow');">Yellow</button>
<p>Highlight some of this text, then click a color and highlight some text...</p>
you can make it by toggle class give your body a class which will take the default selection style and make a class to toggle it when click the button
Here's example in pure CSS
<!DOCTYPE html>
<html>
<head>
<style>
.body-selection-green *::selection {
background: green;
}
.body-selection-yellow *::selection {
background: yellow
}
</style>
</head>
<body class="body-selection-green">
<div> Try to select me </div>
<button> change selection background</button>
<script>
let btn = document.getElementsByTagName("button")[0];
btn.addEventListener("click", function() {
if(document.body.classList.contains("body-selection-green")) {
document.body.classList.remove("body-selection-green")
document.body.classList.add("body-selection-yellow")
} else if(document.body.classList.contains("body-selection-yellow")) {
document.body.classList.remove("body-selection-yellow")
document.body.classList.add("body-selection-green")
}
});
</script>
</body>
</html>

Is there anyway to create a button in html which when clicked, turns on the css?

For example, Imagine a black and white page, and then when you click the button, the page refreshes, giving you the same page but with css? Right now the only way I can think of doing this is with 2 different pages, but it would be nice to to do it with one page.
If you just want to change the button, you could add a class of CSS using JS when the button is clicked like this:
let btn = document.querySelector('#myButton2');
btn.addEventListener('click', (e)=>{
e.target.classList.toggle('addClassGreen');
});
.myButtons{
border-radius:5px;
padding:20px;
color:#fff;
background:#666;
}
#myButton1:hover{
background:purple;
}
#myButton1:active{
background:red;
}
.addClassGreen{
background:green;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<button class='myButtons' id='myButton1'>Temporarily reaction with CSS</button>
<button class='myButtons' id='myButton2' >Adding class with JS</button>
</body>
</html>
You could add a class that turns on or off to a top level element i.e. bod
body {
color: black;
}
body.color {
color: red;
}

jQuery ToggleClass on multiple buttons

I am trying to toggle visibility of elements with jQuery. The page should load with all elements active. Then, when you click on one of 3 filter buttons, it should hide the elements that don't match.
I can get it to work with addClass and removeClass, but I want to be able to toggle the elements on and off when you click each button. This is where it falls apart. With toggleClass, it works on the first click, but when I try to toggle the buttons, the classes get all mixed up.
Here is a working fiddle using removeClass (no toggling):
$(".map-filters .heart").click(function() {
$('.blue-marker').addClass('d-none');
$('.green-marker').addClass('d-none');
$('.red-marker').removeClass('d-none');
});
And here is a non-working fiddle where I attempt to toggle the classes –– once you click around a bit, it gets mixed up:
$(".map-filters .heart").click(function() {
$('.blue-marker').addClass('d-none');
$('.green-marker').addClass('d-none');
$('.red-marker').toggleClass('d-none');
});
What am I doing wrong?
Thanks!
1.You have set the default to active to all of them.
2.You have to do make the decision based on the active not active of the button with hasClass()
You don't need code redundancy. You can simplify it by giving each button an id.
$(".map-filters .filter").click(function() {
$('.active').not(this).removeClass('active');
$(this).toggleClass('active');
if ($(this).hasClass('active')){
var color = $(this).attr('id');
$("#map").children().addClass('d-none');
$("." + color + "-marker").toggleClass('d-none');
}
else {
$("#map").children().removeClass('d-none');
}
});
.d-none {
visibility:hidden!important
}
#map {
border:1px solid #000;
padding:20px;
}
#map > div {
width:30px;
height:30px;
display:inline-block;
margin:10px;
}
.map-filters {
margin-top:50px;
}
.map-filters button {
opacity:0.5;
}
.map-filters button.active {
opacity:1;
}
.heart,
.red-marker {background:red;}
.heart-pvl,
.green-marker {background:green;}
.pvl,
.blue-marker {background:blue;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="map">
<div class="blue-marker"></div>
<div class="red-marker"></div>
<div class="red-marker"></div>
<div class="green-marker"></div>
<div class="blue-marker"></div>
<div class="green-marker"></div>
</div>
<div class="map-filters">
<button type="button" class="filter heart" id="red">Heart Locations</button>
<button type="button" class="filter heart-pvl" id="green">Heart & PVL Locations</button>
<button type="button" class="filter pvl" id="blue">PVL Locations</button>
</div>

Change one button background color onClick and revert previously clicked button to default background (8 Buttons)

I have a column of 8 buttons and would like only one button to be toggled(yellow) at a time and the rest of the buttons remain default(green).
I am having a bear of a time getting the function to execute on click. Meaning no colors are changing.
I have been using this post How to select and change color of a button and revert to original when other button is clicked
as my reference and has helped me understand querySelectors and changing classes but for the life of me I cant see why my application isnt working.
Console.log('test) fires right after the for loop is called but if put below the onClick it does not fire.
JS
for (button in buttons) {
buttons[button].onclick = function() {
console.log('test')
var yellowButton = document.querySelectorAll(".yellow")[0];
if (this.className == "green") {
if (yellowButton) yellowButton.className = "green";
this.className = "yellow";
}
}
}
HTML
<button class="green">UPKEEP</button>
<button class="green">DRAW</button>
<button class="green">MAIN</button>
<button class="green">COMBAT</button>
<button class="green">MAIN</button>
<button class="green">END TURN</button>
<button class="green">CLEANUP</button>
CSS
button{
width: 100%;
padding: 10px 20px;
margin: 3px;
}
.green{
background-color: green;
}
.yellow {
background-color: yellow;
}
I am expecting to have 1/8 of the buttons to be yellow. That being the clicked button.
Rather than toggling the yellow and green classes - you can simply add a 'highlight' class on click and remove it from the previously clicked button.
This highlight class has the yellow background styling, so that when you click a button it adds the highlight class and yellow background. Then clicking another button removes the highlight class from the first button and applies it to the clicked one.
var buttons = document.querySelectorAll("button");
for (button in buttons) {
buttons[button].onclick = function() {
console.log('test')
buttons.forEach(function(btn){
btn.classList.remove('highlight');
})
this.classList.add('highlight');
}
}
button{
width: 100%;
padding: 10px 20px;
margin: 3px;
}
.green{
background-color: green;
}
.highlight {
background-color: yellow;
}
<button class="green">UPKEEP</button>
<button class="green">DRAW</button>
<button class="green">MAIN</button>
<button class="green">COMBAT</button>
<button class="green">MAIN</button>
<button class="green">END TURN</button>
<button class="green">CLEANUP</button>
I managed to get your code to work. jsFiddle
Make sure you define buttons correctly:
var buttons = document.querySelectorAll(".green");
My problem was in my html, i had to move the script tag to the end of the body to allow loop to occur. Thanks for the help folks!

$event.stopPropogation is not working

I have a scenario where when i click on input box which is inside a div the div functionality is getting effected.
Suppose the div is selected and is red in color,when i click on the input box which is inside the selected div, the div is turning unselected(grey color).
For this i have used $event.stopPropogation on input box which isn't working
html
<body>
<div class="container" ng-controller="BaseController">
<div class="row" ng-click="selectedDiv=!selectedDiv" ng-class="{'colorDiv':selectedDiv}">
<input placeholder="enter text" ng-mousedown="$event.stopPropagation()">
</div>
</div>
</body>
controller:
app.controller('BaseController', function($scope) {
$scope.selectedDiv=true;
});
css:
.row{
width:250px;
height:200px;
border:1px solid grey;
}
.colorDiv{
border:1px solid red;
}
DEMO
Any help would be appreciated.
You've to explicitly stop click event propagation of input box to bubble up, for the same you could use ng-click instead of ng-mousedown(mousedown will only fire when hover over on input box).
ng-click="$event.stopPropagation();"
Plunker
You're current setup starts out in the selected state, and when you click the div it becomes the unselected state.
app.controller('BaseController', function($scope) {
$scope.selectedDiv=false;
});
Change the starting value of $scope.selectedDiv = false;

Categories