using javascript to get array element when hovering

Question

using javascript to get array element when hovering

I am currently exploring ways to retrieve and display the value of a div tag created with a 2D array using JavaScript. I have considered using onclick or onmouseover, but so far, neither approach has worked as expected. I am looking for a solution that avoids creating multiple functions to simply display the cell the cursor is over.

<style type="text/css">
  .float {float: left;}
  .clear {clear:both;}
  div {border: thin solid blue; padding: 2px;}
</style>
</head>
<body>
    <div id="grid"></div>
    <div id="bucket" class="float"></div>
</body>
<script type="text/javascript">
var axisY = 7;
var axisZ = 7;

for (var i = 0; i < axisY; i++) {
  for (var j = 0; j < axisZ; j++) {
    document.getElementById('grid').innerHTML += "<div onmouseout='displayNone()' onmouseover='displayMe(cellId)' id='area" + i + j + "' class='float'>" + i + ":" + j + "</div>";
  }
  document.getElementById('grid').innerHTML += "<br class='clear' />";
}

function displayMe(cellId) {
  // ???
}

function displayNone() {
  document.getElementById('bucket').innerHTML = "";
}
</script>

Thanks!

javascript arrays

Answer 1

Answer №1

To retrieve the cell id, simply pass this.id as a parameter to the designated function.

Attempt the following:

<script type="text/javascript>
var row = 7;
var column = 7;

for (var i = 0; i < row; i++) {
  for (var j = 0; j < column; j++) {
    document.getElementById('grid').innerHTML += "<div onmouseout='hideCell()' onmouseover='showCell(this.id)' id='area" + i + j + "' class='float'>" + i + ":" + j + "</div>";
  }
  document.getElementById('grid').innerHTML += "<br class='clear' />";
}

function showCell(cellId) {
  console.log(cellId);
}

function hideCell() {
  document.getElementById('bucket').innerHTML = "";
}
</script>

Answer 2

To retrieve the cell id, simply pass this.id as a parameter to the designated function.

Attempt the following:

<script type="text/javascript>
var row = 7;
var column = 7;

for (var i = 0; i < row; i++) {
  for (var j = 0; j < column; j++) {
    document.getElementById('grid').innerHTML += "<div onmouseout='hideCell()' onmouseover='showCell(this.id)' id='area" + i + j + "' class='float'>" + i + ":" + j + "</div>";
  }
  document.getElementById('grid').innerHTML += "<br class='clear' />";
}

function showCell(cellId) {
  console.log(cellId);
}

function hideCell() {
  document.getElementById('bucket').innerHTML = "";
}
</script>

Answer 3

Answer №2

At this moment, every cell element is set up to trigger the function displayMe when the mouseover event occurs. However, when this function is called, the variable cellId is not defined, resulting in an error message in the browser console ("Uncaught ReferenceError: cellId is not defined").

To resolve this issue, you should pass the dynamically defined id property of the cell element, which can be accessed using this.id. By changing the onmouseover attribute of the div element to onmouseover='displayMe(this.id)', you can ensure that the correct value is passed to the displayMe function.

Here is the adjusted code snippet that includes these changes:

<style type="text/css">
  .float {float: left;}
  .clear {clear:both;}
  div {border: thin solid blue; padding: 2px;}
</style>
</head>
<body>
    <div id="grid"></div>
    <div id="bucket" class="float"></div>
</body>
<script type="text/javascript">
var axisY = 7;
var axisZ = 7;

for (var i = 0; i < axisY; i++) {
  for (var j = 0; j < axisZ; j++) {
    document.getElementById('grid').innerHTML += "<div onmouseout='displayNone()' onmouseover='displayMe(this.id)' id='area" + i + j + "' class='float'>" + i + ":" + j + "</div>";
  }
  document.getElementById('grid').innerHTML += "<br class='clear' />";
}

function displayMe(cellId) {
  document.getElementById('bucket').innerHTML = document.getElementById(cellId).textContent;
}

function displayNone() {
  document.getElementById('bucket').innerHTML = "";
}
</script>

Answer 4

At this moment, every cell element is set up to trigger the function displayMe when the mouseover event occurs. However, when this function is called, the variable cellId is not defined, resulting in an error message in the browser console ("Uncaught ReferenceError: cellId is not defined").

To resolve this issue, you should pass the dynamically defined id property of the cell element, which can be accessed using this.id. By changing the onmouseover attribute of the div element to onmouseover='displayMe(this.id)', you can ensure that the correct value is passed to the displayMe function.

Here is the adjusted code snippet that includes these changes:

<style type="text/css">
  .float {float: left;}
  .clear {clear:both;}
  div {border: thin solid blue; padding: 2px;}
</style>
</head>
<body>
    <div id="grid"></div>
    <div id="bucket" class="float"></div>
</body>
<script type="text/javascript">
var axisY = 7;
var axisZ = 7;

for (var i = 0; i < axisY; i++) {
  for (var j = 0; j < axisZ; j++) {
    document.getElementById('grid').innerHTML += "<div onmouseout='displayNone()' onmouseover='displayMe(this.id)' id='area" + i + j + "' class='float'>" + i + ":" + j + "</div>";
  }
  document.getElementById('grid').innerHTML += "<br class='clear' />";
}

function displayMe(cellId) {
  document.getElementById('bucket').innerHTML = document.getElementById(cellId).textContent;
}

function displayNone() {
  document.getElementById('bucket').innerHTML = "";
}
</script>

using javascript to get array element when hovering

Answer №1

Answer №2

Similar questions

Adding JSON data to an array in Angular JS using the push method

Modifying the appearance of a CSS element with jQuery: Step-by-step guide

Exploring the proper method for closing connections in Node JS and the pg module

Tips for modifying AJAX behavior or restricting requests in Wicket

How to Share an Array Across Two Java Classes

Placing jQuery in the lower part of my HTML templates lacks adaptability

Is there a way to incorporate a loading spinner into a MaterialUI DataTable without having to specify a fixed height for the parent component?

Jasmine examination fails to progress to the subsequent segment of the promise

There is a lack of 'Access-Control-Allow-Origin' header - Issue encountered while making Food2Fork API request using AJAX

Tips for retrieving email addresses from a intricate array

Combining two objects in AngularJS to create a new merged object

Creating a Vibrant Progress Bar with Multiple Colors: A Step-by-Step Guide

Locate the present position of the slider element

Exporting ExpressJS from a TypeScript wrapper in NodeJS

Implementing a clickable image using an anchor tag in JavaScript

What is the best way to implement switchMap when dealing with a login form submission?

PHP: what is the best way to efficiently replace these specific strings?

Avoid displaying "undefined" on HTML page when Firebase database value is empty

Retrieve information from the Next API within the getStaticProps function in a Next.js project

Form validation on the client side: A way to halt form submission