Можно ли изменять innerHTML / textContent туда и обратно (бесконечно)? - PullRequest
Новая
       10

Можно ли изменять innerHTML / textContent туда и обратно (бесконечно)?

0 голосов
/ 18 января 2019

Так что я подумываю изменить innerHTML <p>Click</p> с содержимого «Click» на «Clicked», и при повторном нажатии он снова изменится на «Click» (и его можно будет снова щелкнуть, чтобы в результате «Clicked») на бесконечные времена).

Может кто-нибудь дать подсказку? * Я ценю,

Пока это моя неудачная попытка -> 

<!DOCTYPE html>
<body>
<p id="event_01">Click</p>

<script>
    let goo = document.querySelector("#event_01");

    let clickOnce = function() {goo.innerHTML = "Clicked"};

    let clickBack = function(){
    goo.innerHTML = "Click"};

    if(goo.textContent == "Click") {
        goo.addEventListener("click", clickOnce);
    } else if (goo.textContent == "Clicked") {
        goo.addEventListener("click", clickBack);
    }

</script>

</body>

Ответы [ 5 ]

0 голосов
/ 18 января 2019

Если вы не хотите использовать функции или переменные, вы можете использовать e.target.textContent 

<!DOCTYPE html> 
<body>
    <p id="event_01">Click</p>
    <script>
        document.querySelector("#event_01").addEventListener('click', (e) => {
            if (e.target.textContent === 'Click') {
                e.target.textContent = 'Clicked'
            } else if (e.target.textContent === 'Clicked') {
                e.target.textContent = 'Click'
            }
        })
    </script>
</body>
0 голосов
/ 18 января 2019

Это просто. Ваше добавление к большому количеству кода. сначала при нажатии кнопки p вы назначаете событие clickOnce, но в ClickOnce назад вы никогда не назначаете clickBack.

Вот пример того, что вы хотите сделать. 

       let goo = document.querySelector("#event_01");

       let clickMe = function() { 
       if(goo.textContent == "Click")
       {
         goo.innerHTML = "Clicked";
       }
       else
       {
         goo.innerHTML = "Click";
       }
       
       }


    
     goo.addEventListener("click", clickMe);
       <p id="event_01">Click</p>
0 голосов
/ 18 января 2019

Вам нужен только один слушатель, присоединенный с самого начала: 

let goo = document.querySelector("#event_01");
goo.addEventListener("click", clickListener);

let clickListener = function() {
    if (goo.innerHTML == "<p>Click</p>")
        goo.innerHTML = "<p>Clicked</p>";
    else
        goo.innerHTML = "<p>Click</p>";
}
0 голосов
/ 18 января 2019

Вы должны поместить свое состояние в обработчик кликов, а не снаружи. То, что находится между тегом скрипта, будет выполнено только один раз. Когда код запускается (при загрузке страницы), содержимое goo - это Click, так что только элемент прослушивания, который устанавливает контент на «clicked», присоединяется к элементу. вместо этого вы должны сделать что-то вроде этого: 

let goo = document.querySelector("#event_01");

let onClick = function() {
    if(goo.textContent == "Click"){
        goo.innerHTML = "Clicked";     
    } else {
        goo.innerHTML = "Click";
    }
};


goo.addEventListener("click", clickOnce);
0 голосов
/ 18 января 2019

Вам просто нужно проверить значение .innerHTML <p></p>, сравнить его с текущим .innerHTML и изменить его соответственно 

<!DOCTYPE html>
       <body>
       <p id="event_01" onClick="myFunction()">Click</p>
       <script>

           function myFunction() {
               var x = document.getElementById("event_01");
               if (x.innerHTML === "Click") {
                    x.innerHTML = "Clicked";
               } else {
                    x.innerHTML = "Click";
               }
           }

       </script>
       </body>
...