CODEWITHSUNDEEP
javascripthtmlcss
Kekkosolut
Kekkosolut

Reputation: 23

How to change color based on number

I have just started to learn coding and I have got a problem now. I have made this black circle witch has number inside and it goes higher every time you click it but I would want now that even numbers would be blue and odd numbers red (1=red, 2=blue, 3=red etc.)

window.onload = function(){
    var laskuri = document.getElementById('laskuri'); 
    function kasvata() {
        var i =++
        laskuri.innerHTML + i;

        asetaTaustaVari();
    }

    function asetaTaustaVari() {

    }

    laskuri.onclick = kasvata;

}
* {
        box-sizing: border-box;
    }

    main {
        text-align: center;
    }

    #laskuri {
        width: 300px;
        height: 300px;
        background-color: black;
        color: white;
        margin: 50px auto;
        font-size: 200px;
        padding: 30px 0px;
        border-radius: 50%;
        cursor: pointer;
    }
<div id=laskuri>0</div>

Upvotes: 1

Views: 3997

Answers (6)

The fourth bird
The fourth bird

Reputation: 163632

You could get the number from the html and use parseInt. Then increment the number and add it to the html.

Then using the remainder you can change the color.

For example:

function kasvata() {
  var elm = document.getElementById('laskuri');
  if (elm && elm.innerHTML !== "") {
    var number = parseInt(elm.innerHTML, 10);
    number = number + 1;
    elm.innerHTML = elm.innerHTML = number.toString();
    asetaTaustaVari(number, elm);
  }
}

function asetaTaustaVari(i, elm) {
  if (i % 2 === 0) {
    elm.style.color = "blue";
  } else {
    elm.style.color = "red";
  }
}

laskuri.onclick = kasvata;
* {
  box-sizing: border-box;
}

main {
  text-align: center;
}

#laskuri {
  width: 300px;
  height: 300px;
  background-color: black;
  color: white;
  margin: 50px auto;
  font-size: 200px;
  padding: 30px 0px;
  border-radius: 50%;
  cursor: pointer;
}
<main>
  <div id=laskuri>0</div>
</main>

Upvotes: 1

Ranjit
Ranjit

Reputation: 1724

There is no need of any other function. I think it is required only a ternary operator. You have done almost all thing just modify your javascript code like bellow

<script>
function kasvata() {
    var i =++
    document.getElementById('laskuri').innerHTML + i;
    var val = document.getElementById('laskuri').innerHTML;
    document.getElementById('laskuri').style.color = val % 2 == 0 ? "blue" : "red";
}
laskuri.onclick = kasvata;
</script>

I hope you can change the minimum to get it done. Here is the example https://jsfiddle.net/doehxkLy/

And if you want to change the color randomly. Please change the line 

document.getElementById('laskuri').style.color = val % 2 == 0 ? "blue" : "red";

To

document.getElementById('laskuri').style.color = "#"+((1<<24)*Math.random()|0).toString(16);

Thumbs up.

Upvotes: 1

dsafewgf2g
dsafewgf2g

Reputation: 113

<!-- Javascript -->

function kasvata() {
            var i =++
                document.getElementById('laskuri').innerHTML + i;

            asetaTaustaVari();
        }

        function asetaTaustaVari() {
            var x = Math.floor(Math.random() * 256);
            var y = Math.floor(Math.random() * 256);
            var z = Math.floor(Math.random() * 256);
            var thergb = "rgb(" + x + "," + y + "," + z + ")";
            console.log(thergb);
            document.getElementById("laskuri").style.color = thergb;
        }

        laskuri.onclick = kasvata;
<!-- CSS3 -->

* {
            box-sizing: border-box;
        }

        main {
            text-align: center;
        }

        #laskuri {
            width: 300px;
            height: 300px;
            background-color: black;
            color: white;
            margin: 50px auto;
            font-size: 200px;
            padding: 30px 0px;
            border-radius: 50%;
            cursor: pointer;
        }
<!-- HTML5 -->

<html lang="fi">
<head>
    <meta charset="utf-8">
    <title>Laskuri</title>
</head>
<body>
<main>
    <div id=laskuri>0</div>
<main>
</body>
</html>

Upvotes: 1

Sanchit Patiyal
Sanchit Patiyal

Reputation: 4920

You can simply do it by putting an if condition and setting color in it

 if (val % 2 == 0) {
      color = "blue";
    } else {
      color = "red";
    }

or use ternary operator like this 

function kasvata() {
  var color = '';
  var i = ++
  document.getElementById('laskuri').innerHTML + i;
  var el = document.getElementById('laskuri');
  color = el.innerHTML % 2 == 0 ? "blue" : "red";
  el.style.color = color;
  asetaTaustaVari();
}

function asetaTaustaVari() {

}

laskuri.onclick = kasvata;
<html lang="fi">

<head>
  <meta charset="utf-8">
  <title>Laskuri</title>
  <style>
    * {
      box-sizing: border-box;
    }
    
    main {
      text-align: center;
    }
    
    #laskuri {
      width: 300px;
      height: 300px;
      background-color: black;
      color: white;
      margin: 50px auto;
      font-size: 200px;
      padding: 30px 0px;
      border-radius: 50%;
      cursor: pointer;
    }
  </style>
</head>

<body>
  <main>
    <div id=laskuri>0</div>

  </main>
</body>

</html>

Upvotes: 3

Marcel Schmid
Marcel Schmid

Reputation: 424

made you a small codepen for it:

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

you just need a if to see if innerHTML of laskuri is even or odd. I resolve the rest with adding/removing a class. you could also change the background directly with javascript.

Upvotes: -1

steppefox
steppefox

Reputation: 1844

You can achieve it by few ways:

  1. Preferred: You can use a special class-name and use it with your element. In JS code you'll just change a class-name depends on the counter:

    <style>
    .color_red {
        color: red;
    }
    .color_blue{
        color: red;
    }
</style>

<script>
window.onload = function(){
    var laskuri = document.getElementById('laskuri');
    var i = 0;
    function kasvata() {
        i++;
        laskuri.innerHTML = i;

        asetaTaustaVari();
    }

    function asetaTaustaVari() {
        var clName = i % 2 === 0 ? 'color_blue' : 'color_red';
        laskuri.className = clName;
    }

    laskuri.onclick = kasvata;

}
</script>

  2. Optional: You can change colors of an element with styles changing. The code is almost the same:

    function asetaTaustaVari() {
    var color = i % 2 === 0 ? 'blue' : 'red';
    laskuri.styles.color = color;
}

P.S.: In your code, please, don't write in your own native language (Finnish / Sweden), please, use english words ALWAYS. Not Laskuri - but Counter.

Upvotes: 2

Related Questions