Help to make a change class block when clicking on the link without?

How to make a class change when you click on the link without jQuery?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="style.css" />
<title>Untitled Document</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"  type="text/javascript"></script>
    <script>
$(document).ready(function(){
	$(".button").click(function(){
		$(".karkas").toggleClass("karkas1"); return false;
	});
});
</script>
</head>
<body>
<div class="karkas">
</div>
</body>
</html>

A good way to do it is as follows:


function buttonHandler() {
    var karkas = document.querySelectorAll('.karkas'),
        i;
    for (i = 0; i < karkas.length; i += 1) {
        karkas[i].classList.toggle('karkas1');
    }
    return false;
}

var buttons = document.querySelectorAll('.button'),
    i;
for (i = 0; i < buttons.length; i += 1) {
    buttons[i] = buttonHandler;
}

If there’s only the one element that needs to be affected, then it would be as simple as this:


document.querySelector('button').onclick = fuction () {
    document.querySelector('.karkas').classList.toggle('karkas1');
    };
}

However, it’s best to build in some flexibility when dealing with classes and allow for multiple ones to be affected, which results in the code from the previous post.

Very well thank you for such prompt help! Thank you!