This question already has answers here:
What do querySelectorAll and getElementsBy* methods return?
(12 answers)
Closed 4 years ago.
I am trying to show/hide elements using JS... it's not working, I can't get why
Here is the code:
<html>
<body>
<div class="galleryInnerImageHolder"> <p> XXX </p> </div>
</body>
</html>
<script>
document.getElementsByClassName("galleryInnerImageHolder").style.display = "block";
document.getElementsByClassName("galleryInnerImageHolder").style.display = "none";
</script>
getElementsByClassName return array. you can do: document.getElementsByClassName("galleryInnerImageHolder")[0].style.display = "block";
Related
This question already has answers here:
How can I change an element's class with JavaScript?
(33 answers)
Closed 2 years ago.
Hello is there any way to edit html tag class name from script?
For example:
html:
<div id="ThisIsId" class= "ThisIsName"> ... </div>
Script:
<script>
document.getElementById("ThisIsId").changeClassName("thisIsNewClassName")
</script>
<script>
document.getElementById("ThisIsId").classList.remove("ThisIsName").add("thisIsNewClassName")
</script>
This question already has answers here:
What is the difference between children and childNodes in JavaScript?
(3 answers)
Closed 5 years ago.
I'm just learning javascript but this is very confusing to me.
I am trying to learn how the childNodes property works. I am using it on a div with three h1 tags in it and nothing else, yet it is returning 7 child nodes. Why is this?
https://jsfiddle.net/xyzL65Lv/
html:
<head>
<title>Learn Javascript</title>
</head>
<body>
<div>
<h1 id="title">one</h1>
<h1 id="title2">two</h1>
<h1 id="title3">three</h1>
</div>
</body>
javascript:
parent = document.getElementsByTagName("div");
children = parent[0].childNodes;
for(var i=0; i<children.length; i++){
document.write("#" + i + " " + children[i].innerHTML + "<br>");
}
.childNodes includes all nodes of a parent element, including text nodes
This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 5 years ago.
Here I have an example:
$('#key').on('click', function(){
$('.task').html("<button id='key'>Button</button>"+Date());
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='task'>
<button id='key'>Button</button>
</div>
How I can apply javascript for overwriting element and get different time for each button press?
Clearly there is no need to ovveride button here. Do not ovveride button. Use a span for date.
$('#key').on('click', function(){
$('.datestr').html(Date());
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='task'>
<button id='key'>Button</button>
<span class='datestr'></span>
</div>
This question already has answers here:
jQuery OR Selector?
(6 answers)
Closed 6 years ago.
Here is my current code:
$(".close_btn").click(function(e) {
$(".box1").fadeOut(100);
$(".box2").fadeOut(100);
});
As you see, currently, when you click on .close_btn, both .box1 and .box2 will be hidden. Now I want to use $(this) and .closest() to hide just one box (the parent of clicked .close_btn, there are two .close_btn). I mean I want something like this:
$(".close_btn").click(function(e) {
$(this).closest(".box1" OR ".box2").fadeOut(100);
});
Is doing that possible?
You can just use a comma to separate multiple selectors:
$(".close_btn").click(function(e) {
$(this).closest(".box2, .box1").fadeOut(100);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box1">
<button class="close_btn">Close</button>
</div>
<div class="box2">
<button class="close_btn">Close</button>
</div>
This question already has answers here:
How to add onload event to a div element
(26 answers)
Closed 8 years ago.
In my HTML file I have a div with id="print" and when this div appears on the screen I would like to start function print(). How can I do this?
<div id="print">
</div>
function check(){
//check appear div
}
function print(){
//print data
}
like #TheShinyTuxedo suggested this can be resolved by adding a script right after the div is rendered.
look like that:
<div id="print">
</div>
<script type="text/javascript">
print();
</script>