JavaScript Change Class onclick – Best 5 Examples

JavaScript Change Class onclick, in this article you will learn about button click and many more examples.

To change the class name I will show you how you can take the help of the jQuery library, First I will call the Jquery library in my code then I will write code for the button click. hence you will learn how you can use jQuery to change the class name of the element.

Click here to learn in detail how you can use the jQuery library on the HTML page. If you already know then you can skip this process and move to the actual example.

#1: Javascript change class onclick.

Javascript change class onclick
Javascript change class onclick

In this example, I will show you how can you change the class name of div element with a button click. for that, I will write the code of the div and I will change the class of that div from its id. Let’s check the below code.

<!DOCTYPE html>
<html>
<head>
	<title>
	</title>
	
</head>
<body>

<h1>
	Click below button to change class name.
</h1>
<input type="button"  onclick="changeClassName()" value="Click to change class name">

<div id="Test" class="test-class-name">
	Class name of this division will change.
</div>
<script>
	
	
	function changeClassName()
	{
		document.getElementById("Test").classList.remove('test-class-name');
		document.getElementById("Test").classList.add('test-class-name-2');
	}
</script>

</body>
</html>

Look at the above code, I have used the JavaScript class list function to select the class of elements. “document.getElementById(“Test”).classList.remove(‘test-class-name’)” this code will remove class “test-class-name” from div having id “Test”. First I have written code for removing a class from an element then I have written code for adding a new class to it. “document.getElementById(“Test”).classList.add(‘test-class-name-2’);” this code will add a new class to element div having id “Test”.

I have added a replacement code in “changeClassName” function, which will be executed when the user will click on the button “Click to change class name”.

#2: jQuery change class onclick.

jQuery change class onclick
jQuery change class onclick

In the previous example I have given you an example of the Javascript change class onclick, now I will show you how you can perform the same operation using Jquery. that is jQuery change class onclick.

When the user will click on the “Click to change class name” button then the function will be called, and that function will perform replace class operation.

<!DOCTYPE html>
<html>
<head>
	<title>
	</title>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" referrerpolicy="no-referrer">
		
	</script>
</head>
<body>


<h1>
	jQuery change class onclick.
</h1>	
<h3>
	Click below button to change class name.
</h3>
<input type="button"  onclick="changeClassName()" value="Click to change class name">

<div id="Test" class="test-class-name">
	Class name of this division will change.
</div>
<script>
	
	
	function changeClassName()
	{
		  $('#Test').removeClass('test-class-name');
          $('#Test').addClass('test-class-name-2');
	}
</script>

</body>
</html>

In the above code “$(‘#Test’).removeClass(‘test-class-name’);” will remove class “test-class-name” from div having id “Test” and after that “$(‘#Test’).addClass(‘test-class-name-2’);” line will add “test-class-name-2” class to div having id “Test”.

#3: Change Class name on dropdown change JavaScript.

In the below example, I will show you how to change the class name on dropdown change javascript. in this example dropdown value will be allocated to the class name of the div and the previous class name will be removed.

change class name on dropdown change JavaScript
<!DOCTYPE html>
<html>
<head>
	<title>
	</title>
	
</head>
<body>


<h1>
	Add dropdown selected value to class of div.
</h1>	
<h3>
	Change dropdown to add value to div.
</h3>
<select id="DropTest" onchange="changeClassName()">
  <option value="class-1">class-1</option>
  <option value="class-2">class-2</option>
  <option value="class-3">class-3</option>
</select>
<div id="Test" class = "class-1">
	Class name of this div will be changed.
</div>
<script>
	
	
	function changeClassName()
	{
		document.getElementById("Test").classList.remove(document.getElementById("Test").className);
		document.getElementById("Test").classList.add(document.getElementById("DropTest").value);
	}
</script>

</body>
</html>

In the above code, changeClassName function will be called when the user changes the value of the above dropdown list after that dropdown value will be assigned to class name of the div having id “Test”.

“document.getElementById(“Test”).classList.remove(document.getElementById(“Test”).className);” code of function “changeClassName” will remove the existing class from div and after that “document.getElementById(“Test”).classList.add(document.getElementById(“DropTest”).value);” code will pick a class from the dropdown and it will assign it to div.

#4: Change class name on dropdown change jQuery.

change class name on dropdown change JavaScript

In the below example, I have used jQuery to perform the same action as above. In this example, I will show you how you can change the class name of the div when the user changes dropdown using jQuery. The dropdown value will be assigned to div.

<!DOCTYPE html>
<html>
<head>
	<title>
	</title>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js">
		
	</script>
</head>
<body>


<h1>
	Add dropdown selected value to class of div.
</h1>	
<h3>
	Change dropdown to add value to div.
</h3>
<select id="DropTest" onchange="changeClassName()">
  <option value="class-1">class-1</option>
  <option value="class-2">class-2</option>
  <option value="class-3">class-3</option>
</select>
<div id="Test" class = "class-1">
	Class name of this div will be changed.
</div>
<script>
	
	
	function changeClassName()
	{
		
		 $('#Test').removeClass($('#Test').attr('class'));
    $('#Test').addClass($('#DropTest').val());
	}
</script>

</body>
</html>

In this example, I have used the jQuery library to perform the action “$(‘#Test’).removeClass($(‘#Test’).attr(‘class’));” code will perform the removal of an existing class of div and after that “$(‘#Test’).addClass($(‘#DropTest’).val());” code will pick a value from the dropdown list and assign to div.

Let’s check the next example.

#5: Change class name on page load jQuery.

Change class name on page load jQuery

In this example, I will show you how you can change the class name on page load.

<!DOCTYPE html>
<html>
<head>
	<title>
	</title>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js">
		
	</script>
</head>
<body>


<h1>
	Class name will be changed.
</h1>	

<div id="Test" class = "class-1">
	Class name of this div will be changed.
</div>
<script>
	
	changeClassName()
	function changeClassName()
	{
		
		 $('#Test').removeClass('class-1');
    $('#Test').addClass('class-2');
	}
</script>

</body>
</html>

In the above example, I have used jQuery to change the class name of the div on page load. “changeClassName” function is called on page load.

If you want more examples in this article please comment on it, I will try to add new examples in this article.

Share this article in your groups to help your friends.

**** Remove square brackets from string JavaScript.

**** Hosted Libraries By google

**** Settimeout JavaScript

Leave a Comment

Your email address will not be published. Required fields are marked *