# Click Next Javascript Base (ok)

```
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style type="text/css" media="screen">
  	#header {
  		background-color: #00ff;
  		color: #fff;
  		width: 100px;
  		height: 30px;
  		line-height: 30px;
  		text-align: center;
  	}
  	.mystyle {
  		background-color: #f00;
  		color: #fff;
  		font-weight: 700;
  	}
  </style>
</head>
<body>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://code.jquery.com/jquery.js"></script>
  <div id="header">CLICK ME</div>
  <div id="alo">
  	<p class="example mystyle">A heading with class="example"</p>
    <p class="example">A paragraph with class="example".</p>
    <p class="example">A heading with class="example"</p>
    <p class="example">A paragraph with class="example".</p>
  </div>
    <script>
    var x = document.querySelectorAll(".example");
    var y = document.getElementsByClassName("example");
    var i = 0;
    function nextItem() {
      i = i+1;
      i = i % x.length;
      if(document.querySelector('.mystyle') !== null) {
      	var j;
				for (j = 0; j < y.length; j++) {
				  y[j].classList.remove("mystyle");
				}
      }
      return x[i].classList.add("mystyle");
    }
    document.getElementById('header').addEventListener('click', function(e) {
      nextItem();
    });
    </script>
</body>
</html>
```

![](https://2494213435-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LYjAG13rAPdbArSfRyB%2F-Lv1te0LSEi7UYthF6rx%2F-Lv1ti1E0Yc-TcYC_PWN%2FClick%20Next%20base.png?alt=media\&token=a2f5c0c9-ce36-4950-a705-dc76bd46c67a)

{% file src="<https://2494213435-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LYjAG13rAPdbArSfRyB%2F-Lv9095qO1gTK2EoZ6DP%2F-Lv90Dg0SYZ1Tr1IY2Uh%2Fnext.rar?alt=media&token=d0453ad6-b4a7-42b1-8188-31bff645fb09>" %}
