I have created button that view the elements that is hidden onclick but there are many div with same id but it i want to hide all but its hidding only one i am using below code but its just viewing or hidding, the first div only hidding onclick rest its not hidding
<button onclick="myFunction()" class="btn-custom">View the Picture</button>
<div id=hide></div>
<div id=hide></div>
<div id=hide></div>
<div id=hide></div>
<script>
function myFunction() {
var x = document.getElementById("hide");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
</script>
Your HTML is invalid - ids must be unique.
Instead, use a class to identify the elements and querySelectorAll to select all of them:
<div class=hide>a</div>
<div class=hide>b</div>
<div class=hide>c</div>
<div class=hide>d</div>
<button onclick="myFunction()">Toggle</button>
<script>
function myFunction() {
var x = document.querySelectorAll(".hide");
x.forEach(y => {
if (y.style.display === "none") {
y.style.display = "block";
} else {
y.style.display = "none";
}
})
}
</script>
Related
In order for the fucntion to change the display to "hidden" then back to "block" it requires 2 clicks for each. Why is this? How do I reduce it to just one click?
function showOfferMessage() {
var coll = document.getElementsByClassName("collapsible");
var i;
for (i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function() {
this.classList.toggle("active");
var content = this.nextElementSibling;
if (content.style.display === "block") {
content.style.display = "none";
} else {
content.style.display = "block";
}
});
}
}
<div class="offer-row collapsible" id="'.$oid.'" onclick="showOfferMessage()">
<div class="offer-info-item">
<div class="offcatreview-title">
<h3>Cat. Rating</h3>
</div>
<div class="offer-cat-rating">
</div>
</div>
</div>
<div class="content">
<p>'.$message.'</p>
</div>
That's because you're registering an event listener on every click! So your listener executes once more every time you click.
Your code fixed:
function showOfferMessage(element) {
element.classList.toggle("active");
var content = element.nextElementSibling;
if (content.style.display === "block") {
content.style.display = "none";
} else {
content.style.display = "block";
}
}
<div class="offer-row collapsible" id="'.$oid.'" onclick="showOfferMessage(this)">
<div class="offer-info-item">
<div class="offcatreview-title">
<h3>Cat. Rating</h3>
</div>
<div class="offer-cat-rating">
</div>
</div>
</div>
<div class="content" style="display: block">
<p>'.$message.'</p>
</div>
The onclick event executes the showOfferMessage() {} function which puts an event listener on the "collapsible" element. Then the second click executes the contents of the eventlistener.
But first thing first, as long as you only have a single element named "collapsible" why try to get multiple elements. Do a document.querySelector and target the element using css style selectors then chain the addEventListener directly on that selector.
When you are querying the style like you do you get the style that was explicitly set. In your case if there has not been a click on the "collapsible" element no display style was set. And even though a div has a default display style of block it has not been explicitly set so ...style.display will return an empty string -> falsy.
You have to get the implicit style with the getComputedStyle method,
Like so (codepen):
document.querySelector(".collapsible").addEventListener("click", function() {
this.classList.toggle("active");
var content = document.querySelector(".content");
if (window.getComputedStyle(content).display === "block") {
content.style.display = "none";
} else {
content.style.display = "block";
}
});
And I would probably use an arrow function in the event listener:
document.querySelector(".collapsible").addEventListener("click", event => {
event.target.classList.toggle("active");
var content = document.querySelector(".content");
if (window.getComputedStyle(content).display === "block") {
content.style.display = "none";
} else {
content.style.display = "block";
}
});
I had similar problem and ended up using !== instead of ===:
if (content.style.display !== "none") {
content.style.display = "none";
} else {
content.style.display = "block";
};
So I created a page that was supposed to have a box open up onClick. While this worked in a vacuum, when I upload it to the page it seems like when I use the button, it will initially show the content, then, it "reloads" the page, and then hides the content again.
The snippet of Javascript I used was:`
<script>
function showVet() {
var x = document.getElementById('vetinfo');
if (x.style.display === 'none') {
x.style.display = 'block';
} else {
x.style.display = 'none';
}
}
function showSust() {
var x = document.getElementById('sustinfo');
if (x.style.display === 'none') {
x.style.display = 'block';
} else {
x.style.display = 'none';
}
}
function showGuarantee() {
var x = document.getElementById('guaranteeinfo');
if (x.style.display === 'none') {
x.style.display = 'block';
} else {
x.style.display = 'none';
}
}
</script>`
Then in the HTML referenced if like this (just one of the sections):
<div class="section feature bt10">
<h3>Holistic Veterinarian<br>Approved</h3>
<button class="HPbutton hidden-sm" onclick="showVet()">Learn More</button>
</div>
You can view the page here:
https://www.onlynaturalpet.com/CompanyInfo/about-us-our-honest-promise.aspx
I'm pretty new to javascript, so I might have just messed something up. When I tested the page in local environment it was fine,I'm not sure where I went wrong!
The default type of a button is "submit". The button which calls showVet in the click attribute is inside a form, so it submits the form which reloads the page.
Submission can be prevented by changing the button (in line 692 of the linked page) type to "button":
<button type="button" class="HPbutton hidden-sm" onclick="showVet()">Learn More</button>
which does not submit a form it may be in.
I am using Javascript, Html5, Jquery and Css. Right now I have three image div and I want to show one image div after click on button and I want to show next div after click on same button and hide current div.
right now i am using this code:
Css Code:
#Div2 {
display: none;
}
#Div3 {
display: none;
}
Html Code:
<div class="container">
<div class="row">
<input id="Button1" type="button" value="Click" onclick="switchVisible();"/>
<div class="col-sm-4">
<div id="Div1">
<canvas id="canvas1" class="img-responsive center-block" style="float:left"></canvas>
</div>
<div id="Div2">
<canvas id="canvas2" class="img-responsive center-block" style="float:left"></canvas>
</div>
<div id="Div3">
<canvas id="canvas3" class="img-responsive center-block" style="float:left"></canvas>
</div>
</div>
</div>
</div>
Java Script Code:
function switchVisible() {
if (document.getElementById('Div1')) {
if (document.getElementById('Div1').style.display === 'none') {
document.getElementById('Div1').style.display = 'block';
document.getElementById('Div2').style.display = 'none';
document.getElementById('Div3').style.display = 'none';
}
else if (document.getElementById('Div2').style.display === 'none') {
document.getElementById('Div1').style.display = 'none';
document.getElementById('Div2').style.display = 'block';
document.getElementById('Div3').style.display = 'none';
}
else
{
document.getElementById('Div1').style.display = 'none';
document.getElementById('Div2').style.display = 'none';
document.getElementById('Div3').style.display = 'block';
}
}
}
This code is working fine for two image div but it is not working for the third image.I've taken help from this link:https://stackoverflow.com/questions/
Now I have three image div but right now I am showing one image div at a time after click on button.
I want to show next image div after click on button and hide current image div.I told earlier I am using three image div. my motive to show image is as rotating.
Please give me some idea about this.
If you are using jQuery you could do this like this:
function switchVisible() {
$(".img-responsive").parent().each(function(){
if($(this).is(":visible")) {
$(".img-responsive").parent().hide();
if ($(this).next().length) {
$(this).next().show();
} else {
$($(".img-responsive")[0]).parent().show();
}
return false;
}
})
}
You can use prev() instead of next() for going back.
function switchVisibleRevert() {
$(".img-responsive").parent().each(function(index){
if($(this).is(":visible")) {
$(".img-responsive").parent().hide();
if ($(this).prev().length) {
$(this).prev().show();
} else {
$($(".img-responsive")[$(".img-responsive").length-1]).parent().show();//show last element
}
return false;
}
})
}
Take a look at the conditional statements.
if (document.getElementById('Div1')) {
if (document.getElementById('Div1').style.display === 'none') {
document.getElementById('Div1').style.display = 'block';
document.getElementById('Div2').style.display = 'none';
document.getElementById('Div3').style.display = 'none';
}
else if (document.getElementById('Div2').style.display === 'none') {
document.getElementById('Div1').style.display = 'none';
document.getElementById('Div2').style.display = 'block';
document.getElementById('Div3').style.display = 'none';
}
else
{
document.getElementById('Div1').style.display = 'none';
document.getElementById('Div2').style.display = 'none';
document.getElementById('Div3').style.display = 'block';
}
}
The first conditional statement is setting the display property for Div1 to block. On the next call the second condition sets Div2 to block and Div1 to none again...so on the next call condition 1 is evaluated as true again, because Div1 was set to 'none' in the second condition.
You might try removing the 'else' and adding another else if condition that checks to see if Div2 == 'block', you know that if Div2 is set to .block' that the next image to be shown is image 3:
if (document.getElementById('Div1')) {
if (document.getElementById('Div1').style.display === 'none') {
document.getElementById('Div1').style.display = 'block';
document.getElementById('Div2').style.display = 'none';
document.getElementById('Div3').style.display = 'none';
}
else if (document.getElementById('Div1').style.display === 'block') {
document.getElementById('Div1').style.display = 'none';
document.getElementById('Div2').style.display = 'block';
document.getElementById('Div3').style.display = 'none';
}
else if (document.getElementById('Div2').style.display === 'block')
{
document.getElementById('Div1').style.display = 'none';
document.getElementById('Div2').style.display = 'none';
document.getElementById('Div3').style.display = 'block';
}
}
It might be simpler to initialise a counter to keep track of which image is being shown since each Div has a unique ID and sequential value.
When i click the button i want the div to show, and when i click the button again i want it to disappear. What am i doing wrong?
<button type="button" onclick="myFunction()">Click Me!</button>
<div id="Dglow" class="Dglow">
Glow
</div>
<script>
function myFunction() {
var e = document.getElementById("Dglow").style.display;
if (e == "none")
e = "block";
else {
e = "none";
}
}
You should compare and change element's display property:
function myFunction() {
var e = document.getElementById("Dglow").style;
if (e.display == "none") {
e.display = "block";
} else {
e.display = "none";
}
}
<button type="button" onclick="myFunction()">Click Me!</button>
<div id="Dglow" class="Dglow">Glow</div>
Actually document.getElementById("Dglow").style.display returns a string and according to Left hand assignment rule you cannot store anything to that string, since that string is not a variable/object now ie not a reference to DOM anymore
You can do is
var e = document.getElementById("Dglow").style;
if(e.display == "none")
e.display = "block";
else{
e.display = "none";
}
Have you considered using Jquery? If so heres what you need.
$(document).ready(function(){
$("#button").click(function(){
$("#Dglow").toggle();
});
});
You would need to give your button an id for this though.
I currently have two buttons, each displays a different form. I also have the buttons so that when you click on it once, it'll show the form, and if you click on it again, it'll hide the form.
WHAT I WANT IT TO DO:
I'm trying to get it so that if one form is already shown and I click on the button for the OTHER form, the one that is currently showing will hide and the OTHER one will show.
Here's what I thought would work, but if one of the form is shown and I click on the button for the other form, nothing happens.
<script>
function show(x, y){
if(document.getElementById(x).style.display == "none" && document.getElementById(y).style.display != "none"){
document.getElementById(x).style.display == "block";
document.getElementById(y).style.display == "none";
}
else if(document.getElementById(x).style.display == "none") {
document.getElementById(x).style.display = "block";
}
else{
document.getElementById(x).style.display = "none";
}
}
</script>
<form>
<button type = "button" onclick = 'show("searchForm", "insertForm");'>Perform Search</button>
<button type = "button" onclick = 'show("insertForm", "searchForm");'>Insert Data</button>
</form>
<form id = "searchForm" value "search" style = "display: none;" action = "test2.php" method = "post">
<!-- My code -->
</form>
<form id = "insertForm" style = "display: none;" action = "test2.php" method = "post">
<!-- My code -->
</form>
I'm sure it's some really silly mistake I'm making. Can anyone help me figure this out and explain what I'm doing wrong and what I should be doing instead? Thanks!
You are doing comparisons == in your if, and need to use an assignment =
if(document.getElementById(x).style.display == "none" && document.getElementById(y).style.display != "none"){
document.getElementById(x).style.display = "block";
^
document.getElementById(y).style.display = "none";
^
}
It is a pretty small mistake..
document.getElementById(x).style.display = "block";
document.getElementById(y).style.display = "none";
You are using equals operator instead of the assignment operator.
No matter what you want to use, try to touch DOM as few times as possible.
function show(x, y){
var x, y; // function scope vars
// search for elements just once
x = document.getElementById(x);
y = document.getElementById(y);
console.log(x);
console.log(y); // just to show if you are getting elems you really want
if(x.style.display == "none" && y.style.display != "none"){
x.style.display = "block";
y.style.display = "none";
}
else if(x.style.display == "none") {
x.style.display = "block";
}
else{
x.style.display = "none";
}
}