Не работает removeEvenListener

Question

Задача состоит в том что надо сверстать карточку и сделать работающую кнопку Show Details при нажатии который будет всплывать доп. информация. Кнопка выводит доп. инфу но не убирает ее. removeEvenListener почему то не работает.

JavaScript

const button = document.querySelector('button');
const ul = document.querySelector('ul');

ul.style.display = 'none';

button.addEventListener('mouseover', (event) => {
    event.target.style.backgroundColor = 'steelblue';
});
button.addEventListener('mouseout', (event) => {
    event.target.style.backgroundColor = 'dodgerblue';
});


function addLi(event) {
  ul.style.removeProperty('display');
  event.target.innerHTML = 'Hide Detail'
  event.target.removeEventListener('click', addLi);
}



const elements = document.querySelectorAll('button');

elements.forEach((element) => {  
  element.addEventListener('click', addLi);

  
});

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Пример веб-страницы</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,600;1,300&family=Roboto:ital,wght@0,300;0,400;1,300&display=swap" rel="stylesheet">
 </head>
 <body>
     <div class = "wraper">
        <h1>Beats Studio 3 Wireless</h1>
        <p class = "rap">High-performance wireless noise cancelling headphones. Compatible with iOS and Android devices. Up to 22 hours of battery life enables full-featured all-day wireless playback.</p>
        <ul>
            <li>Brand: Beats</li>
            <li>Connections: Bluetooth</li>
            <li>Model Name: Beats Studio3</li>
            <li>Color: Matte Black</li>
            <li>Headphones Jack: 3.5 mm</li>
        </ul>
        <button>Show Detail</button>
     </div>
 </body>
</html>

CSS

* {
    font-family: 'Montserrat', sans-serif;
}

h1 {
    font-size: 30px;
}

.wraper {
    background-color: lightblue;
    border-radius: 10px;
    margin: 50px;
    padding: 20px;
}

button {
   background-color: dodgerblue;
   padding-left: 30px;
   padding-right: 30px;
   border-radius: 10px;
   outline: none;
   border: 0;
   
}

ul {
    
}

Answer 1

Вы можете проверить состояния display и изменить элемент на основе этого. И на мой взгляд у вас будет много таких элементов, так что можете использовать event.target.previousElementSibling для доступа к предыдущему элементу в списке.

document.addEventListener('DOMContentLoaded', () => {
    const button = document.querySelector('button');
    const ul = document.querySelector('ul');

    ul.style.display = 'none';

    button.addEventListener('mouseover', (event) => {
        event.target.style.backgroundColor = 'steelblue';
    });
    button.addEventListener('mouseout', (event) => {
        event.target.style.backgroundColor = 'dodgerblue';
    });


    // function addLi(event) {
    //     ul.style.removeProperty('display');
    //     event.target.innerHTML = 'Hide Detail'
    //     event.target.removeEventListener('click', addLi);
    // }



    const elements = document.querySelectorAll('button');

    elements.forEach((element) => {
        element.addEventListener('click', (event) => {
            event.preventDefault()
            const display = event.target.previousElementSibling.style.display
            if (!display || display == 'none') {
                event.target.previousElementSibling.style.display = 'block'
                event.target.innerHTML = 'Hide Detail'
            } else {
                event.target.previousElementSibling.style.display = 'none'
                event.target.innerHTML = 'Show Detail'
            }
        });
    });
})

* {
    font-family: 'Montserrat', sans-serif;
}

h1 {
    font-size: 30px;
}

.wraper {
    background-color: lightblue;
    border-radius: 10px;
    margin: 50px;
    padding: 20px;
}

button {
    background-color: dodgerblue;
    padding-left: 30px;
    padding-right: 30px;
    border-radius: 10px;
    outline: none;
    border: 0;
}

ul {}

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Пример веб-страницы</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,600;1,300&family=Roboto:ital,wght@0,300;0,400;1,300&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="./src/style.css">
    <script src="./src/script.js"></script>
</head>

<body>
    <div class="wraper">
        <h1>Beats Studio 3 Wireless</h1>
        <p class="rap">High-performance wireless noise cancelling headphones. Compatible with iOS and Android devices. Up to 22 hours of battery life enables full-featured all-day wireless playback.</p>
        <ul>
            <li>Brand: Beats</li>
            <li>Connections: Bluetooth</li>
            <li>Model Name: Beats Studio3</li>
            <li>Color: Matte Black</li>
            <li>Headphones Jack: 3.5 mm</li>
        </ul>
        <button>Show Detail</button>
    </div>
</body>

</html>

БЛОГ НА HUSL

Не работает removeEvenListener

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