Question 42507 in Html Question posted in
Some basic documentation can be found here.

How to show color on box after clicking color name – Html

I want to display the colour named on a button in the output div tag after clicking the button.

Here is my javascript code so far and also my HTML and css code.
I tried to take the value, but it’s not working.
I don’t know how to capture this value.
I wish to create one event handler and assign it to all 3 buttons.
The code should assign the event handler through the CLASS attribute, but use the ID attribute to distinguish which button was clicked.

$(document).ready(function() {
  $(".colorbutton").on("click", function() {
    var colorid = $(this).attr("id");

    $("#output").stop(true, true).hide().html(color).stop(true, true).show("fade", 1500);
  }); // end event handler
}); // ends document.ready
body {
  background-image: url("https://newton.ncc.edu/gansonj/ite154/img/crayons.jpg");
  font-family: arial;
  text-align: right;
  color: #008B8B;
}

#pagewrap {
  border: 8px #800000 solid;
  padding: 10px;
  width: 600px;
  border-radius: 25px;
  text-align: center;
  background: white;
  margin: 40px auto 0px auto;
}

#title {
  font-size: 2.2em;
  border-bottom: 7px #008B8B double;
  padding: 10px 0px 10px 0px;
  color: #008B8B;
  text-align: center;
}

#formtext {
  text-align: center;
  font-size: 1.29em;
  margin-top: 20px;
}

#usergrade {
  text-align: center;
  margin: 5px 20px 10px 20px;
}

.colorbutton {
  color: white;
  cursor: pointer;
  padding: 5px 0px 5px 0px;
  border: 3px solid #CCCC99;
  border-radius: 25px;
  width: 150px;
}

.colorbutton:hover {
  background: #CCCCCC;
  color: yellow;
  border: 3px solid #003366;
}

#output {
  font-size: 5em;
  padding-top: 100px;
  width: 200px;
  height: 100px;
  margin: 30px auto 30px auto;
  border: 5px black double;
  font-size: 1em;
  font-family: arial;
}
<html>

<head>
  <title></title>

  <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>

</head>

<body>

  <div id="pagewrap">

    <div id="title">Crayon Color Factory</div>

    <div id="formwrap" style="margin-top: 30px;">

      <input type="button" class="colorbutton" id="red" style="background-color:red;" value="RED Color">
      <input type="button" class="colorbutton" id="blue" style="background-color:blue;" value="BLUE Color">
      <input type="button" class="colorbutton" id="green" style="background-color:green;" value="GREEN Color">

      <div id="output">Change Me!!!!!</div>

    </div>
    <!-- ends div#formwrap -->

  </div>
  <!-- ends div#pagewrap -->

</body>

</html>

smaple picture here: enter image description here

Tags:

3

Answers


  1. 0

    If you wish to display the colour name in the box, you need to pass the string you assigned to the html function:

    $(document).ready(function() {
  $(".colorbutton").on("click", function() {
    var colorid = $(this).attr("id");

    $("#output").css("backgroundColor", colorid);
  }); // end event handler
}); // ends document.ready

    This will change the background colour of the output box.

    Login or Signup to reply.
  2. 0

    The color variable is not defined.

    $("#output").stop(true,true).hide().html( color ).stop(true,true).show( "fade", 1500 );

    You need to use the colorid variable instead.
    here is the code if you want to change the color and the string inside the box.

    document.getElementById("output").style.color = colorid; 
$("#output").stop(true,true).hide().html( colorid ).stop(true,true).show( "fade", 1500 );
    Login or Signup to reply.
  3. 0

    All you need to do is pass your button id’s and make eventlistener. So every time you click the button, the background color of your div is change depend on the value.

    document.addEventListener('DOMContentLoaded', () => {
    const red = document.getElementById('red');
    const blue = document.getElementById('blue');
    const green = document.getElementById('green');
    const output = document.getElementById('output');

    red.addEventListener('click', function onClick(event) {
        output.style.backgroundColor = 'red';
    });
    blue.addEventListener('click', function onClick(event) {
        output.style.backgroundColor = 'blue';
    });
    green.addEventListener('click', function onClick(event) {
        output.style.backgroundColor = 'green';
    });
});
    body {
  background-image: url("https://newton.ncc.edu/gansonj/ite154/img/crayons.jpg");
  font-family: arial;
  text-align: right;
  color: #008B8B;
}

#pagewrap {
  border: 8px #800000 solid;
  padding: 10px;
  width: 600px;
  border-radius: 25px;
  text-align: center;
  background: white;
  margin: 40px auto 0px auto;
}

#title {
  font-size: 2.2em;
  border-bottom: 7px #008B8B double;
  padding: 10px 0px 10px 0px;
  color: #008B8B;
  text-align: center;
}

#formtext {
  text-align: center;
  font-size: 1.29em;
  margin-top: 20px;
}

#usergrade {
  text-align: center;
  margin: 5px 20px 10px 20px;
}

.colorbutton {
  color: white;
  cursor: pointer;
  padding: 5px 0px 5px 0px;
  border: 3px solid #CCCC99;
  border-radius: 25px;
  width: 150px;
}

.colorbutton:hover {
  background: #CCCCCC;
  color: yellow;
  border: 3px solid #003366;
}

#output {
  font-size: 5em;
  padding-top: 100px;
  width: 200px;
  height: 100px;
  margin: 30px auto 30px auto;
  border: 5px black double;
  font-size: 1em;
  font-family: arial;
}
    <div id="pagewrap">
    <div id="title">Crayon Color Factory</div>
    <div id="formwrap" style="margin-top: 30px;">
        <input type="button" class="colorbutton" id="red" style="background-color:red;" value="RED Color">
        <input type="button" class="colorbutton" id="blue" style="background-color:blue;" value="BLUE Color">
        <input type="button" class="colorbutton" id="green" style="background-color:green;" value="GREEN Color">
        <div id="output">Change Me!!!!!</div>
    </div>
    <!-- ends div#formwrap -->
</div>
<!-- ends div#pagewrap -->
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search