Tips for using the .innerHTML method to reference multiple indexes

Question

Tips for using the .innerHTML method to reference multiple indexes

How can I set the .innerHTML for multiple indexes of an array? I currently have an array

let poles = Array.prototype.slice.call(document.querySelectorAll(".pole"));

This array contains 9 empty divs, such as :

<div class="pole" id="1"></div>

When a user clicks on one of these divs, it will display either X or O since it is for a tic-tac-toe game.

I want to achieve something like this :

poles[0][1][2].innerHTML ==='X'

or

poles[0, 1, 2].innerHTML === 'X'

Instead of having to write out every condition individually:

if(poles[0].innerHTML === 'X' && poles[1].innerHTML === 'X' && poles[2].innerHTML === 'X')

javascript arrays indexing

Answer 1

Answer №1

We can extract the first 3 items from the array using the slice method, and then check if each item has an innerHTML value of "X" by utilizing the every function:

poles = Array.from(document.querySelectorAll('div > span'))

let first3 = poles.slice(0, 3)

if (first3.every(i => i.innerHTML === 'X')) {
  console.log('Row 1 contains all x')
} else {
  console.log('Row 1 doesn\'t contain all x')
}

<div>
  <span>X</span>
  <span>X</span>
  <span>X</span>
</div>
<div>
  <span></span>
  <span></span>
  <span></span>
</div>
<div>
  <span></span>
  <span></span>
  <span></span>
</div>

If we change one item to have a value of "O" instead of "X", the result will indicate that it does not contain all "X"s:

poles = Array.from(document.querySelectorAll('div > span'))

let first3 = poles.slice(0, 3)

if (first3.every(i => i.innerHTML === 'X')) {
  console.log('Row 1 contains all x')
} else {
  console.log('Row 1 doesn\'t contain all x')
}

<div>
  <span>X</span>
  <span>O</span>
  <span>X</span>
</div>
<div>
  <span></span>
  <span></span>
  <span></span>
</div>
<div>
  <span></span>
  <span></span>
  <span></span>
</div>

A more advanced approach involves creating a function called testWin() that examines the game board for a winning scenario based on the provided parameter, either "X" or "O". Simply call the function with the desired player symbol:

Create a function with an array of possible win combinations
Iterate over all possible wins
Generate a temporary array of elements using map to retrieve 3 elements at a time
Determine if every element's innerHTML matches the player symbol passed as a parameter

poles = Array.from(document.querySelectorAll('div > span'))

function testWin(player) {
  // An array containing all possible win scenarios
  let wins = [
    // Horizontal
    [0, 1, 2],
    [3, 4, 5],
    [6, 7, 8],
    // Vertical
    [0, 3, 6],
    [1, 4, 7],
    [2, 5, 8],
    // Diagonal
    [0, 4, 8],
    [2, 4, 6]
  ]

  // Loop through each possible win scenario and determine if there is a win
  for (let i in wins) {
    // Retrieve a list of elements from the poles array according to each win combination
    let itms = wins[i].map(key => poles[key])
    // Check if the array represents a valid win
    if (itms.every(itm => itm.innerHTML === player)) {
      return {win: true, line: i, player}
    }
  }
  // Return false if no win was detected
  return {win: false, player}
}


console.log(JSON.stringify(testWin('X')))
console.log(JSON.stringify(testWin('O')))

div > span {
  width: 20px;
  height: 20px;
  display: inline-block;
}

<div>
  <span>X</span>
  <span>O</span>
  <span>O</span>
</div>
<div>
  <span></span>
  <span>X</span>
  <span></span>
</div>
<div>
  <span></span>
  <span></span>
  <span>X</span>
</div>

Answer 2

We can extract the first 3 items from the array using the slice method, and then check if each item has an innerHTML value of "X" by utilizing the every function:

poles = Array.from(document.querySelectorAll('div > span'))

let first3 = poles.slice(0, 3)

if (first3.every(i => i.innerHTML === 'X')) {
  console.log('Row 1 contains all x')
} else {
  console.log('Row 1 doesn\'t contain all x')
}

<div>
  <span>X</span>
  <span>X</span>
  <span>X</span>
</div>
<div>
  <span></span>
  <span></span>
  <span></span>
</div>
<div>
  <span></span>
  <span></span>
  <span></span>
</div>

If we change one item to have a value of "O" instead of "X", the result will indicate that it does not contain all "X"s:

poles = Array.from(document.querySelectorAll('div > span'))

let first3 = poles.slice(0, 3)

if (first3.every(i => i.innerHTML === 'X')) {
  console.log('Row 1 contains all x')
} else {
  console.log('Row 1 doesn\'t contain all x')
}

<div>
  <span>X</span>
  <span>O</span>
  <span>X</span>
</div>
<div>
  <span></span>
  <span></span>
  <span></span>
</div>
<div>
  <span></span>
  <span></span>
  <span></span>
</div>

A more advanced approach involves creating a function called testWin() that examines the game board for a winning scenario based on the provided parameter, either "X" or "O". Simply call the function with the desired player symbol:

Create a function with an array of possible win combinations
Iterate over all possible wins
Generate a temporary array of elements using map to retrieve 3 elements at a time
Determine if every element's innerHTML matches the player symbol passed as a parameter

poles = Array.from(document.querySelectorAll('div > span'))

function testWin(player) {
  // An array containing all possible win scenarios
  let wins = [
    // Horizontal
    [0, 1, 2],
    [3, 4, 5],
    [6, 7, 8],
    // Vertical
    [0, 3, 6],
    [1, 4, 7],
    [2, 5, 8],
    // Diagonal
    [0, 4, 8],
    [2, 4, 6]
  ]

  // Loop through each possible win scenario and determine if there is a win
  for (let i in wins) {
    // Retrieve a list of elements from the poles array according to each win combination
    let itms = wins[i].map(key => poles[key])
    // Check if the array represents a valid win
    if (itms.every(itm => itm.innerHTML === player)) {
      return {win: true, line: i, player}
    }
  }
  // Return false if no win was detected
  return {win: false, player}
}


console.log(JSON.stringify(testWin('X')))
console.log(JSON.stringify(testWin('O')))

div > span {
  width: 20px;
  height: 20px;
  display: inline-block;
}

<div>
  <span>X</span>
  <span>O</span>
  <span>O</span>
</div>
<div>
  <span></span>
  <span>X</span>
  <span></span>
</div>
<div>
  <span></span>
  <span></span>
  <span>X</span>
</div>

Answer 3

Answer №2

Here's a snippet of code you can utilize:

let check = true;
for (let i = 1; i < 4; i++) {
   if (elements[i].innerHTML !== "X") {
      check = false;
   }
}
if (check) {
   // Only X values found
} else {
   // Other values besides X present
}

Answer 4

Here's a snippet of code you can utilize:

let check = true;
for (let i = 1; i < 4; i++) {
   if (elements[i].innerHTML !== "X") {
      check = false;
   }
}
if (check) {
   // Only X values found
} else {
   // Other values besides X present
}

Tips for using the .innerHTML method to reference multiple indexes

Answer №1

Answer №2

Similar questions

During post-processing, the elimination of lens flares can sometimes lead to an error known as "copyTexImage2D: framebuffer is

Filling out a form within a webpage fetched through a DOMParser

Is there a way to automatically convert a webpage to a PDF when it is requested?

What could be causing the state to continuously appear as null in my redux application?

invoke a managed bean to execute JavaScript code

After a successful login, learn how to implement a bottom tab menu in React Native

Tips for defining a distinct series of key-value pairs in typescript

What could be the reason for my function throwing a TypeError with the message "<function> is not a function"?

Having trouble with Javascript's JSON.stringify or PHP's json_decode?

Detecting Scroll on Window for Specific Element using Jquery

The resizing function on the droppable element is malfunctioning on Mozilla browsers

What is the most effective way to include JavaScript code in a PDF file?

When working with JObject return type, an empty Array will be returned in JSON

Refreshing the view following a model update within an AJAX call in the Backbone framework

Adjusting the quantity of buttons in real-time following an ajax request

Exploring nested arrays of objects and applying value constraints

The unique format created by tinyMce is not being displayed

Changing a date string to MM DD format in React without using plain JavaScript

Can you explain the purpose of the fix unwind operation in MongoDB?

Tips for isolating the month values from the res.body.results array of objects with the help of JS Array map()