Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by clinton garalde
clinton garalde
2,369 Points

JAVASCRIPT: Changing ALT text of <IMG> to change ONCLICK event

Basically, I have a small "hamburger" menu image which when clicked opens an off-canvas menu and at the same time changes the menu image to an "X".

I have the following code:

function besideMenu() {
    if (document.querySelector(".Beside-Menu").alt = "Closed Menu") {
        openMenu();
    } else if (document.querySelector(".Beside-Menu").alt = "Open Menu") {
        closeMenu();
    }
}

function openMenu() {
    const menuImage = document.querySelector(".Beside-Menu");
    const navMenu = document.querySelector(".link-menu");
    menuImage.src = "img/XMenu.jpg";
    navMenu.style.height = "100%";
    navMenu.style.width = "100%";
    document.querySelector(".Beside-Menu").alt = "Open Menu";
}

function closeMenu() {
    const menuImage = document.querySelector(".Beside-Menu");
    const navMenu = document.querySelector(".link-menu");
    menuImage.src = "img/EMenu.jpg";
    navMenu.style.height = "0%";
    navMenu.style.width = "0%";
    document.querySelector(".Beside-Menu").alt = "Closed Menu";
}

<a href="javascript:void(0)"><img src="img/EMenu.jpg" alt="Closed Menu" class="Beside-Menu" onclick="besideMenu()"/></a>

Now the opening part works, the ALT text is tested and opens the menu. When I try to close it I changed the ALT text and validates it as well, but is does not seem to go to the closeMenu function. Any help is appreciated. Thanks.

2 Answers

I Dilate
I Dilate
3,983 Points

Your if statements aren't using the right type of equals.

Use = to assign a value to a variable. Use == to compare two variables.

So in this case, you need to use:

function besideMenu() {
    if (document.querySelector(".Beside-Menu").alt == "Closed Menu") {
        openMenu();
    } else if (document.querySelector(".Beside-Menu").alt == "Open Menu") {
        closeMenu();
    }
}

Furthermore, you don't need to repeat your two variables, you can declare them outside of the functions just once, because their scope is not limited to inside the function (they're declared just once for the page):

const menuImage = document.querySelector(".Beside-Menu");
const navMenu = document.querySelector(".link-menu");
clinton garalde
clinton garalde
2,369 Points

Thanks I Dilate. Actually I did forget to mention that the console shows that the ALT text does change to "Open Menu". Anyway, it was the double == sign that did the trick. That's what happens when you use different languages simultaneously. Thanks!

I Dilate
I Dilate
3,983 Points
I Dilate
I Dilate
3,983 Points

When you close it, can you open your browser's inspector to see if the alt tag has been changed to 'Open Menu' please? It might give a clue to see how far your code is progressing before the problem occurs.