Change the color div[funny]

JavaScript
1

Hi! Everybody!

i created this simple code:

for example:

this code change the color div.

var box1 = document.getElementById(“box”);

      function loadx(){
        box1.style.backgroundColor = "green";
        box1.addEventListener("click", loady);
         
    }
    
    
    function loady(){ 
      box1.style.backgroundColor = "yellow";
      box1.addEventListener("click", loadz);
    }
    
    function loadz(){
      box1.style.backgroundColor = "red"; 
      box1.addEventListener("click", loadx);
       
    }

i menaged to change three color. Can you change the color for each click?
Thank’s a lot for the answere. By by.

2

@lyro86, could you please post the html that goes with this code also? And maybe explain a little more clearly what you are trying to do?

3

ok html tag is only a box whit border -div- whit id and event listener associated follow the code:
I try to change three state of color. example green, red, yellow for each click follow the code:

i menaged the series of color but, I would always repeat the same action.

Thank’s.

4

Hi there lyro86,

Here are two examples for you to try…

CSS

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<title>untitled document</title>
<!--<link rel="stylesheet" href="screen.css" media="screen">-->
<style media="screen">
input[type="radio"] {
    position: absolute;
    left: -999em;
 }
label {
    display: none;
    width: 4.25em;
    height: 4.25em;
    border: 0.1em solid #000;
    box-shadow: 0.25em 0.25em 0.25em #999;
    cursor: pointer;
 }
#rad0:checked~#lab0 {
    display:block;
    background-color:#0f0;
 }
#rad1:checked~#lab1 {
    display:block;
    background-color:#ff0;
 }
#rad2:checked~#lab2 {
    display:block;
    background-color:#f00;
 }
</style>
</head>
<body> 
  <input id="rad0" type="radio" name="r" checked="checked">
  <input id="rad1" type="radio" name="r">
  <input id="rad2" type="radio" name="r">
  <label id="lab0" for="rad1"></label>
  <label id="lab1" for="rad2"></label>
  <label id="lab2" for="rad0"></label>
</body>
</html>

JavaScript

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<title>untitled document</title>
<!--<link rel="stylesheet" href="screen.css" media="screen">-->
<style media="screen">
#box {
    width: 4.25em;
    height: 4.25em;
    border: 0.1em solid #000;
    box-shadow: 0.25em 0.25em 0.25em #999;
    cursor: pointer;
 }
.bg-color0 {
    background-color: #0f0;
 }
.bg-color1 {
    background-color: #ff0;
 }
.bg-color2 {
    background-color: #f00;
 }
</style>
</head>
<body> 
 <div id="box" class="bg-color0"></div>
<script>
 (function() {
   'use strict';
   var cla=['bg-color0','bg-color1','bg-color2'];
   document.getElementById('box').addEventListener('click',
   function(){
              this.classList.remove(cla[0]);
              cla.push(cla[0]);
              cla.shift(cla[0]);
              this.classList.add(cla[0]);                                 
             },false);
 }());
</script>
</body>
</html>

coothead

5

thank you very much!

i can tell you, why my code is wrong???add something please?

6

Hi there lyro86,

I am by no means a “JavaScript” expert,
but a glance at your code suggests that
you are calling three functions with one
click. :eek:

Each of these functions is a trying to
simultaneously change the background
color of the clicked element and just gets
confused in the process. :wonky:

The “JavaScript” gurus here may be able
to give you a rather more technical
explanation. :winky:

coothead

8

Hello!

i wrote the code this way:

html is four class and four div.

javascript is:

   var cla=["red","green", "yellow", "red"];
   
   var box1 = document.getElementsByClassName("box");
   
   for(var i = 0; i < box1.length; i++){
     box1[i].addEventListener("click", colors);
    }
   
    function colors(){
      for(var i = 0; i < box1.length; i++){
        box1[i].style.backgroundColor = cla[0];                           
      }
        cla.shift(cla[0]);
        cla.push(cla[0]);
    }

there is a problem, why color all classes. You can help me?

9

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.