0

i am making a chess game using js html and css what i am trying to do is i have given every pawn an onclick function which gets id of pawns parent div/block and based on that it highlights the blocks where the pawn can go but when i get the id of parent div it gives me id of another div idk why can some one help me

my code

html

<div id="7b" class="whitesmoke"><button class="Btns r7"></button></div>
<div id="7b"><button class="Btns r7"></button><div id="mp1" class="blp"></div></div>
<div id="7b" class="whitesmoke"><button class="Btns r7"></button></div>
<div id="7b"><button class="Btns r7"></button><div id="mp2" class="blp"></div></div>
<div id="7b" class="whitesmoke"><button class="Btns r7"></button></div>
<div id="7b"><button class="Btns r7"></button><div id="mp3" class="blp"></div></div>
<div id="7b" class="whitesmoke"><button class="Btns r7"></button></div>
<div id="7b"><button class="Btns r7"></button><div id="mp4" class="blp"></div></div>

<div id="8b"><button class="Btns r8"></button><div id="mp5" class="blp"></div></div>
<div id="8b" class="whitesmoke"><button class="Btns r8"></button></div>
<div id="8b"><button class="Btns r8"></button><div id="mp6" class="blp"></div></div>
<div id="8b" class="whitesmoke"><button class="Btns r8"></button></div>
<div id="8b"><button class="Btns r8"></button><div id="mp7" class="blp"></div></div>
<div id="8b" class="whitesmoke"><button class="Btns r8"></button></div>
<div id="8b"><button class="Btns r8"></button><div id="mp8" class="blp"></div></div>
<div id="8b" class="whitesmoke"><button class="Btns r8"></button></div>

js

for (let i=0; i<8; i++) {
let blps = document.getElementsByClassName("blp")[i]
let whps = document.getElementsByClassName("whp")[i]
whps.onclick = function() {moveblp(i)};
blps.onclick = function() {movewhp(i)};
}


function movewhp(a) {
let pawn = document.getElementsByClassName("whp")[a]
let parent = Number.parseInt(pawn.parentElement.id)

console.log(parent)

}

b stands for block and r stands for row i have 8x8 rows so total 64 parent divs

  • 2
    [Does ID have to be unique in the whole page?](https://stackoverflow.com/q/9454645) – VLAZ Nov 28 '22 at 10:50

2 Answers2

1

The reason is because you have multiple similar ids used. (multiple 7bs and 8bs id). To fix this, change those ids to unique ids.

Mohd Yashim Wong
  • 256
  • 2
  • 4
1

The ID attribute must be unique:

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id

Try using, with the same mechanics, a class instead of an id, by invoking "getElementsByClassName" you will get a collection of elements that correspond to the elements you want to highlight. Using IDs you would only get the first element of the list..

EDIT:

Try modifying your for loop as follows:

const blps = document.getElementsByClassName("blp");
const whps = document.getElementsByClassName("whp");

for (let i = 0; i < 8; i++) {
    const whpsItem = whps.item(i);
    const blpsItem = blps.item(i);
    whpsItem.onclick = function () {
        moveblp(whpsItem);
    };
    blpsItem.onclick = function () {
        movewhp(blpsItem);
    };
}

In any case I wouldn't use the index to refer to the DIV, you could pass the clicked element directly to the movewhp function

function movewhp(pawn) {
    let parent = Number.parseInt(pawn.parentElement.id);
    console.log(parent);
}
Plastic
  • 9,874
  • 6
  • 32
  • 53
  • i have tried what you said but it dosent work –  Nov 28 '22 at 11:14
  • i have changed its ids to 7b1 7b2 7b3.. so on but when i click the pawn in 8b8 it returns 2b8 –  Nov 28 '22 at 11:18
  • Did you try it? does it works? – Plastic Nov 28 '22 at 13:51
  • 1
    no actually the problem was i gave black pawns function of white pawns –  Nov 29 '22 at 09:17
  • In any case, I advise against using the index of the collection of HTML elements as a reference, the order is not reliable for creating a structure. When you click, you pass the clicked HTML object directly to the highlight function and from there you can navigate the DOM in search of the boxes to highlight. – Plastic Nov 29 '22 at 11:24