JQUERY
$(document).ready(function(){
$("div").click(function(){
var paragraphs = $("p");
for( i=0; i<paragraphs.length; i++ ) {
alert("Found paragraph: " + paragraphs[i].innerHTML);
});
});
CSS
.container {
padding:10%
}
[class*="col-"] > div {
background:white;height:200px;width:200px;
padding:20px;
margin:13%;
}
.value {
position: absolute;
top: 90px;
left: 130px;
}
HTML
<div class="container">
<div class="row">
<div class="col-md-4 col-sm-5">
<div style="background-color:pink"><h1 id="test" class="value">1</h1></div>
</div>
<div class="col-md-4 col-sm-5">
<div style="background-color:pink" ><h1 id="test" class="value">2</h1></div>
</div>
<div class="col-md-4 col-sm-5">
<div style="background-color:yellow" ><h1 id="test" class="value">3</h1></div>
</div>
<div class="col-md-4 col-sm-5">
<div style="background-color:yellow"><h1 id="test" class="value">4</h1></div>
</div>
<div class="col-md-4 col-sm-5">
<div style="background-color:blue"><h1 id="test" class="value">5</h1></div>
</div>
<div class="col-md-4 col-sm-5">
<div style="background-color:blue" ><h1 id="test" class="value">6</h1></div>
</div>
Whenever a box is clicked, an alert should display containing the number inside that box.
How can this issue be resolved?