jQuery addClass example

Change class name on click in jQuery

by djodjolo

HTML

<div class="grid-container">

</div>
<div id="myHTMLWrapper">
</div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

.grid-container{
  display:grid;
  grid-template-columns:30% 30% 30%;
  grid-gap:5%;
   background: gray;
}
.grid-item{
  background-color:red;
}

.banner-message {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
}

button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
}

JavaScript

// find elements
var banner = $("#banner-message")
var button = $("button")
var grid   = $(".grid-container")
var brojac = 0
var myHTML = '';


//while(k<s){
//div += "<div class='grid-item' id="brojac"><div class='banner-message'><p>Hello World</p><button>Change color</button></div></div>"'
//grid.append(div)
//k++
//}
  var wrapper = document.getElementById("myHTMLWrapper");



  for (var i = 0; i < 5; i++) {
    myHTML += '<div class="grid-item" id=' + brojac + '><div class="banner-message"><p>div n='+brojac+'</p><button>Change color</button></div></div>';
    brojac++
  }
  grid.append(myHTML)