I created a div contaning a form and a button. I want to hide the entire div when the button is clicked.
function myFunction() {
let x = document.querySelector("div");
if (x.style.display == "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
<div onmouseover="firstPageDisplay();" id="firstPage">
<div><img id="imgs"></div>
<div class="center">
<form class="center">Authentification<br>
<p>Login</p> <input id="login" type="text"><br>
<p>Password</p> <input id="password" type="password"><br><br>
<button onclick="myFunction();" id="btnA">Se connecter</button>
</form>
</div>
</div>
This is what I tried to do, however when I click the button, the div disappears for a split second then reappears again. When I removed the button from the div it worked just fine. How can I make it disappear for good?
you have document.querySelecor('div') which is selecting the first <div> in the whole document, probably not what you want.
the error is here
function myFunction() {
let x = document.querySelector("div");
if (x.style.display == "none") { // error
x.style.display = "block";
} else {
x.style.display = "none";
}
}
you can only set a style, not get a style. Why? Because reasons nobody with common sense will understand. so instead you have to use getComputedStyle(element).styleName
function myFunction() {
let x = document.querySelector("div"); // if this is div you want
if (getComputedStyle(x).display == "none") { // 👍👍👍
x.style.display = "block";
} else {
x.style.display = "none";
}
}
but as mentioned in a comment above, toggling a class and using event listeners are much better practice
Related
I'm using this code to toggle the visibility of a section. When the button is clicked, the section shows.
function myFunction() {
var x = document.getElementById("offerte-toggle");
if (x.style.display === "block") {
x.style.display = "none";
} else {
x.style.display = "block";
}
}
<a onclick="myFunction()" id="knop-doorz" class="witte-randen">Offerte opvragen</a>
How can I hide the button after it has been clicked?
your JS code is targetting an element with id offerte-toggle but in your html, the has an id of knop-doorz
Either edit the html id to match the JS or vice versa.
You also don't need to do the if check, just simply set x.style.display = 'none'; before the closing } tag.
I'm trying to make an element appear when a button is clicked, but when it is, the button moves down. When the button is clicked again, it moves back up.
var p = document.getElementById("p");
function changeDisplay() {
if (p.style.display == "block") {
p.style.display = "none";
} else {
p.style.display = "block";
}
}
<p id="p" style="display: none;">Hello World</p>
<button onclick="changeDisplay()">Button</button>
I could move the button below the p but then another element would just be moved.
You can use visibility property instead. This will hide the element (p), but won't take it out of the layout:
var p = document.getElementById("p");
function changeDisplay() {
if (p.style.visibility == "visible") {
p.style.visibility = "hidden";
} else {
p.style.visibility = "visible";
}
}
<p id="p" style="visibility: hidden;">Hello World</p>
<button onclick="changeDisplay()">Button</button>
And a bit shorter using a ternary (suggested by #AlexandrVyshnyvetskyi):
var p = document.getElementById('p');
function changeDisplay() {
p.style.visibility = (p.style.visibility === 'visible' ? 'hidden' : 'visible');
}
<p id="p" style="visibility: hidden;">Hello World</p>
<button onclick="changeDisplay()">Button</button>
If you want to allocate space for the hidden element instead of using "display" to toggle view use "visibility" property.
if (p.style.visibility == "hidden") {
p.style.visibility = "visible";
} else {
p.style.visibility = "hidden";
}
The only difference between them is that the browser allocate spaces for
visibility: hidden elements.
Hope this helps.
I have 3 div which are hidden by default. I want to create a toggle for these 3 but I don't want to create onclick for each div and add this to the js file:
function myFunction() {
var x = document.getElementById("myDIV");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
I tried creating this scenario with clicked_id but it failed. When I click on the third div, the second one views aswell.
var projectEen = document.getElementById("projectInhoud");
projectEen.style.display = "none";
var projectTwee = document.getElementById("projectInhoudTwee");
projectTwee.style.display = "none";
var projectDrie = document.getElementById("projectInhoudDrie");
projectDrie.style.display = "none";
function displayFunction(clicked_id) {
if (clicked_id == 1) {
projectEen.style.display = "block";
} else {
projectTwee.style.display = "block";
} if(clicked_id == 3) {
projectDrie.style.display = "block";
} else {
projectTwee.style.display = "none";
}
}
How can I use the first code but to display all 3 div without creating the function 3 times?
EDIT:
My html
<div id="1" onclick="displayFunction(this.id)" class="projectTitel">
<h1>Project: a</h1>
</div>
<div id="projectInhoudEen" class="projectInhoud"> content </div>
<div id="2" onclick="displayFunction(this.id)" class="projectTitel">
<h1>Project: b</h1>
</div>
<div id="projectInhoudTwee" class="projectInhoud"> content </div>
<div id="3" onclick="displayFunction(this.id)" class="projectTitel">
<h1>Project: c</h1>
</div>
<div id="projectInhoudDrie" class="projectInhoud"> content </div>
By combining document.getElementsByClassName and EventTarget.addEventListener, you can attach the same event handler to your divs. Inside this handler, you can retrieve the element you clicked on with the event object, provided by the event listener.
EDIT : The HTML you provided makes things a little more complicated because the projectTitel and projectInhoud divs aren't related to each other, except by position.
So, in order to display the right projectInhoud div, we need to find the next projectInhoud after the projectTitel that was clicked on.
To make things better, I would suggest editing the HTML to make projectTitel and projectInhoud divs children of a same parent div.
Meanwhile, I added a getClickedProjectIndex function returns the index of the clicked projectTitel div. And the click event uses this index to show the right projectInhoud.
Then, you can use a simple toggle function that displays the div if it's not visible or hide it if it's visible.
var divs = document.getElementsByClassName("projectTitel");
[...divs].forEach(someDiv => someDiv.addEventListener("click", handler));
// by default, all projectInHound are hidden
hideElements("projectInhoud");
function handler(event) {
// get the clicked project's index :
var projectIndex = getClickedProjectIndex(event);
// toggle the right projectInhoud div :
toggleDiv(document.getElementsByClassName("projectInhoud")[projectIndex]);
}
// hide all elements that have the provided class name
function hideElements(className) {
var elements = document.getElementsByClassName(className);
[...elements].forEach(element => element.style.display = "none");
}
function getClickedProjectIndex(event) {
var elements = document.getElementsByClassName("projectTitel");
var projectIndex = 0;
[...elements].forEach((element, index) => {
if (element.id == event.currentTarget.id) {
projectIndex = index;
}
});
return projectIndex;
}
function toggleDiv(element) {
if (element.style.display === 'none') {
element.style.display = 'block';
} else {
element.style.display = 'none';
}
}
<div id="1" class="projectTitel">
<h1>Project: a</h1>
</div>
<div id="projectInhoudEen" class="projectInhoud" > content a</div>
<div id="2" class="projectTitel">
<h1>Project: b</h1>
</div>
<div id="projectInhoudTwee" class="projectInhoud"> content b</div>
<div id="3" class="projectTitel">
<h1>Project: c</h1>
</div>
<div id="projectInhoudDrie" class="projectInhoud"> content c</div>
I would try something like this in the HTML:
<div class=myDiv onclick=myFunction(this)></div>
<div class=myDiv onclick=myFunction(this)></div>
<div class=myDiv onclick=myFunction(this)></div>
And for your JavaScript:
function myFunction(element){
if(element.style.display = "none"){
element.style.display = "block";
else{
element.style.display = "none";
}
}
I have a Hide/show div with a button and javascript code. I want to start it hidden (and not show).
can you help me ?
HTML
Click Me
<div id="myDIV">
This is my DIV element.
</div>
JAVASCRIPT
function myFunction() {
var x = document.getElementById('myDIV');
if (x.style.display === 'none') {
x.style.display = 'block';
} else {
x.style.display = 'none';
}
}
this is were i have found the code : hide/show
put onload in body
<body onload="myFunction()">
I used one of the codes I found in this website for creating 3 buttons which hided and showed 3 different div's. Code I found was created for 2 div's, so I've tried to edit it to support 3 div's. At first, it looked like it works, but then I noticed one problem: when you click on button which shows first or second div, everything in that div is clickable and when you click on something inside div, it open third div for no reason, how to fix that? Text inside div should not be clickable. Here's link for example of that problem:
http://www.llbm.lt/etnografiniai_regionai/mazoji_lietuva.html
Here's code:
<div class="trys-mygtukai">
<a "href="#" onclick="return showHide();"><img SRC="/etnografiniai_regionai/img/informacija_button.png"</a>
<a "href="#" onclick="return showHide1();"><img SRC="/etnografiniai_regionai/img/architektura_button.png"</a>
<a "href="#" onclick="return showHide2();"><img SRC="/etnografiniai_regionai/img/kita_button.png"</a>
</div>
<div id="pirmas" style="display:none;"></div>
<div id="antras" style="display:none;"></div>
<div id="trecias" style="display:none;"></div>
<script type="text/javascript" language="javascript">
function showHide() {
var ele = document.getElementById("pirmas");
var ele1 = document.getElementById("antras");
var ele2 = document.getElementById("trecias");
ele1.style.display = "none";
ele2.style.display = "none";
if(ele.style.display == "block") {
ele.style.display = "none";
}
else {
ele.style.display = "block";
}
}
function showHide1() {
var ele = document.getElementById("pirmas");
var ele1 = document.getElementById("antras");
var ele2 = document.getElementById("trecias");
ele.style.display = "none";
ele2.style.display = "none";
if(ele1.style.display == "block") {
ele1.style.display = "none";
}
else {
ele1.style.display = "block";
}
}
function showHide2() {
var ele = document.getElementById("pirmas");
var ele1 = document.getElementById("antras");
var ele2 = document.getElementById("trecias");
ele.style.display = "none";
ele1.style.display = "none";
if(ele2.style.display == "block") {
ele2.style.display = "none";
}
else {
ele2.style.display = "block";
}
}
You aren't closing the image tags properly
<a "href="#" onclick="return showHide2();"><img SRC="/etnografiniai_regionai/img/kita_button.png"</a>
This should be:
<img SRC="/etnografiniai_regionai/img/kita_button.png">
You made the same mistake with the other 2 images as well, after closing them this behaviour should disappear.
As said before: youre not closing the img tag properly, also this might bug your code:
"href="#" should be href="#"