如何使用 javascript 更改元素的 CSS？

Question

我试图通过查询元素并使用

classList.add()

来更新元素的类以更改其样式来隐藏 div 容器。我在一个函数中有一系列条件，我在函数底部用

var registrationButton

做同样的事情没有问题，但我有

var navItemsContainer

。难道我做错了什么？这是我的代码...

<div class="nav-container view">
        <div class="row">
          <div class="col-full">
                <div class="nav-container">
                  <h2 class="title"><a href="/">Stocknetic</a></h2>
                    <div class="nav-items-container">
                      <ul class="nav-list-items">
                            <li class="nav-list-item"><a href="#/watchlist">Watchlist</a></li>
                            <li class="nav-list-item"><a href="#/statistics">Statistics</a></li>
                            <li class="nav-list-item"><a href="#/news">News</a></li>
                            <li class="nav-list-item"><a href="#/profile">Profile</a></li>
                          </ul>
                        </div>
                </div>
              </div>
        </div>
      </div>

      <div class="home-container view" data-view="home">
        <div class="logo-container">
          <div class="logo-text-container">
            <h1 class="logo">Stocknetic</h1>
          </div>
        <div class="auth-buttons-container">
          <button id="sign-in-button">Sign In</button>
          <button id="register-button">Register</button>
          <button id="sign-out-button">Sign Out</button>
        </div>
      </div>
      </div>

var root = window.location.protocol + '//' + window.location.host + '/';
var currentURL = window.location.href
var homeViewEl = document.querySelector('[data-view="home"]')
var homeView = homeViewEl.getAttribute("data-view")
var watchlistViewEl = document.querySelector('[data-view="watchlist"]')
var watchlistView = watchlistViewEl.getAttribute("data-view")
var registrationViewEl = document.querySelector('[data-view="registration"]')
var registrationView = registrationViewEl.getAttribute("data-view")

function handleViewChanges() {
    
    if (currentURL === root || currentURL === `${root}#/${registrationView}`) {
        var navItemsContainer = document.querySelector(".nav-items-container");
        navItemsContainer.classList.add("hidden")
        console.log(navItemsContainer)
    } 

    if (currentURL === root) {
        renderHomePage()
    } 
    
    if (currentURL === `${root}#/${registrationView}`) {
        renderRegistrationPage()
    }
    
    if (currentURL === `${root}#/${watchlistView}`) {
        renderWatchlistPage()
    }

    if (sessionStorage.getItem("id") !== null) {
        var registrationButton = document.querySelector("#register-button")
        registrationButton.classList.add("hidden")
    }
}

handleViewChanges()

function renderHomePage() {
    homeViewEl.classList.remove("hidden")
}

    var registrationButton = document.querySelector("#register-button")
    registrationButton.addEventListener("click", renderRegistrationPage)

function renderRegistrationPage() {
    // var url = new URL(`${root}#/${registrationView}`)
    // window.location.replace(url)

    homeViewEl.classList.add("hidden")
    registrationViewEl.classList.remove("hidden")
    
    console.log("see registration page")

}

var signInButton = document.querySelector("#sign-in-button")
signInButton.addEventListener("click", signIn)

function signIn() {
    sessionStorage.setItem("id", "user")

    homeViewEl.classList.add("hidden")
    var registrationButton = document.querySelector("#register-button")
    registrationButton.classList.add("hidden")

    var url = new URL(`${root}#/${registrationView}`)
    window.location.replace(url)
    
}

var signOutButton = document.querySelector("#sign-out-button");
signOutButton.addEventListener("click", signOut)

function signOut() {
    sessionStorage.clear()

    
    var registrationButton = document.querySelector("#register-button")
    registrationButton.classList.remove("hidden")

    window.location.replace(`${root}`)
}

function renderWatchlistPage() {
    // var url = new URL(`${root}#/${watchlistView}`)
    // window.location.replace(url)

    var navItemsContainer = document.querySelector(".nav-items-container");
    navItemsContainer.classList.remove("hidden")

    homeViewEl.classList.add("hidden")
    watchlistViewEl.classList.remove("hidden")

    console.log("watchlist page")
}

function renderStatisticsPage() {
    console.log("statistcs page")
}

function renderNewsPage() {

}

function renderProfilePage() {
    
}

function hideScrollBar() {
    var pageWrapper = document.querySelector(".page-wrap")
    
    console.log(document.body.clientHeight)
    console.log(document.body.scrollHeight)

    if (document.body.clientHeight === document.body.scrollHeight) {
        document.body.style.overflow = "hidden"
    } else if (document.body.clientHeight !== document.body.scrollHeight) {
        document.body.style.overflow = "auto"
    }
}

hideScrollBar()

.hidden {
    display: none;
}