JS Tabs [SOLVED! 🎆]

Question

This is the problem: I was looking at the w3schools to learn how to make tabs using JS, and I was wondering why there is an "evt" variable in the code. I don't want my code to actually be in a different color when the user clicks a button and goes onto another tab. I tried writing the code out without using evt, but it didn't work. Can you please help?

This is the article that I looked at: https://www.w3schools.com/howto/howto_js_tabs.asp

Edit: I was having trouble coding my code bit on SoloLearn, and it was based on the article.
I wanted to remove the color that changes when you go to another tab. (not hover)
I simplified the code that was written on w3schools to make the coloring thing gone, but when I pressed a tab and went to go to another tab, it didn't work.

This is the code:
https://code.sololearn.com/Wa25A25A19a2

Answer 1

The problem is in one of two places and you can fix it in one of two places.

Pick only 1 of these fixes. If you make both changes, it'll be broken because you'll then get a string page but treat it like an HTMLDivElement.

Fix #1:
You can fix the problem by changing your openpage function. The "page" parameter is coming in as an HTMLDivElement instead of a string. The below will work:

function openpage(page) {
var tab = document.getElementsByClassName("tabcontent");
for (var i = 0; i < tab.length; i++) {
tab[i].style.display = "none";
}

page.style.display = "block";
}

Fix #2:
You could fix it in your HTML that calls openpage. onclick="openpage(home)" passes an HTMLDivElement instead of a string to your "page" parameter.
You could fix your problem by adding quotes like this:
onclick="openpage('home')"
That will make your "page" parameter the string "home" instead of the element with id="home".

I found this problem quickly by looking at Chrome developer tools and its JavaScript console. If you haven't used that, look up how to use it because it'll help you troubleshoot a lot of problems like this.

Answer 2

There is a lot of code on that article so it would be nice if you published the code with the problem. That would clarify where the problem is and how to reproduce it.

I suspect that evt is either referenced or you're removing a parameter without removing it from all ways the function is called. For example, the following code would break:
function openCity(cityName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(cityName).style.display = "block";
evt.currentTarget.className += " active";
}

It would break because the last line refers to evt which isn't defined.
Also, the callers passed openCity(event, 'London') which means the cityName won't even be a string.

If the above code is roughly what you're talking about and you don't like how the colours change, I would modify CSS instead of JavaScript. The original(unedited) code works well. CSS defines the effect of those CSS classes on colour. You could make it not change colour by leaving the JavaScript unchanged.

Answer 3

@JoshGreig
I was having trouble coding my code bit on SoloLearn, and it was based on the article.
I wanted to remove the color that changes when you go to another tab. (not hover)
I simplified the code that was written on w3schools to make the coloring thing gone, but when I pressed a tab and went to go to another tab, it didn't work.

This is the code:
https://code.sololearn.com/Wa25A25A19a2