HTML with Javascript - Apply grayscale to images in a table, then mouseover images to go back to colored version

Question

I had a question about using the mouseover / mouseout event in javascript along with applying grayscale to a table. The question says that I must first making an image grid (table) all gray in html. Then I need to add javascript to the html so that when I mouse over the image, the image turns into a colored image, and when I mouse out from the image, the image reverts back into a gray image. The problem said no CSS is allowed, so only using javascript and html, if possible. Thank you so much in advance for the help, I really appreciate it!

Here is some of my code below (the table images need to start from grayscale, then apply/remove the grayscale when using the mouseover event. So far the mouseover effect only works on the first image. And I also don't know how to apply a grayscale filter over the whole table first).

function image_grayscale() {
  document.getElementById("image").style.filter = "grayscale(100%)";
}

function remove_grayscale() {
  document.getElementById("image").style.filter = "grayscale(0%)";
}

<div class="table">
  <table border="3" align=center width="600" height="200">
    <tr style="width:1" ;style="height:10%" ; bgcolor="white">
      <td onmouseover="remove_grayscale()" onmouseout="image_grayscale()">
        <img id="image" src="https://picsum.photos/id/1067/100/100" width="100" height="100" />
      </td>

      <td onmouseover="remove_grayscale()" onmouseout="image_grayscale()">
        <img id="image" style="grayscale" src="https://picsum.photos/id/1067/100/100" width="100" height="100" />
      </td>

      <td onmouseover="remove_grayscale()" onmouseout="image_grayscale()">
        <img id="image" src="https://picsum.photos/id/1067/100/100" width="100" height="100" />
      </td>

      <td onmouseover="remove_grayscale()" onmouseout="image_grayscale()">
        <img id="image" src="https://picsum.photos/id/1067/100/100" width="100" height="100" />
      </td>

      <td onmouseover="remove_grayscale()" onmouseout="image_grayscale()">
        <img id="image" src="https://picsum.photos/id/1067/100/100" width="100" height="100" />
      </td>

      <td onmouseover="remove_grayscale()" onmouseout="image_grayscale()">
        <img id="image" src="https://picsum.photos/id/1067/100/100" width="100" height="100" />
      </td>
    </tr>
  </table>

Answer 1

1. An id attribute must be unique.
2. Don't clutter the HTML more than necessary. It should be really easy to read.
3. Use addEventListener instead of onmouseover.
4. Method names are usually written with kebabCase (see the new method I added).
5. Don't repeat code. Instead, refactor similar code into a new method.

let table = document.getElementById('greyscaleTable')

table.addEventListener('mouseover', remove_grayscale);
table.addEventListener('mouseout', image_grayscale);

function image_grayscale(event) {
  let element = event.target;
  changeGrayscale('100%', element);
}

function remove_grayscale(event) {
  let element = event.target;
  changeGrayscale('0%', element);
}

function changeGrayscale(amount, element) {
  let isGrayscaleImage = element.classList.contains('grayscale');
  
  if (isGrayscaleImage) {
    element.style.filter = `grayscale(${amount})`;  
  }
}

#greyscaleTable img {
  width: 100px;
  height: 100px;
}

<div id="greyscaleTable" class="table">
  <table border="3" align=center width="600" height="200">
    <tr>
      <td>
        <img class="grayscale" style="filter: grayscale(100%)"  src="https://picsum.photos/id/1067/100/100" />
      </td>

      <td>
        <img class="grayscale" style="filter: grayscale(100%)" src="https://picsum.photos/id/1067/100/100" />
      </td>

      <td>
        <img class="grayscale" style="filter: grayscale(100%)" src="https://picsum.photos/id/1067/100/100"/>
      </td>

      <td>
        <img class="grayscale" style="filter: grayscale(100%)" src="https://picsum.photos/id/1067/100/100"/>
      </td>

      <td>
        <img class="grayscale" style="filter: grayscale(100%)" src="https://picsum.photos/id/1067/100/100" />
      </td>

      <td>
        <img class="grayscale" style="filter: grayscale(100%)" src="https://picsum.photos/id/1067/100/100" />
      </td>
    </tr>
  </table>

Answer 2

I'd personally suggest the following:

// define the function as a constant, using Arrow syntax;
// here we take the Event Object ('evt', passed from the (later)
// use of EventTarget.addEventListener(). From the Event-Object
// we retrieve the element to which the function was bound
// (evt.currentTarget), and update its CSSStyleDeclaration
// for the filter() function.
// We use a template-literal string (delimited with back-ticks
// to interpolate the JavaScript into the string, using the
// ${JavaScript here} notation.
// Based on the event-type we return the arguments of either
// 0 or 1; if the evt.type is exactly 'mouseenter' 0 is
// returned from the conditional operator, otherwise 1 is
// returned:
const toggleGrayscale = (evt) => evt.currentTarget.style.filter = `grayscale( ${evt.type === 'mouseenter' ? 0 : 1} )`,
  // here we retrieve a NodeList of all <img> elements within the document:
  images = document.querySelectorAll('img');

// we iterate over the NodeList of images to set them to
// grayscale(), initially:
images.forEach(
  (img) => img.style.filter = "grayscale(1)"
);

// we iterate again (as Array.prototype.forEach() has no
// return value; here we use EventTarget.addEventListener()
// to bind the toggleGrayscale function for both the 
// 'mouseenter' and 'mouseleave' events:
images.forEach(
  (img) => {
    img.addEventListener('mouseenter', toggleGrayscale)
    img.addEventListener('mouseleave', toggleGrayscale)
  });

*,
 ::before,
::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

table {
  border-collapse: collapse;
  table-layout: fixed;
}

<div class="table">
  <table>
    <tr>
      <td>
        <!-- I removed the size/width attributes since they don't seem to be useful, use CSS;
             also duplicate ids are invalid, an id must be unique within the document:-->
        <img src="https://placeimg.com/200/200/animals">
      </td>
      <td>
        <img src="https://placeimg.com/200/200/architecture">
      </td>
      <td>
        <img src="https://placeimg.com/200/200/nature">
      </td>
      <td>
        <img src="https://placeimg.com/200/200/people">
      </td>
      <td>
        <img src="https://placeimg.com/200/200/tech">
      </td>
  </table>

References:

• Arrow functions.
• CSSStyleDeclaration.
• EventTarget.addEventListener().
• NodeList.prototype.forEach().