Добавление eventListeners mouseover и mouseout к чему-либо с getElementByTagName (), применяющим событие только к последнему элементу

Question

все.В настоящее время у меня есть проблема с загадкой из 15 слайдов, которую я пытаюсь сделать.Критерий состоит в том, что, когда я наводю курсор мыши на кусок в моей головоломке с слайдами, он должен установить границу на этом фрагменте как красный, а когда я убираю с нее мышь, граница должна снова стать черной.Проблема в том, что события mouseover и mouseout, похоже, работают только с последним элементом, прошедшим через цикл for, и у меня возникают проблемы при разработке решения.

Я пробовал много разных способов,включая написание EventListeners с другими комбинациями кода, но не получили успешного результата.Это на самом деле самое близкое, что я получил.

Вот конкретный код, о котором идет речь:

function movePiece(){
    var elements = document.getElementById("puzzlearea").getElementsByTagName('div');

    for(var i=0; i<elements.length; i++){

        var item = elements.item(i);

        elements[i].addEventListener('mouseover', function(e){
            item.style.border = "5px solid red";
        },false);

        elements[i].addEventListener('mouseout', function(e){
            console.log(item);
            item.style.border = "5px solid black";
        },false);
    }
}

И HTML, который идет вместе с ним (я хотел бы отметить, что этоприсвоение класса, поэтому, к сожалению, изменение этого HTML не допускается):

        <div id="puzzlearea">
            <!-- the following are the actual fifteen puzzle pieces -->
            <div>1</div>  <div>2</div>  <div>3</div>  <div>4</div>
            <div>5</div>  <div>6</div>  <div>7</div>  <div>8</div>
            <div>9</div>  <div>10</div> <div>11</div> <div>12</div>
            <div>13</div> <div>14</div> <div>15</div>
        </div>

А вот код, который показывает, как я создаю головоломку, а затем перетасовываю ее после нажатия кнопки перемешивания:

window.onload = onPageLoad;

/*
 * Loads the page with the initial puzzle, and operates all game logic.
 */
function onPageLoad() {
  createPuzzle();
  document.getElementById("shufflebutton").onclick = makeShuffle;
}

function playGame() {
    movePiece();
}

/*
 * Creates the initial puzzle. We go through each div in the puzzlearea
 * and set the position of the tile, as well as the image. This puzzle is
 * created in the correct, or completed, order.
 */
function createPuzzle() {
  var puzzlePiece = document.getElementById("puzzlearea").getElementsByTagName('div');
  for(let i = 0; i < puzzlePiece.length; i++) {
    var item =  puzzlePiece.item(i);
    item.style.left = getLeftPosition(i);
    item.style.top = getTopPosition(i);
    item.style.backgroundPosition = getBackgroundPosition(i);
  }
}

/*
 * Shuffles the puzzle board. We go through each div in the puzzlearea
 * and set the position of the tile, as well as the image, based on the
 * shuffled order.
 */
function makeShuffle() {
  var puzzlePiece = document.getElementById("puzzlearea").getElementsByTagName('div');
  // Array of 0-14 in random order.
  var order = shuffleBoard();
  for(let i = 0; i < puzzlePiece.length; i++) {
    var loc = order[i];
    var item =  puzzlePiece.item(i);
    item.style.position = "absolute";
    item.style.left = getLeftPosition(loc);
    item.style.top = getTopPosition(loc);
    item.style.backgroundPosition = getBackgroundPosition(i);
  }
    playGame();
}

И, при необходимости, немного соответствующего CSS:

#puzzlearea {
  width: 400px;
  height: 400px;
  font-size: 40pt;
  color: white;
  margin-left: auto;
  margin-right: auto;
  position: relative;
}

#puzzlearea div {
  background-image: url('background.jpg');
  width: 90px;
  height: 90px;
  border: 5px solid black;
  float: left;
  cursor: default;
}

Я ценю любую помощь!

Answer 1

Вам вообще не нужны события javascript, просто используйте новый селектор CSS

#puzzlearea div:hover {
  border-color: red;
}

вот демо с большей частью вашего кода

#puzzlearea {
  width: 400px;
  height: 400px;
  font-size: 40pt;
  color: white;
  margin-left: auto;
  margin-right: auto;
  position: relative;
}

#puzzlearea div {
  background-image: url('background.jpg');
  width: 90px;
  height: 90px;
  border: 5px solid black;
  float: left;
  cursor: default;
}

#puzzlearea div:hover {
  border-color: red;
}

#puzzlearea div.state-1:hover {
  border-color: green;
}

#puzzlearea div.state-2:hover {
  border-color: purple;
}

<div id="puzzlearea">
    <!-- the following are the actual fifteen puzzle pieces -->
    <div class="state-1">1</div>  <div class="state-2">2</div>  <div>3</div>  <div>4</div>
    <div class="state-1">5</div>  <div class="state-2">6</div>  <div>7</div>  <div>8</div>
    <div>9</div>  <div>10</div> <div>11</div> <div>12</div>
    <div>13</div> <div>14</div> <div>15</div>
</div>

Answer 2

Как уже упоминалось, вы можете легко достичь этого с помощью CSS.Но поскольку это всего лишь шаг в рамках более крупного плана действий, ваша функция должна работать, изменив значение item.style.border на e.target.style.border.

Это потому, что во время применения прослушивателя событий цикл завершился, и функции eventHandler (прикрепленные к каждому элементу) возвращаются к item как к последнему элементу в for loop.

function movePiece(){
    var elements = document.getElementById("puzzlearea").getElementsByTagName('div');

    for(var i=0; i<elements.length; i++) {

        elements[i].addEventListener('mouseover', function(e){
            e.target.style.border = "5px solid red";
        },false);

        elements[i].addEventListener('mouseout', function(e){
            console.log(e.target);
            e.target.style.border = "5px solid black";
        },false);
    }
};

Тот же результат можно использовать с forEach() внутри for loop или с помощью let вместо var внутри самого цикла, но для новичка было бы лучше простосоздайте автономные eventHandlers.

Я бы порекомендовал погуглить 'для цикла eventlistener', так как по этому вопросу доступно много ресурсов.

Answer 3

Вы можете просто добавить селектор наведения к вашему CSS

border: 5px solid black;

:hover {
    border: 5px solid red;
}