Js dom help please?

I have an menu. When you click to menu items, red border is appear. I want to that if the user click to another items (home, article) portfolio sub items’s border is remov while portfolio sub items is selected. I think you will better understand with code. I wrote some code for this but doesn’t work. I marked the code with (****code) that i think there is a issue.

I am not quite following what you are attempting to do. Currently, I can click on Portfolio and a red vertical line appears to the text “Portfolio”. If I click on a sub menu of Portfolio like “Website Work”, then another red vertical bar appears to the left of the text “Website Work”. Is this the behavior you want so far?

Then, if I click on “Article” link, a red vertical bar appears next to the text “Article”, the red vertical bar disappears by “Portfolio” but the red vertical bar remains by the text “Website Work”.

I assume you are wanting the red vertical bar by “Website Work” to disappear also. Is that correct?

When your app loads, you currently have errors showing in the console that you need to fix first. Once your app loads without the errors, I will investigate further.

yes, correct. For errors, yes there are errors but they are working except this issue. When i inspect another web sites there are many errors in console. I’am not sure but if code work, some errors can be ignore.

The problem could be complicated by these errors. You should always resolve console.log errors before moving to other code as you could have “side effects” that make it hard to debug other code sections. If you fix your console.log errors, I will spend the time to help with your current issue.

Okay, i will try. It work even it show me error in console. I don’t understand that.

FYI - Lines 25, 33, 44 and line 62 are causing your console error messages. The app still “worked” because the problem from the incorrect code was not affecting the buttons you had. When you are trying to debug other problems in your code though, it is very distracting to have other errors showing in the console.

Fix those two logic errors on those two lines (part of the for loop declaration) and the errors will go away.

Now as far as your current issue related to the red vertical bars:

for(let a = 0; a < portfolioLent; a++){
  portfolio_element[a].classList.remove('navbar--element--select');
}

I believe you intend for the code above to remove the red vertical bars off the sub menu buttons when clicking on anything that is not Portfolio related. Look at the class you are attempting to remove. Is that really the class name you want to remove from the sub menu items?

I will work on it. thanks

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.