HTML » class to write javascript

HTML

​x
 
<!DOCTYPE html>
<html>
<head>
  <style>
    .city{
      background:orange;
      padding:10px;
      color:white;
    }
  </style>
</head>
<body>
​
<h3> JavaScript à¦¦à¦¿à§Ÿà§‡ à¦•à§•à¦²à¦¾à¦¸ à¦¨à§‡à¦® à¦…à¦¨à§•à¦¸à¦¾à¦°à§‡ à¦¬à§•à¦¯à¦¾à¦•à¦—à§•à¦°à¦¾à¦‰à¦¨à§•à¦¡ à¦ªà¦°à¦¿à¦¬à¦°à§•à¦¤à¦¨  </h3>
<h4>à¦¨à¦¿à¦šà§‡à¦° à¦¬à¦¾à¦Ÿà¦¨à§‡ à¦•à§•à¦²à¦¿à¦• à¦•à¦°à§•à¦¨</h4>
​
<button onclick="myFunction()">Change color</button>
​
<h2 class="city">London</h2>
<p>London is the capital of England.</p>
​
<h2 class="city">Paris</h2>
<p>Paris is the capital of France.</p>
​
<h2 class="city">Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
​
<script>
function myFunction() {
  var x = document.getElementsByClassName("city");
  for (var i = 0; i < x.length; i++) {
    x[i].style.background = "green";
  }
}
</script>
​
</body>
</html>
​

CSS

​

JavaScript

​

Output: