Javascript Course

The function presented in this page can be used to delete and add a css class with JavaScript to multiple HTML elements.
- The function has 3 parameters, receives an Array with the IDs of HTML elements from which will delete the class, another Array with the IDs of HTML elements to which will add the class, and the class value.
Here is the function, called delAddClass().
// delete class from IDs in "dlcls" (array with IDs), add class to IDs in "adcls" (array with IDs)
// "cls" contains the class
function delAddClass(dlcls, adcls, cls) {
 // from: https://coursesweb.net/javascript/
  // get number of elements in array parameters
  var nr_dlcls = dlcls.length;
  var nr_adcls = adcls.length;

  // traverse each array, delete "class" of "dlcls", add class to "adcls"
  for(var i=0; i<nr_dlcls; i++) {
    if(document.getElementById(dlcls[i])) document.getElementById(dlcls[i]).className = '';
  }
  for(var i=0; i<nr_adcls; i++) {
    if(document.getElementById(adcls[i])) document.getElementById(adcls[i]).className = cls;
  }
}
- Example. Two buttons that call the delAddClass() function, setting /changing CSS class of some DIVs.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Example delAddClass</title>
<style type="text/css">
#divs {
 position: relative;
 width: 314px;
 margin: 5px auto;
 border: 1px solid #bbbbbb;
 padding: 2px;
 text-align: center;
}
#divs div {
 width: 100px;
 height: 100px;
 margin: 1px 2px;
 float: left;
 background: #ebbbfb;
 font-size: 2em;
}
#divs br { clear: left; }
#divs .cls1 { background: blue; }
#divs .cls2 { background: #00da01; }
</style>
</head>
<body>

<div id="divs">
 <button id="btn1">Add cls1</button>
 <button id="btn2">Add cls2</button>
 <br/><br/>
 <div id="dv1">1</div>
 <div id="dv2">2</div>
 <div id="dv3">3</div>
 <br/>
 <div id="dv4">4</div>
 <div id="dv5">5</div>
 <div id="dv6">6</div>
 <br/>
</div>

<script type="text/javascript"><!--
// delete class from IDs in "dlcls" (array with IDs), add class to IDs in "adcls" (array with IDs)
// "cls" contains the class
function delAddClass(dlcls, adcls, cls) {
 // from: https://coursesweb.net/javascript/
  // get number of elements in array parameters
  var nr_dlcls = dlcls.length;
  var nr_adcls = adcls.length;

  // traverse each array, delete "class" of "dlcls", add class to "adcls"
  for(var i=0; i<nr_dlcls; i++) {
    if(document.getElementById(dlcls[i])) document.getElementById(dlcls[i]).className = '';
  }
  for(var i=0; i<nr_adcls; i++) {
    if(document.getElementById(adcls[i])) document.getElementById(adcls[i]).className = cls;
  }
}

// define arrays with IDs
var ids1 = ['dv1', 'dv3', 'dv5'];
var ids2 = ['dv2', 'dv4', 'dv6'];

// register onclick event for #btn1, btn2 that call delAddClass()
document.getElementById('btn1').onclick = function(){ delAddClass(ids2, ids1, 'cls1'); }
document.getElementById('btn2').onclick = function(){ delAddClass(ids1, ids2, 'cls2'); }
//-->
</script>

</body>
</html>
Demo (click the buttons):


1
2
3

4
5
6


- This delAddClass() function can also be used only for deleting, or adding css class, by passing an empty array to argument.
delAddClass( [ ], ids2, 'cls1');     // just add class, not deletes
delAddClass( ids2, [ ], 'cls1');     // just delete class, not adds

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
What attribute makes the input text box to not be modified by the user?
checked="checked" readonly="readonly" disabled="disabled"
<input type="text" value="fixed-value" readonly="readonly" name="a_name" />
What CSS property allows you to create rounded corners in your webpage design?
background-size border-size border-radius
.class {
  border:2px solid blue;
  border-radius:1.2em;
}
What instruction displays a confirmation dialog box to the viewer, who must then click OK or Cancel to proceed?
indexOf() confirm() prompt()
var ques = window.confirm("The result of 0+0 is 0?");
if (ques) alert("Corect");
else alert("Incorrect");
Indicate the PHP function that returns the lowest number of the parameter values.
floor() ceil() min()
$min_nr = min(12, 8, 25, 13);
echo $min_nr;        // 8
Delete and Add CSS class

Last accessed pages

  1. SHA1 Encrypt data in JavaScript (19879)
  2. PHP-MySQL free course, online tutorials PHP MySQL code (58537)
  3. Using the Bone Tool (3438)
  4. JavaScript code and PHP (31329)
  5. XML sitemap with data from MySQL (3049)

Popular pages this month

  1. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (84)
  2. Read Excel file data in PHP - PhpExcelReader (65)
  3. PHP-MySQL free course, online tutorials PHP MySQL code (55)
  4. SHA1 Encrypt data in JavaScript (53)
  5. Create simple Website with PHP (47)