CODEWITHSUNDEEP
javascripthtmlcssdom
Miguel Nunez
Miguel Nunez

Reputation: 79

How can I make multiple buttons to change a different div background color?

Take a look at what I am trying to make: https://codepen.io/SomeRandomGuy0/pen/aWvGxO

I was able to make the color of the square change color using the button "Blue". What I want to do is make multiple buttons to change the color of the square to what it says in the button. For example if I clicked on a button that says "Green", the square will turn green and if I clicked on another button that says "Purple", it will turn purple.

I am getting introduced to DOM in JavaScript so sorry for such a basic question.

HTML:

<html>
  <head>
    <meta charset = "UTF-8" />
    <title>DOM Practice</title>
  </head>
  <body>
    <div id = 'square'></div>
    <button onClick = changeColor() >Blue</button>
  </body>
</html>

CSS:

#square{
  width: 100px;
  height: 100px;
  background-color: red;
}

JavaScript:

function changeColor(){
  var elem = document.getElementById( 'square' );
  elem.style.backgroundColor = 'blue';
}

Upvotes: 1

Views: 2721

Answers (5)

Todd
Todd

Reputation: 5454

EDIT -- this approach is simplest IMO

Codepen DEMO

HTML:

<html>
  <head>
    <meta charset = "UTF-8" />
    <title>DOM Practice</title>
  </head>
  <body >
    <div id='preview'></div>
    <input id="colorpicker" type="color" />
  </body>
</html>

JS:

document.addEventListener('DOMContentLoaded', e => {
  const preview = document.getElementById('preview');
  const picker = document.getElementById('colorpicker');
  preview.style.backgroundColor = picker.value;
  picker.addEventListener('input', e => {
    preview.style.backgroundColor = e.currentTarget.value
  })
})

ORIGINAL -- an excuse to play with css vars

Here's an approach:

const colors = ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet'];
const getRandomColor = () => colors[Math.floor(Math.random() * colors.length)]
const selectColor = (color) => document.body.style.setProperty('--current', color);

document.addEventListener('DOMContentLoaded', e => {
  
  const preview = document.getElementById('square');
  const changeColor = (e) => {
    let color = getComputedStyle(e.currentTarget).getPropertyValue('--color-name');
    
    selectColor(color);
    
    let logStyles = ` 
      color: black; 
      font-weight: bold; 
      background-color: ${color};
      font-size: 18px;`;
                        
    
    console.log(`color changed to %c ${color} `, logStyles);
  }

  // 1. select purple for starting color
  // 2. create buttons
  // NOTE: I created the buttons programatically, but you could just as easily
  // 
  //  <button style="--color-name:red;">red</button>
  //  <button style="--color-name:orange;">orange</button>
  //  etc...
  
  selectColor('rebeccapurple')
  colors.forEach((color, i) => {
    let button = document.createElement('button');
    button.style.setProperty('--color-name', color);
    button.onclick = changeColor;
    button.textContent = color;
    document.body.appendChild(button);
  })

})
body {
    --current: 'green';
  }
#square{
  background-color: var(--current);
  width: 150px;
  height: 150px;
  margin-bottom: 15px;
}
button {
  padding: 8px 16px;
  background: white;
  border: 1px solid #f3f3f3;
  color: var(--color-name);
  margin-right: 8px;
}
<html>
  <head>
    <meta charset = "UTF-8" />
    <title>DOM Practice</title>
  </head>
  <body >
    <div id = 'square'></div>

  </body>
</html>

Upvotes: 0

sheriffderek
sheriffderek

Reputation: 9043

data-attributes are great for this: https://jsfiddle.net/sheriffderek/0hm9wnk7/ I also like to use rel to hook the js into the markup instead of classes to keep things really clear.

<div class='square' rel='box'></div>

<ul class='color-list' rel='box-colors'>
 <li class='color' data-color='red'>red</li>
 <li class='color' data-color='blue'>blue</li>
 ...
</ul>

...

.square {
  width: 100px;
  height: 100px;
  background: lightgray;
}

.color-list .color {
  cursor: pointer;
}

...

// $('selector/element') - 'queries'(looks for) for the object in the DOM / j-'query' get it?
// var $thing (with $sign is just a convention to remind you that it's a jQuery object / that comes with some jQuery specific stuff)
var $box = $('[rel="box"]'); // cache the element with rel='box' to a pointer(variable) for use later
var $boxColors = $('[rel="box-colors"]'); // same idea
var $colorTriggers = $boxColors.find('.color'); // same idea / see .find() method

$colorTriggers.on('click', function() { 
  // .on() is a method for attaching event handlers - in this case, 'click'
  thisColor = $(this).data('color'); // get the clicked element's data-attr for data-color
  $box.css('background', thisColor); // set the box css background to the color you just retrieved from the data-attr
});

Upvotes: 0

Afsar
Afsar

Reputation: 3124

You can pass the color as parameter on calling function at button

check this code pen

https://codepen.io/anon/pen/BRoPJo

    <button onClick = changeColor('Blue') >Blue</button>
    <button onClick = changeColor('green') >green</button>
    <button onClick = changeColor('yellow') >yellow</button>

JS

    function changeColor(color){
     var elem = document.getElementById( 'square' );
     elem.style.backgroundColor =color;  
    }

Upvotes: 4

bazzlebrush
bazzlebrush

Reputation: 428

Use an if/else statement in your function, I'm not going to do it for you, but the logic should be, if blue button is clicked, change to blue, if red button is clicked change to red and so on.

Upvotes: 0

dpaulus
dpaulus

Reputation: 422

The simplest approach could be to update changeColor() to take an argument of color. So for example,

Javascript:

function changeColor(color){
  var elem = document.getElementById( 'square' );
  elem.style.backgroundColor = color;
}

Then in the HTML we could do:

<html>
  <head>
    <meta charset = "UTF-8" />
    <title>DOM Practice</title>
  </head>
  <body>
    <div id = 'square'></div>
    <button onClick = changeColor('blue') >Blue</button>
    <button onClick = changeColor('red') >Red</button>
  </body>
</html>

This will allow us to generalize the changeColor() function, and make it more reusable for future applications!

Upvotes: 3

Related Questions