Почему мой идентификатор не определен и почему я не могу изменить свойства css?

Question

Я не понимаю, почему мой идентификатор startButton не определен в моем коде. Проблема в том, что я не могу изменить CSS startButton ...: '(Не могли бы вы мне помочь?

        if(this.pauseButton.addEventListener("click", () => {
        clearInterval(idIntervale);


        const box = document.getElementById("playPause");
        this.startButton.setAttribute("id", "startButton");
        this.startButton.innerHTML = "<i class='fas fa-play'></i>"
        box.replaceChild(this.startButton, this.pauseButton);

    }));

, вот мой HTML код:

<div id="playPause">
<div id="pauseButton"> <i class="fas fa-pause"></i></div>
<div id="startButton"></div>
</div>

Answer 1

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

let playPause = document.body.querySelector("#playPause");
let startBtn = playPause.getElementById("startButton");
startButton.style.color = red; //or whatever style you want to do.

Я думаю, что вы не могли получить к нему доступ раньше потому что это был не прямой ребенок тела, а #playPause.
Надеюсь, это сработает!