How to Use Getelementsbyclassname in JavaScript-Function

How to use getElementsByClassName in javascript-function?

getElementsByClassName() returns a nodeList HTMLCollection*. You are trying to operate directly on the result; you need to iterate through the results.

function change_boxes() {
    var boxes = document.getElementsByClassName('boxes'),
        i = boxes.length;

    while(i--) {
        boxes[i].style.backgroundColor = "green";
    }
}

---

* updated to reflect change in interface

Smarter way to getElementsByClassName with function

You can implement map function to iterate.map function iterates elements in array.
Hence here you need to change normal object to array first using Array.from() method

var elems;

function getClass(getClassfuncCont) {
   return document.getElementsByClassName(getClassfuncCont);
}

elems = getClass("helloClass");
Array.from(elems).map(element=>element.style.background = "red");

Please refer working snippet.

  var elems;
function getClass(getClassfuncCont) {   return document.getElementsByClassName(getClassfuncCont);}
elems = getClass("helloClass");Array.from(elems).map(element=>element.style.background = "red");

<div class="helloClass">  hello class</div>
<div class="helloClass">  hello class</div>
<div class="helloClass">  hello class</div>

Use getElementsByClassName for selecting 2 classes, with one being the variable of the function

getElementsByClassName accepts a single argument, which is a space-delimited list of classes that each element in the result must have. So:

var list = document.getElementsByClassName(X + " class2");
// −−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−^^^^^^^^^^^^^

Live Example:

function myfunction(X) {
 var list = document.getElementsByClassName(X + " class2");
 var listAll = document.getElementsByClassName("All");
 
     for(var t=0;t<listAll.length;t++)
    listAll[t].style.display="none";
    
     for(var y=0;y<list.length;y++)
    list[y].style.display="block";
 
}

<button onclick="myfunction('class1')">Click to select only class1 X 2</button>
<button class="All class1">Class: 1</button>
<button class="All class1 class2">Class: 1 X 2</button>
<button class="All class2">Class: 2</button>

How to get only one element by class name with JavaScript?

document.getElementsByClassName('className') would always return multiple elements because conceptually Classes are meant to be applied to multiple elements. If you want only the first element in the DOM with that class, you can select the first element out of the array-like HTMLCollection returned.

var elements = document.getElementsByClassName('className');
var requiredElement = elements[0];

Else, if you really want to select only one element. Then you need to use 'id' as conceptually it is used as an identifier for unique elements in a Web Page.

// HTML
<div id="myElement"></div>

// JS
var requiredElement = document.getElementById('myElement');

javascript: call function by classname

Use a loop to iterate all elements.

Use Array#forEach, forEach() method executes a provided function once per array element.

Another alternate could to use Array.from over HTMLCollection returned by getElementsByClassName so that you can invoke Array# methods directly over returned result.

var inputBound = document.getElementsByClassName('Bound');[].forEach.call(inputBound, function(inputBound) {  inputBound.onfocus = function() {    var input = this.value;    formFunct(input);  }})
function formFunct(input) {  console.log('done did the form Funct: ' + input)}

<input type="text" value="NOTBound" class="NOTBound" /><input type="text" value="Bound value 1" class="Bound" /><input type="text" value="NOTBound" class="NOTBound" /><input type="text" value="Bound value 2" class="Bound" />

Do we have getElementsByClassName in javascript?

Some browsers, for example Firefox 3 support getElementsByClassName, others you have to iterate though all the tags, so if you wanted to support all browsers with a single function you should use the iterative method.

The best solution is to use jQuery or any other framework which will use the best available method.

Replace getelementbyid with getelementsbyclassname in w3CodeColor javascript function

First, you need to get the class name of the element you need to select.
For example:

<div class="class-name">...</div>

getElementsByClassName() will return a list of all elements which have this class name

if you have just one element has this class you need to select first element

For example:

const element = document.getElementsByClassName("class-name")[0]

or

const [element] = document.getElementsByClassName("class-name")

For more resources.
https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName

---

Related Topics