CODEWITHSUNDEEP
javascripthtml
Chua Weiheng
Chua Weiheng

Reputation: 23

How to get cell background color for table cell javascript?

Hi im trying to allow the javascript table cell to have color upon hovering using a dropdown list in HTML and possibly change the pixel size of the table cell. I only have very basic knowledge on HTML and javascript.

I have tried to use addEventListener function but im not sure how to progress after that. 

<html>

  <head>
    <script src="./javascript.js"></script>
    <h1> Test A2 </h1>
  </head>  

    <body>
      <p>No. of Cols :
      <input id="noOfCols" type="text" name="cols"/>&nbsp;&nbsp; 
          No. of Rows :
      <input id="noOfRows" type="text" name="rows"/></p>

      <p>Sample Cell Data :
      <input id="scd" type="text" name="scdata"/>&nbsp;&nbsp;
      Cell Height (in pixels) :
      <input id="height" type="text" name="chip"/>&nbsp;&nbsp;
      Cell Width (in pixels) :
      <input id="width" type="text" name="cwip"/>&nbsp;&nbsp;
      Cell Background Colour :
      <select id="bgcolour" class="colour" name="cbc">
      <option value="black">Black</option>
      <option value="white">White</option>
      <option value="red">Red</option>
      <option value="green">Green</option>
      <option value="blue">Blue</option>
      <option value="yellow">Yellow</option>
      <option value="purple">Purple</option>
      <option value="cyan">Cyan</option>
      <option value="pink">Pink</option>
      <option value="orange">Orange</option>
    </select>
    </p>

      <button onClick="generate()">Generate Table</button>
      <button onClick="deleteTable()">Clear Table</button><hr/>

      <p id=generatedTable></p>


      <hr/>
    </body>
</html>

function generate()
{
  var myTable = document.getElementById("generatedTable");

  var table = document.createElement('TABLE');
  table.border ='1';

  var tableBody = document.createElement('TBODY');
  table.appendChild(tableBody);

  var rows = document.getElementById("noOfRows");
  var rowtext = Number(rows.value);

  var cols = document.getElementById("noOfCols");
  var coltext = Number(cols.value); 

  for (var y=0; y<rowtext; y++)
  {
    var tr = document.createElement('TR');
    tableBody.appendChild(tr);

    for (var x=0; x<coltext; x++)
    {     
      var td = document.createElement('TD');

      td.width = 10; 
      td.height = 10;
      td.align = "center"; 

      var celltextInput = document.getElementById("scd");
      var celltxt = celltextInput.value;
      td.appendChild(document.createTextNode(celltxt));

      var cellId = "cell [" + x + ", " + y + "]";
      td.setAttribute("id", cellId.toString());

      td.addEventListener("mouseover", function(){var bgcolour = 
      document.querySelector(".colour");
      td.style.background = bgcolour.value;});

      td.appendChild(document.createTextNode("Cell " + x + "," + y));
      tr.appendChild(td);

     }
  }   

  myTable.appendChild(table);

}

function deleteTable() 
{
  var removeTable = document.getElementById("generatedTable");
  removeTable.innerHTML = "";
}

function mouseOver(c) {
  document.getElementById("bgcolour").style.color = c;
}

I expected the table cell to be colored but nothing shows. Help is very much appreciated,

Upvotes: 1

Views: 1238

Answers (2)

mattxml
mattxml

Reputation: 82

I tried edit this code and maybe now its your expected result . After : 

var td = document.createElement('TD');

add:

td.addEventListener("mouseover", modifyColor, false);

On the end your code , add:

const modifyColor = event => {
  const color = document.querySelector(".colour");
  event.target.style.background = color.value;
}

Upvotes: 1

Jan Turoň
Jan Turoň

Reputation: 32912

  1. Create a global variable cellColor
  2. In you mouseover(c) function do just cellColor = c;
  3. In your generate() function add td.style.backgroundColor = cellColor;

Note: there is a serious issue with this snippet:

      td.addEventListener("mouseover", mouseOver());{
      document.getElementById("generatedTable");}

Upvotes: 0

Related Questions