"Document.Getelementbyclass Is Not a Function"

document.getElementByClass is not a function

You probably meant document.getElementsByClassName() (and then grabbing the first item off the resulting node list):

var stopMusicExt = document.getElementsByClassName("stopButton")[0];

stopButton.onclick = function() {
    var ta = document.getElementsByClassName("stopButton")[0];
    document['player'].stopMusicExt(ta.value);
    ta.value = "";
};

You may still get the error

document.getElementsByClassName is not a function

in older browsers, though, in which case you can provide a fallback implementation if you need to support those older browsers.

Getting document.getElementByClassName is not a function error in console

Replce getElementByClassName with getElementsByClassName

note that its plural(Elements) with "s" at end and not singular(Element)

the same class can be added to multiple objects hence, selecting by class name returns multiple items, not just one so it uses the plural form Elements instead of Element as in case of getElementById() as id must be unique and selecting by id will return only one DOM element

and, since the function getElementsByClassName returns an array of elements elmnt.scrollIntoView() won't work,

so you need to use the first element of the array as elmnt[0]

so you code will be

function myFunction() {
  var elmnt = document.getElementsByClassName("filter-btn");
  elmnt[0].scrollIntoView(); 
}

However, I would rather suggest using getElementById if you want to select only one element and use as below(first give id IdGivenToTheAnchoreTag to anchor tag)

function myFunction() {
  var elmnt = document.getElementById("IdGivenToTheAnchoreTag");
  elmnt.scrollIntoView(); 
}

TypeError: document.getElementByClassName is not a function

This method doesn't return specified element, but list of elements.
Try to filter list which it return to get element which u'd like to edit.

javascript document.getElementsbyClassName is not a function

Should be document.getElementsByClassName
(the "B" is the difference)

element.getElementsByClassName is not a function

First look at the filterCardsByRequirementsChoosed function. You have both for-of and for-in loops, but are using them as though they're the same.

The for-of should be:

for(let card of jobCards){
 //   jobCards[card].style.display = "flex";
    card.style.display = "flex";
}

The for-in was done correctly, but using for-of is a little nicer IMO.

So it seemed you were just passing the wrong value to the function in question.

---

Actually, I do see that you're only calling the problem function in the for-in loop, and are passing the property name. So you seem to be doing that correctly.

One thing to keep in mind is that your jobCards is a "live list". So if any of those elements get removed from the DOM, or even if the class you used to fetch them gets removed, those elements will be also removed from the jobCards list immediately.

Why document.getElementsByClassName does not get the all elements exactly except for the first time?

The undo() function assumes that the elements in typedItems correspond to the elements with the clicked class.

This is true the first time that you call undo(). If you click n times, there will n elements with class="clicked" and n elements in the array,.

But it won't be true the next time. undo() empties the array, but it doesn't remove any of the clicked classes, it just makes the clicked elements visible.

So if you click 3 elements, click the undo button, and then click 3 different elements and click the undo button again, it will make the first 3 elements with the clicked class visible. But these won't necessarily be the same 3 elements you clicked the second time. document.getElementsByClassName() returns the elements in the order they appear in the DOM, not the order that you added the class.

Instead of looping over typedItems, you can loop over the elements with the class.

function undo() {
    document.querySelectorAll(".clicked").forEach(el => el.style.visibility = "visible");
}

document.getElementsByClassName(...) returns ... is not a function

The problem with that is that, document.getElementsByClassName() returns array of DOM elements. To bind event to elements, you would have to iterate though each element, and bind event to it. Do it like this :

Convert the HTML collection before iterating :

[...document.getElementsByClassName("toggle")].forEach(function(item){
  item.addEventListener("click", function() {
    if(this.classList.contains("toggled")) {
      this.classList.remove("toggled")
    }
    else {
      this.classList.add("toggled")
    }
  })
});

OR

Using querySelectorAll() :

document.querySelectorAll(".toggle").forEach(function(item){
  item.addEventListener("click", function() {
    if(this.classList.contains("toggled")) {
      this.classList.remove("toggled")
    }
    else {
      this.classList.add("toggled")
    }
  })
});

For detecting click on any element other than with class toggle :

document.querySelector('body').addEventListener('click', function(event){
  if(!event.target.classList.contains('toggle'){
    //code to do
  }
});

---

Related Topics