Switcher with getElementsByClassName("") not working

Marcel

I am fairly new to Java but can't seem to fix this problem;

  • When using getElementsByClassName("") the toggle is not working I get the error "Cannot set property 'display' of undefined"
  • Also when testing this JS with getElementByID("") when double clicking on the English button the text disappeared completely. I want to keep one visible at all time (so either English/ German)

Is there a solution to fix this? Thank you in advance :)

function showHideEnglish() {
  var english = document.getElementsByClassName("text__english");
  var german = document.getElementsByClassName("text__german");
  german.style.display = "none";
  if (english.style.display == "block") {
    english.style.display = "none";
  } else {
    english.style.display = "block";
  }
}

function showHideGerman() {
  var english = document.getElementsByClassName("text__english");
  var german = document.getElementsByClassName("text__german");
  english.style.display = "none";
  if (german.style.display == "block") {
    german.style.display = "none";
  } else {
    german.style.display = "block";
  }
}
<button onclick="return showHideEnglish();">English</button>
<button onclick="return showHideGerman();">German</button>
<div class="text__english" style="display:block;">This text is English</div>
<div class="text__german" style="display:none;">dieser Text ist auf Deutsch</div>

Ahmed Eid

getElementsByClassName return a a collection of all elements with this class name you need to access the elements inside the list

if you don't have other elements with the same class name this will work

 var english = document.getElementsByClassName("text__english")[0];
  var german = document.getElementsByClassName("text__german")[0];

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

getElementsByClassName is not working

Theme switcher not working , no cookie

getElementsByClassName and appendChild is not working as expected

javascript getElementsByClassName and setAttribute not working

Missing Window Switcher and Expo not working

Modal open using getElementsByClassName not working

document.getElementsByClassName() not working properly?

Why isn't getElementsByClassName working?

My switcher demo code is not working as expected

Why isn't this jQuery image switcher working?

Workplace switcher stopped working in Ubuntu 16.04

JS getElementsByClassName(ClassName) Not Working : Nothing Happened

Rotate on scroll javascript not working when getElementsByClassName

classLList.toggle property not working with getElementsByClassName

Select all elements using getElementsByClassName in a function, not working

addEventListener isn't working with multi elements by getElementsByClassName

click() command not working on document.getElementsByClassName()

Why is document.getElementsByClassName not working in react?

Tablesorter not working when used inside Content Panel Switcher

Have been 2 weeks since I started learning DOM. Trying to make language switcher. Not working

Preventing Sensitive Information From Appearing In The Task Switcher - Apple Code Not Working - iOS 8 glitch?

Dark mode switcher in Nuxt 3 not working with official @nuxtjs/color-mode

Language switcher

addEventListener with getElementsByClassName

getElementsByClassName and innerHTML

Try GetElementsByClassName

Printing getElementsByClassName

Language switcher with bootstrap

Switcher implementation in Javascript