'Gapping between two of the same functions in JS
I have written two of the same functions in JavaScript. As you can see, for the first two boxes I've use 'this' method, I want to create something like infinite function which switches the color from default to set on every click.The function works but changes the border only once, while for my <div id="#"></div> tag it works perfectly (if you click even 100 times, it will change from the default color to the 'set' color, that is not working for my first two divs with the classes). What is this gap caused by?
document.addEventListener("DOMContentLoaded", function() {
var elements = document.getElementsByClassName('bro');
for (var i = 0; i < elements.length; i++) {
elements[i].addEventListener('click', function() {
for (var i = 0; i < elements.length; i++) {
if (this.style.border == '15px solid lime') {
this.style.border = '15px solid black';
} else {
this.style.border = '15px solid lime';
}
}
});
}
/*scripting the div*/
var first = document.getElementById('firstEL');
first.addEventListener('click', function() {
if (first.style.border == '10px solid mediumorchid') {
first.style.border = '10px outset red';
} else {
first.style.border = '10px solid mediumorchid';
}
});
}); .bro {
width: 220px;
height: 200px;
border: 15px solid lime;
background-color: purple;
display: inline-block;
margin: 10px;
}
#firstEL {
width: 200px;
height: 200px;
border: 10px solid mediumorchid;
display: inline-block;
background-color: darkblue;
}<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Wilkomen</title>
<script src="https://code.jquery.com/jquery-1.12.0.js"></script>
<script src="js/main.js"></script>
<!-- css -->
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div class="bro"></div>
<div class="bro"></div>
<br>
<!----- id ---->
<div id="firstEL"></div>
</body>
</html>Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|