Почему при удалении обработчика цвет фона ссылки не меняется?

Question

Использую только Js.По заданию, пhи клике на ссылку, её фон должен менять цвет на красный, при клике на следующую или предыдущую убирает у текущей выбранной ссылки фон и подсвечивает выбранную

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>

    </style>
    <div>
        <a href="first">FirstLink</a><br><br>
        <a href="second">SecondLink</a><br><br>
        <a href="third">ThirdLink</a><br><br>
    </div>
    <p></p>
</head>
<body>

</body>

<script>
let links=document.querySelectorAll("a"),
    p=document.querySelector("p")
links.forEach(link=>{
    link.addEventListener("click",func)

})

function func(){
    event.preventDefault()
    this.style.background='red'
    if(this.nextSibling===event.target||this.previousSibling===event.target){
     this.removeEventListener('click',func)
    }
    p.innerHTML=`Your click on link:${this.innerHTML}`
}
</script>

</htm

Answer 1

Я бы сделал так. Удалил лишнее, чтобы было похоже на шаблон.

<a href="#">FirstLink</a>
<a href="#">SecondLink</a>
<a href="#">ThirdLink</a>
<style>
    .red-bg{
        background-color: red;
    }
</style>
<script>
    document.querySelectorAll("a").forEach(a => {
        a.addEventListener("click", func);
    });
    function func(){
        let x = document.getElementsByClassName("red-bg")[0];
        if (x) {
            x.classList.remove("red-bg");
        }
        this.classList.add("red-bg");
    }
</script>

Здесь не нужно искать все элементы и убирать у каждого фон, достаточно найти 1 уже выделенную ссылку, ведь она всегда одна.

БЛОГ НА HUSL

Почему при удалении обработчика цвет фона ссылки не меняется?

Ответы (1 шт):