CODEWITHSUNDEEP
javascripthtml-table
Bartek Sadlej
Bartek Sadlej

Reputation: 15

Javascript onmousemove and onclick

I want to change background color when mouse is clicked and over the element with possibility to move it so that you don't have to click on every element but insted be able to 'draw' with mouse. But I don't know how. My code for now goes like

function change_color(x, y) {
  console.log(x, y);
  var elem = document.getElementById(x.toString() + "-" + y.toString());
  if (elem.style.backgroundColor == 'white')
    elem.style.backgroundColor = 'black';
  else
    elem.style.backgroundColor = 'white';
}
#board td {
  /*border: 1px solid rgb(175, 216, 248);*/
  width: 25px;
  height: 25px;
  border: 1px solid black;
  background-color: white;
}
<table id="board">
  <tr>
    <td id='0-0' onmousedown="change_color(0,0);"></td>
    <td id='0-1' onmousedown="change_color(0,1);"></td>
  </tr>
  <tr>
    <td id='1-0' onmousedown="change_color(1,0);"></td>
    <td id='1-1' onmousedown="change_color(1,1);"></td>
  </tr>
</table>

Upvotes: 0

Views: 822

Answers (3)

Tyler Roper
Tyler Roper

Reputation: 21672

I'd make a few changes.

  1. Try using classes instead of inline styles. This allows you to toggle the class using a simple classList.toggle().

  2. I'd attach the events using addEventListener instead of inline on the elements themselves, both for cleanliness and reducing duplicate code.

  3. You can use e.which to determine if the mouse is down when hovering over an element. If e.which === 1, the primary mouse button is down.

document.querySelectorAll("#board td").forEach((e) => { //for each board td
  e.addEventListener("mouseover", change_color);        //change color on hover
  e.addEventListener("mousedown", change_color);        //change color on click
});

function change_color(e) {
  if (e.which !== 1) return;             //exit if mouse isn't down
  e.target.classList.toggle('black');    //toggle black background
}
#board td {
  width: 25px;
  height: 25px;
  border: 1px solid black;
  background-color: white;
}

#board td.black { background-color: black; }
<table id="board">
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>

Upvotes: 1

epascarello
epascarello

Reputation: 207537

You need to use some sort of variable to know if the mouse is down and use a mousemove event.

let isDown = false
document.body.addEventListener("mousedown", function () {
  isDown = true
});

document.body.addEventListener("mouseup", function () {
  isDown = false
});

document.getElementById("grid").addEventListener("mousemove", function (evt) {
  if (isDown) evt.target.classList.add("active")
})
table {
  border-spacing: 0;
  border-collapse: collapse;
  empty-cells: show;
}

td{
  width: 10px;
  height: 10px;
  background-color: white;
  border: 1px dotted #eee;
}

td.active {
  background-color: black
}
<table id="grid">
  <tr>
    <td></td><td></td><td></td><td></td><td></td>
    <td></td><td></td><td></td><td></td><td></td>
  </tr>
  <tr>
    <td></td><td></td><td></td><td></td><td></td>
    <td></td><td></td><td></td><td></td><td></td>
  </tr>
  <tr>
    <td></td><td></td><td></td><td></td><td></td>
    <td></td><td></td><td></td><td></td><td></td>
  </tr>
  <tr>
    <td></td><td></td><td></td><td></td><td></td>
    <td></td><td></td><td></td><td></td><td></td>
  </tr>
  <tr>
    <td></td><td></td><td></td><td></td><td></td>
    <td></td><td></td><td></td><td></td><td></td>
  </tr>
</table>

Upvotes: 1

DaraJ
DaraJ

Reputation: 3086

I think you are looking for onmousemove to call a function. Each time that function is called (i.e. each time the mouse moves) you can check if the mouse button is down and then change the colour of the pixel.

More info here: https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onmousemove

Upvotes: 0

Related Questions