Button moves when an element's display goes from "none" to "block" - javascript

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.

Related

I want to hide a div using javascript

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

How can I have infinite clicks on my button because after i click the button it does not work anymore

<script type="text/javascript">
//this will make it appear
function showPicture() {
var sourceOfPicture = "img/tierlist.jpg";
var img = document.getElementById('tierlist')
img.src = sourceOfPicture.replace('90x90', '225x225');
img.style.display = "block";
}
// this will remove the picture
function removePicture() {
var image_x = document.getElementById('tierlist');
image_x.parentNode.removeChild(image_x);
img.style.display = "block";
}
</script>
I want it to have an infinite amount of clicks and not just a one and done button, how do I do it?
Your button won't show the image again after you hide it was because of this line
image_x.parentNode.removeChild(image_x);
You are removing the element out of the page completely so when you select it again with
var img = document.getElementById('tierlist')
it won't be able to find the item.
Suggestion: Setting the display style of the item to "none" when you want to hide it and set it to "block" when you want to display it.
Example:
function toggle(){
var txtDiv = document.getElementById('tierlist');
if(txtDiv.style.display == "none"){
txtDiv.style.display = "block"
} else{
txtDiv.style.display = "none"
}
}
<div id="tierlist">Hello</div>
<button onclick="toggle()">Show/hide</button>

why this addEventListener('click', function) needs two clicks instead of one?

I have a div where the css style display: none is applied to. What I'm trying to achieve is a one click to change it to display: block. Right now, I can't grasp why, but it requires two clicks. Below is the Javascript for it:
var block = document.getElementById('block');
function switchBlock() {
block.style.display == "none" ? block.style.display = "block" : block.style.display = "none";
}
block.addEventListener('click', switchBlock);
you don't use same var name in your code, don't understand event how it could work on a second click
EDIT : This is because element.style != computed style.
var block = document.getElementById('block');
var switcher = document.getElementById('switcher');
function switchBlock() {
window.getComputedStyle(block).getPropertyValue('display') == "none" ? block.style.display = "block" : block.style.display = "none";
}
switcher.addEventListener('click', switchBlock);
#block {
display: none;
}
<button id="switcher">click-me</button>
<div id="block">
<span>some text</span>
</div>

3 Buttons show/hide 3 div's in javascript

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="#"

Spoiler on button

I'm trying to make spoiler on button.
It works well only on JSFIddle.
But It doesn't work in HTML document:
JsFiddle
HTML:
<button onclick="showSpoiler(this);" style="outline: none;" >Spoiler</button>
<span class="inner" style="display:none;">
This is a spoiler!
</span>
JS
window.showSpoiler = function (obj)
{
var inner = obj.parentNode.getElementsByTagName("span")[0];
if (inner.style.display == "none")
{
obj.style.display = "none";
inner.style.display = "";
}
else
inner.style.display = "none";
}
}
Problem:
You do not have any <span> element on your website, and your spoiler onclick is searching for that. With inner.style.display you are trying to access the style property of inner (which is undefined as it could not be found), and hence are getting an error.
Solution:
Change
var inner = obj.parentNode.getElementsByTagName("span")[0];
to
var inner = obj.parentNode.getElementsByTagName("div")[0];
Hope it helps!

Categories