When I use ternary operator to update value of nextEvent, the code looks like this and works fine
var open = document.getElementById("openNav")
var close = document.getElementById("closeNav")
var events = {
    menuOpened : "menu opened",
    menuClosed : "menu closed",
};
var nextEvent = events.menuOpened;
const toggleNav = () => {
    console.log(nextEvent);
    nextEvent = nextEvent==events.menuClosed?events.menuOpened:events.menuClosed;
    open.classList.toggle("hide");
    close.classList.toggle("hide");
};<nav class="nav-wrapper" id="navWrapper">
    <div class="toggle-nav" id="openNav" onclick="toggleNav()">
        <img src="menu_52px.png" alt="menu" />
    </div>
    <div class="toggle-nav hide" id="closeNav" onclick="toggleNav()">
        <img src="close_52px.png" alt="menu" />
    </div>
</nav>But I'm trying to input the JSON property name as string at the onclick listener in the html portion. But this does not works.
var open = document.getElementById("openNav")
var close = document.getElementById("closeNav")
var events = {
    menuOpened : "menu opened",
    menuClosed : "menu closed",
};
const toggleNav = (event) => { //changed line
    console.log(events.event); //changed line
    open.classList.toggle("hide");
    close.classList.toggle("hide");
};<nav class="nav-wrapper" id="navWrapper">
    <div class="toggle-nav" id="openNav" onclick="toggleNav('menuOpened')"> /* changed line */
        <img src="menu_52px.png" alt="menu" />
    </div>
    <div class="toggle-nav hide" id="closeNav" onclick="toggleNav(menuClosed)"> /* changed line */
        <img src="close_52px.png" alt="menu" />
    </div>
</nav>Even if I use events[event], the problem remains. I think that my approach to the problem is mistaken or something else. Please suggest solutions to this problem.