Не удается удалить класс при onmouseout

#javascript #html #css

#javascript #HTML #css

Вопрос:

моя логика проста . Что я хочу сделать, так это то, что когда я нажимаю на кнопку 1, она показывает мне цветной квадрат, но когда я нажимаю на нее, она исчезает, но я не могу заставить работать исчезающую часть, я не знаю, что не так.

 function screen(){
    let btn= document.getElementsByTagName("button");

    let p = document.createElement('p');
    
    btn[0].appendChild(p);

    if (btn[0].onmouseout){
        btn[0].removeChild(p);

    }    
}

 body{
    background-color: lightgrey;
}


.btn__div{
    display: flex;
    flex-direction: column;
    gap: 2em;
    margin-top: 2em;
    width: 40%;
    margin: 0 auto;
}


p{
    background: yellow;
    height: 200px;
    width: 200px;
    position:absolute;
    top: 0;
    left: 0;
    
}

 <header>
    

        <div class="btn__div">
        <button onmouseover='screen()'>CLICK ME</button>
        <button>CLICK ME 2</button>
        <button>CLICK ME 3</button>
   
    

    <script src="index.js"></script>

Развернуть фрагмент

e исчезает часть для работы

1. if(btn[0].onmouseout) если mouseout соответствует действительности, это не имеет ничего общего с событиями, которые вы проверяете, установлено ли свойство. Вы не привязываете событие.

Ответ №1:

Вам нужно привязать событие, а не проверять, что оно соответствует действительности

 function screen(){
    let btn= document.getElementsByTagName("button")[0];

    let p = document.createElement('p');
    p.textContent = 'foo';
    
    btn.appendChild(p);

    function removeIt(){
       btn.removeChild(p);
       btn.removeEventListener("mouseout", removeIt);
    }

    btn.addEventListener("mouseout", removeIt);
 
}

 body{
    background-color: lightgrey;
}


.btn__div{
    display: flex;
    flex-direction: column;
    gap: 2em;
    margin-top: 2em;
    width: 40%;
    margin: 0 auto;
}


p{
    background: yellow;
    height: 200px;
    width: 200px;
    position:absolute;
    top: 0;
    left: 0;
    
}

 <header>
    

        <div class="btn__div">
        <button onmouseover='screen()'>CLICK ME</button>
        <button>CLICK ME 2</button>
        <button>CLICK ME 3</button>
   
    

    <script src="index.js"></script>

Развернуть фрагмент

1. Есть ли лучший способ сделать это с добавлением классов через javascript или что-то вроде того же?

2. я имею в виду, что если я создам класс с помощью javascript и добавлю его в btn [0] .. должен ли я использовать тот же код или я могу сделать это без создания функции внутри функции?

3. можете ли вы немного объяснить, почему должна быть « btn [0].removeEventListener(‘mouseout’, удалить)« эта строка кода? когда мы уже удалили дочерний элемент, почему мы должны удалять прослушиватель событий?

4. потому что, если вы этого не сделаете, вы будете продолжать добавлять все больше и больше событий к кнопке.

Ответ №2:

Вы можете создать вторую функцию, которая отвечает за удаление элемента <p> :

 function screenRemove() {
    let p = btn.getElementsByTagName("p")[0];
    btn.removeChild(p);
}

Также, пожалуйста, обратите внимание на то, что вы ссылаетесь на <p> тег, начинающийся с btn:

 let p = btn.getElementsByTagName("p")[0];

Это позволит вам быть точным при обращении к этому тегу.

И укажите само событие onmouseout внутри тега button. Вот так:

 <button onmouseover="screenCreate();" onmouseout="screenRemove();">CLICK ME</button>

Полный код:

 let btn = document.getElementsByTagName("button")[0];

function screenCreate() {
    let p = document.createElement("p");
    btn.appendChild(p);
}

function screenRemove() {
    let p = btn.getElementsByTagName("p")[0];
    btn.removeChild(p);
}

 body {
    background-color: lightgrey;
}

.btn__div {
    display: flex;
    flex-direction: column;
    gap: 2em;
    margin-top: 2em;
    width: 40%;
    margin: 0 auto;
}

p {
    background: yellow;
    height: 200px;
    width: 200px;
    position: absolute;
    top: 0;
    left: 0;
}

 <div class="btn__div">
    <button onmouseover="screenCreate();" onmouseout="screenRemove();">CLICK ME</button>
    <button>CLICK ME 2</button>
    <button>CLICK ME 3</button>
</div>

Развернуть фрагмент