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.