Javascript, Cycle trough 3 classes in a single td tag

Question

I am using simple html and inlay js + css to create a simple site that just tracks wether a worker is at work or not (by simply clicking on a td with their name), thing is I never worked with js and after a day of reading documentations and looking up stackoverflow and w3schools, I can't get my code running. My problem is whenever i try to click on a td the background color doesnt change and when I got a solution the whole table background color changed, but I want a single td at a time, can anyone help me? so far i got:

<script language=javascript type="text/javascript">
var el
function colCell() {
  if (typeof event !== 'undefined')
    el = event.srcElement;

  elements = document.getElementsByTagName('td');

  if (el.style.backgroundColor == "#E5F0F8")
  {
    el.style.backgroundColor = "#0066bb"
    el.style.color ="#ffffff"
  }
  else if (el.style.backgroundColor == "#0066bb") 
  {
    el.style.backgroundColor = "#ff00ff"
    el.style.color = "#ffffff"
  }
  else
  {
    el.style.backgroundColor = "#E5F0F8"
    el.style.color = "#000000"
  }
}

if (window.addEventListener)
  window.addEventListener('click', function(e) {
    el = e.target
  }, true)
</script>

With this table :

<div class="contentSection">
        <table class="awht2">
            <tr>
                <td colspan="5" class="line">LCS</td>
            </tr>
            <tr>
                <td onclick="colCell()" style="background-color: #E5F0F8;">
                    TestFarbe
                </td>

Consider the td and tr repeated a few times.

sorry for being so noob'ish this is my first project with js and html

Hi and welcome to SO :). Are there errors in your JavaScript console? (F12, then console). Also, you don't need the `eventListener` on `window`. Remove the eventListener and also the first if-statement in your function and replace `el = event.srcElement` with `el = this`. That should work. — CodeF0x, Feb 20 '19 at 08:20
Heya, and thank you for your warm welcome. Console spew out a single error : Uncaught TypeError: Cannot read property 'backgroundColor' of undefined at colCell (AWHT_Testthing.html:17) at HTMLTableCellElement.onclick (AWHT_Testthing.html:56) but i guess this was there before i changed the function to your comment — L. Gen, Feb 20 '19 at 08:30
According to the error, the function doesn't know on what element you've clicked (it doesn't know `el`). Does it work with my changes now? — CodeF0x, Feb 20 '19 at 08:32
To be sorry it doesnt work, with your changes of el = this and so on — L. Gen, Feb 20 '19 at 08:48

score 1 · Accepted Answer · answered Feb 20 '19 at 08:36

Some improvements here and there:

<script language=javascript type="text/javascript">
var el
function colCell(el) {

  elements = document.getElementsByTagName('td');

  if (el.style["background-color"] == "rgb(229, 240, 248)")
  {
    el.style["background-color"] = "#0066bb"
    el.style.color ="#ffffff"
  }
  else if (el.style["background-color"] == "rgb(0, 102, 187)") 
  {
    el.style["background-color"] = "#ff00ff"
    el.style.color = "#ffffff"
  }
  else
  {
    el.style["background-color"] = "#E5F0F8"
    el.style.color = "#000000"
  }
}

/*if (window.addEventListener)
  window.addEventListener('click', function(e) {
    el = e.target
  }, true)*/
</script>
<div class="contentSection">
        <table class="awht2">
            <tr>
                <td colspan="5" class="line">LCS</td>
            </tr>
            <tr>
                <td onclick="colCell(this)" style="background-color: #E5F0F8;">
                    TestFarbe
                </td>
                <td onclick="colCell(this)" style="background-color: #E5F0F8;">
                    TestFarbe2
                </td>
                <td onclick="colCell(this)" style="background-color: #E5F0F8;">
                    TestFarbe3
                </td>
                <td onclick="colCell(this)" style="background-color: #E5F0F8;">
                    TestFarb4
                </td>
                <td onclick="colCell(this)" style="background-color: #E5F0F8;">
                    TestFarbe5
                </td>
            </tr>
        </table>
    </div>

you do not need to have a window event, you can pass this to the function.

Works like a charm exactly what i wanted, thank you very very much! — L. Gen, Feb 20 '19 at 09:05

score 0 · Answer 2 · answered Feb 20 '19 at 08:37

0

var cells = document.getElementsByTagName('td');
for(var i =0;i<cells.length;i++){
cells[i].addEventListener('click',function(e){
e.target.classList.toggle('gray');
e.target.classList.toggle('blue');
},false)

}

td {

background-color: #E5F0F8;
color:#000000;
}
.blue{
background-color:#0066bb;
color:#ffffff;
}

<div class="contentSection">
        <table class="awht2">
            <tr>
                <td colspan="5" class="line">LCS</td>
            </tr>
            <tr>
                <td>
                    TestFarbe
                </td>
                </tr>
                </table>
                </div>

answered Feb 20 '19 at 08:37

Eitan Morad

51
3

Almost i want to cycle trough 3 colors like blue > green > orange – L. Gen Feb 20 '19 at 08:40
Tried yours now in my code, the snippet here alsmost works like i want it, but when i copy and make adjustments in my code it simply dont want to work – L. Gen Feb 20 '19 at 08:57

score 0 · Answer 3 · answered Feb 20 '19 at 08:37

Pass the event object with colCell(). Then use window.getComputedStyle to get the current back ground color. This will be in rgb. Convert this rgb to hex and then use the element.style.property , where element is the target from which event originated & property is any css property

function colCell(e) {
  let target = event.target;
  // the background color will be in rgb . In that this snippet is 
  // considering only integers and replacing characters and 
  // special characters with empty string. Then using filter to 
  // get only the values which are not empty
  let x = window.getComputedStyle(target).backgroundColor.replace(/[^0-9]/g, ' ').trim().split(' ').filter(e => e !== "");
  let getHex = rgbToHex(+x[0], +x[1], +x[2]).toUpperCase()

  if (getHex === "#E5F0F8") {
    target.style.backgroundColor = "#0066bb"
    target.style.color = "#ffffff"
  } else if (el.style.backgroundColor === "#0066bb") {
    target.style.backgroundColor = "#ff00ff"
    target.style.color = "#ffffff"
  } else {
    target.style.backgroundColor = "#E5F0F8"
    target.style.color = "#000000"
  }
}


function componentToHex(c) {
  var hex = c.toString(16);
  return hex.length == 1 ? "0" + hex : hex;
}

function rgbToHex(r, g, b) {
  return "#" + componentToHex(229) + componentToHex(240) + componentToHex(248);
}

<div class="contentSection">
  <table class="awht2">
    <tr>
      <td colspan="5" class="line">LCS</td>
    </tr>
    <tr>
      <td onclick="colCell(event)" style="background-color: #E5F0F8;">
        TestFarbe
      </td>
  </table>
</div>

I have used code fro rgb to hex conversion

Javascript, Cycle trough 3 classes in a single td tag

3 Answers3