I'd expect this to pop up an alert for any div I click inside the section id playGrid, but it does nothing.
<div id="playGrid" class="w">
<section>
<div id="0_0"></div>
<div id="0_1"></div>
<div id="0_2"></div>
<div id="0_3"></div>
<div id="1_0"></div>
<div id="1_1"></div>
<div id="1_2"></div>
<div id="1_3"></div>
<div id="2_0"></div>
<div id="2_1"></div>
<div id="2_2"></div>
<div id="2_3"></div>
<div id="3_0"></div>
<div id="3_1"></div>
<div id="3_2"></div>
<div id="3_3"></div>
</section>
</div>
JavaScript
document.getElementById("playGrid").querySelectorAll('section div').forEach(function(el){
el.addEventListener('click', function() {
alert(this.id);
});
});
I think the problem is that your code runs before the document is fully loaded. To run your code after page is loaded add event listener for 'DOMContentLoaded' event:
document.addEventListener('DOMContentLoaded', function(){
document.getElementById("playGrid").querySelectorAll('section div').forEach(function(el) {
el.addEventListener('click', function() {
alert(this.id);
});
});
});
https://codepen.io/mikhailsidorov/pen/BaoPKoX
two options add content like so
<section>
<div id="0_0">content</div>
<div id="0_1">content</div>
<div id="0_2">content</div>
<div id="0_3">content</div>
<div id="1_0">content</div>
<div id="1_1"></div>
<div id="1_2"></div>
<div id="1_3"></div>
<div id="2_0"></div>
<div id="2_1"></div>
<div id="2_2"></div>
<div id="2_3"></div>
<div id="3_0"></div>
<div id="3_1"></div>
<div id="3_2"></div>
<div id="3_3"></div>
</section>
</div>
or use css by adding a class .content to all your divs :
.content{
height: 10px;
width:10px;
}
Something like this should work. Also, make sure your script is being executed after the page loads, not before. Use the defer tag on your <script> element or move the <script> element to the end of your body.
[ ...document.querySelectorAll('#playGrid section div') ].forEach((div) => {
div.addEventListener('click', (event) => {
alert(event.currentTarget.id);
});
});
Related
Can someone please help me understand the jQuery code and how it relates to my HTML. The links are going through and hiding all the divs, however I can't figure out why the div isn't showing when it's link is clicked.
HTML:
<section class="meet-the-team pt-5 pb-5">
<div class="row">
<div class="col-sm-12 col-md-12 col-lg-12">
Link 1
Link 2
Link 3
Link 4
Link 5
<div class="meet-the-team-info">
<div class="conor-div">
<h1>Conor</h1>
<img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="alternatetext" style="width:100px;">
<p>Hello Hello Hello</p>
</div>
<div class="kyle-div">I'm div2</div>
<div class="tracey-div">I'm div3</div>
<div class="frank-div">I'm div4</div>
<div class="rosie-div">I'm div5</div>
</div>
</div>
</div>
</section>
jQuery:
$(function () {
$(".kyle-div, .tracey-div, .frank-div, .rosie-div").hide();
$("a").bind("click", function () {
$(".conor-div, .kyle-div, .tracey-div, .frank-div, .rosie-div").hide();
var target = $(this).data("target");
$("."+target).toggle();
});
});
You just need to change one line of your jQuery.
$(function () {
$(".kyle-div, .tracey-div, .frank-div, .rosie-div").hide();
$("a").bind("click", function () {
$(".conor-div, .kyle-div, .tracey-div, .frank-div, .rosie-div").hide();
var target = $(this).data("target");
$("."+target+"-div").show() //added "-div" and changed toggle to show
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<section class="meet-the-team pt-5 pb-5">
<div class="row">
<div class="col-sm-12 col-md-12 col-lg-12">
Link 1
Link 2
Link 3
Link 4
Link 5
<div class="meet-the-team-info">
<div class="conor-div">
<h1>Conor</h1>
<img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="alternatetext" style="width:100px;">
<p>Hello Hello Hello</p>
</div>
<div class="kyle-div">I'm div2</div>
<div class="tracey-div">I'm div3</div>
<div class="frank-div">I'm div4</div>
<div class="rosie-div">I'm div5</div>
</div>
</div>
</div>
</section>
#natels's solution works and deserves to be the accepted answer. But even his solution can be shortened a little bit:
$(function () {
$("a").click(function () {
$(".meet-the-team-info div:visible").hide(); // first hide all visible team divs,
$("."+this.dataset.target+"-div").show(); // then show the chosen one
}).eq(0).click(); // emulate a click on the first link (index=0)
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<section class="meet-the-team pt-5 pb-5">
<div class="row">
<div class="col-sm-12 col-md-12 col-lg-12">
Link 1
Link 2
Link 3
Link 4
Link 5
Link 6
<div class="meet-the-team-info">
<div class="conor-div">
<h1>I'm Conor</h1>
<img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="alternatetext" style="width:100px;">
<p>Hello Hello Hello</p>
</div>
<div class="kyle-div">I'm Kyle</div>
<div class="tracey-div">I'm Tracey</div>
<div class="frank-div">I'm Frank</div>
<div class="gwen-div">I'm Gwen</div>
<div class="rosie-div">I'm Rosie</div>
</div>
</div>
</div>
</section>
The code in this snippet does not need to be adjusted if more divs are to be included in the page. The individual class names do not occur in the code any more.
i think you have an extra hide() there. The first hide(), hides all the divs on page load. But then on click you say "hide" and "toggle". They're canceling each other or doing something unexpected. Try just toggle(). And also you're missing the "div" part in your selector.
$(function () {
$(".kyle-div, .tracey-div, .frank-div, .rosie-div").hide();
$("a").bind("click", function () {
// $(".conor-div, .kyle-div, .tracey-div, .frank-div, .rosie-div").hide();
var target = $(this).data("target");
$("."+target+"-div").toggle();
});
});
In my HTML there are eight div. I was able to get the number of the div using jQuery and insert it into the .num div element.
However when I delete one of the div by clicking the delete button, the number of divs in the span retrieved through jQuery won't update to the current number of divs remaining. It will still show 8.
How can I get the current number of div elements left in the DOM immediately after clicking the button?
setTimeout(() => {
if ($(".delete div").length > 0) {
$(".num span").html($(".delete div").length);
}
}, 100);
$("button").click(function() {
$(".delete div:last-child").remove();
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
```
<div class="delete">
<div class="div1">1</div>
<div class="div2">2</div>
<div class="div3">3</div>
<div class="div4">4</div>
<div class="div5">5</div>
<div class="div6">6</div>
<div class="div7">7</div>
<div class="div8">8</div>
</div>
<div class="num">Number of div: <span>0</span></div><br>
<button>delete</button>
The problem is because you're using setTimeout(), which only runs once after the specified delay.
For the pattern you're using to work you need to use setInterval() instead, which will run repeatedly at the set delay:
setInterval(() => {
if ($(".delete div").length > 0) {
$(".num span").html($(".delete div").length);
}
}, 100);
$("button").click(function() {
$(".delete div:last-child").remove();
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="delete">
<div class="div1">1</div>
<div class="div2">2</div>
<div class="div3">3</div>
<div class="div4">4</div>
<div class="div5">5</div>
<div class="div6">6</div>
<div class="div7">7</div>
<div class="div8">8</div>
</div>
<div class="num">Number of div: <span>0</span></div><br>
<button>delete</button>
However, using a timer for this is not ideal. As the number of div elements is only affected when the button is clicked, just update the .num span element in that event handler:
var $span = $(".num span").html($(".delete div").length);
$("button").click(function() {
$(".delete div:last-child").remove();
$span.html($(".delete div").length);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="delete">
<div class="div1">1</div>
<div class="div2">2</div>
<div class="div3">3</div>
<div class="div4">4</div>
<div class="div5">5</div>
<div class="div6">6</div>
<div class="div7">7</div>
<div class="div8">8</div>
</div>
<div class="num">Number of div: <span>0</span></div><br>
<button>delete</button>
I need to make a button that views three consequent posts
when I click "view all" the three "div"s should show up
I need to make the three 'div's show up if I click the view all button
so I am using jquery here
$('.posts .repeat-grid').slice(0, 3).show();
$('#view-all').on('click', function() {
$('.posts .repeat-grid:hidden').slice(0, 1).slideDown();
if ($('.posts .repeat-grid:hidden').length === 0) {
$('#view-all').fadeOut();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="posts">
<div class="repeat-grid">1</div>
<div class="repeat-grid">2</div>
<div class="repeat-grid">3</div>
</div>
<div id="view-all">View All</div>
any idea why it is not working?
You Can Try this if that's what you mean
$('#view-all').on('click', function() {
$('.posts').slideToggle();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="posts">
<div class="repeat-grid">1</div>
<div class="repeat-grid">2</div>
<div class="repeat-grid">3</div>
</div>
<div id="view-all">View All</div>
I have a page in which there is an anchor tag: jump to div2.
This anchor tag opens tut.html, which has a div with id=div2:
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
<div id="div1">
--some content--
</div>
<div id="div2" style="display:none;">
--some content--
</div>
</div>
</div>
</div>
By default, the contents of div2 are hidden. How can I display or fade in its contents when a user clicks on a hyperlink in another page?
You can easily check the hash that is passed in and use that to display the appropriate block:
window.onload = function(){
var element = document.querySelector(location.hash);
if(element) element.style.display = "block";
}
your href link should not link to the page, just to the anchor :
<a class="myButton" href="#div2">link</a>
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
<div id="div1">
--some content--
</div>
<div id="div2" style="display:none;">
--some content--
</div>
</div>
</div>
</div>
Using jQuery, you should have a function in the bottom of your document which would handle your click like this :
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </script>
<script>
$(function () {
$('a.myButton').on('click', function(event){
event.preventDefault();
$('div2').fadeIn('slow');
return false;
})
});
</script>
If the link goes to a new page:
link
On the bottom of the new page 'tut.html' :
<script>
$(function () {
var hash = window.location.hash;
if(hash == '#div2') $(hash).fadeIn('slow');
});
</script>
I want if some body add div with class "post-image". It will automatically move it before div with class "post-header" and do this function on each div with class single-post.
E.g. this is main //'post-image' after 'post-header'
<div class='single-post'>
<div class='post-header'>Title</div>
<div class='post-image'><img src='.../img1.png'/></div>
</div>
<div class='single-post'>
<div class='post-header'>Title</div>
<div class='post-image'><img src='.../img2.png'/></div>
</div>
and i want this like this // 'post-image' before 'post-header'
<div class='single-post'>
<div class='post-image'><img src='.../img1.png'/></div>
<div class='post-header'>Title</div>
</div>
<div class='single-post'>
<div class='post-image'><img src='.../img2.png'/></div>
<div class='post-header'>Title</div>
</div>
Maybe like that:
$(".post-header").each(function (ind, el) {
$(this).siblings(".post-image").each(function (ind, el2) {
$(el).before($(el2));
});
})