Uncaught Typeerror: Cannot Read Property 'Classname' of Undefined

Uncaught TypeError: Cannot read property 'className' of undefined jquery

From MDN

Event.srcElement is a proprietary alias for the standard Event.target property. It is specific to old versions of Microsoft Internet Explorer.

So change element.srcElement.className to element.target.className. You can also use this.className, since jQuery sets this to the event target.

$(window).click(function(element) {  alert(element.target.className);});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div class="root">  <div class="wrap_question_container">    <fieldset class="new_question">      <legend>Question</legend>      <p>        <label for="question_title">Title:</label>        <input type="text" placeholder="Question Title" name="question_title" required>        <br>      </p>      <div class="choice_add"></div>    </fieldset>  </div>  <br></div><input type="submit" value="Submit" name="submit_val">

W3 Slider - Uncaught TypeError: Cannot read property 'className' of undefined

There are no element found with var dots = document.getElementsByClassName("dot");

when try dots[slideIndex-1].className += " active";

it gives error Cannot read property 'className' of undefined

may be you messing some element of dot class in html

I added some div of dot class in html now it working fine

// SLIDER 

var slideIndex = 1;
showSlides(slideIndex);

// Next/previous controls
function plusSlides(n) {
    showSlides(slideIndex += n);
}

// Thumbnail image controls
function currentSlide(n) {
    showSlides(slideIndex = n);
}

function showSlides(n) {
    var i;
    var slides = document.getElementsByClassName("mySlides");
    //console.log(slides);
    var dots = document.getElementsByClassName("dot");
    if (n > slides.length) {slideIndex = 1}
    if (n < 1) {slideIndex = slides.length}
    for (i = 0; i < slides.length; i++) {
        slides[i].style.display = "none";
    }
    // console.log(slides);
    for (i = 0; i < dots.length; i++) {
        dots[i].className = dots[i].className.replace(" active", "");
    }
     //console.log(slides);
    slides[slideIndex-1].style.display = "block";

    dots[slideIndex-1].className += " active";

}

.slideshow-container {
z-index: 20;
max-width: 400px;
position: absolute;
margin: auto;
top: 45%;
left: 45%;
background-image: url(/img/szene2-slider-BG.png);
background-repeat: no-repeat;
background-origin: padding-box;
background-position: center;
background-size: 100%; }

/* Hide the images by default */
.mySlides {
    display: none;
}

/* Next & previous buttons */
.prev, .next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    margin-top: -22px;
    padding: 16px;
    color: white;
    font-weight: bold;
    font-size: 18px;
    transition: 0.6s ease;
    border-radius: 50%;
    user-select: none;
    background-color: #c7113c;
}

/* Position the "next button" to the right */
.next {
    right: 0;
    border-radius: 50%;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
    background-color: #333333;
}

.caption-text {
    color: #f2f2f2;
    font-size: 15px;
    padding: 8px 12px;
    position: absolute;
    bottom: -10px;
    width: 100%;
    text-align: center;
}

/* The dots/bullets/indicators */
.dot {
    cursor: pointer;
    height: 150px;
    width: 150px;
    margin: 0 2px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
}

.active, .dot:hover {
    background-color: #717171;
}

/* Fading animation */
.fade {
    -webkit-animation-name: fade;
    -webkit-animation-duration: 1.5s;
    animation-name: fade;
    animation-duration: 1.5s;
}

@-webkit-keyframes fade {
    from {opacity: .4}
    to {opacity: 1}
}

@keyframes fade {
    from {opacity: .4}
    to {opacity: 1}
}

 <div class="slideshow-container">
                <!-- Full-width images with number and caption text -->

                <div class="mySlides fade">
                    <img src="/img/szene2-werkzeuge.png" style="width:100%">
                    <p class="caption-text">Werkzeuge</p>
                </div>

                <div class="mySlides fade">
                    <img src="/img/szene2-feuer.png" style="width:100%">
                    <p class="caption-text">Feuer</p>
                </div>

                <div class="mySlides fade">
                    <img src="/img/szene2-ziege.png" style="width:100%">
                    <p class="caption-text">Nutztiere</p>
                </div>
                
                <div class="dot"> </div>
<div class="dot"> </div>
<div class="dot"> </div>
                <!-- Next and previous buttons -->
                <a class="prev" onclick="plusSlides(-1)">❮</a>
                <a class="next" onclick="plusSlides(1)">❯</a>
            </div>

Uncaught TypeError: Cannot set property 'className' of undefined in js

var a = document.querySelectorAll('.nav-tabs');
for(var i=0 ; i<a.length; i++){
    a[i].addEventListener('click',function(){
        this.classList.add("active");
    });
}

VueJS TypeError: Cannot read property 'className' of undefined

You are passing event instead of $event, I think this is why it's not defined. Also you have a lot of unnecessary code. I cleaned it up, try now:

HTML

<div class="w3-bar w3-black">
  <button
    v-for="city in cities"
    class="w3-bar-item w3-button tablink"
    @click="openCity($event, city)"
    :class="{ 
      'w3-red': city.name === selectedCity,
      'w3-black': city.name !== selectedCity 
    }"
  >
    {{city.name}}
  </button>
</div>

<div 
  v-for="city in cities" 
  :id="city.name" 
  class="w3-container w3-border city"
  :class="{ 
    'visible': city.name === selectedCity,
    'hidden': city.name !== selectedCity 
  }"
 >
  <h2>{{city.name}}</h2>
  <p>{{city.description}}</p>
</div>

script

data () {
  return {
    selectedCity: 'London',
    cities: [
      { 
        name: 'London', 
        description: 'London is the capital city of England'
      },
      { 
        name: 'Paris', 
        description: 'Paris is the capital of France',
      },
      { 
        name: 'Tokyo', 
        description: 'Tokyo is the capital of Japan',
      }
    ] 
  }
},
methods: {
  openCity (event, city) {
    this.selectedCity = city.name
  }
}

styles

.hidden {
  display: none
}

.visible {
  display: block
}

Method 2

If you don't want to use CSS classes to hide the content, you can just use v-show and only the selected city will be shown city.name === selectedCity:

<div 
  v-for="city in cities" 
  v-show="city.name === selectedCity"
  :id="city.name" 
  class="w3-container w3-border city"
 >
  <h2>{{city.name}}</h2>
  <p>{{city.description}}</p>
</div>

Angular test gives error - Failed: Cannot read property 'className' of undefined

I used await fixture.whenRenderingDone() instead of await fixture.whenStable() on every test case including the component.toBeTruthy(); to solve this. Hope this might help.