Why I can't show a div?
Question
I am trying to show a heart of id heart when the button of id botao2 is clicked, but when I try to set display = "visible" the value of it didn´t change.
I also don't know why, but when I try to get the height, width or set the value of x and y of any button I can't, the return is just none.
function move(el){ let div = document.getElementsByClassName("container-button"); let width = Math.ceil(el.clientWidth); let height = Math.ceil(el.clientHeight); let wdh = Math.floor(div[0].clientHeight); let wdw = Math.floor(div[0].clientWidth); var changeTop = Math.floor((Math.random() * (wdh - height + 1))); var changeLeft = Math.floor((Math.random() * (wdw - width + 1))); console.log("Height: " + changeTop + " Width: " + changeLeft); el.style.marginTop = changeTop + "px"; el.style.marginLeft = changeLeft + "px"; } function setHeart(element){ document.getElementById("botao").style.display = "none"; document.getElementById("botao2").style.display = "none"; document.getElementById("heart").style.display = "visible"; }
body{ align-items: center; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; background-image: linear-gradient(to top left, rgba(255,0,0,0), rgba(255,0,0,1)); }.container { flex-direction: row; justify-content: center; align-items: center; width: 700px; margin: 0 auto; display: flex; }.wrap { /* Quebra a linha assim que um dos flex itens não puder mais ser compactado. */ flex-wrap: wrap; }.item { /* O flex: 1; é necessário para que cada item se expanda ocupando o tamanho máximo do container. */ flex: 1; background: white; font-size: 1.5em; border-radius: 10px; width: 80px; height: 40px; border: none; color: red; -ms-transform: translateY(-50%); transform: translateY(-50%); top: 50%; }.container-button { align-content: center; width: 500px; height: 500px; display: flex; margin-top: 25%; margin-left: 35%; } h1 { text-align: center; color: white; }.heart { background: red; position: relative; height: 100px; width:100px; /* Animation */ transform: rotate(-45deg) scale(1); animation: pulse 2s linear infinite; } #heart { display: none; }.heart::after { /* background:blue; */ background:inherit; border-radius: 50%; /* To make circle */ content:''; position:absolute; /* top: -100px;*/ top: -50%; /* Inherit properties of parent */ /* left: -100px; */ left:0; height: 100px; width:100px; }.heart::before { /* background:green; */ background:inherit; border-radius: 50%; /* To make circle */ content:''; position:absolute; top:0; right:-50%; /* Inherit properties of parent */ height: 100px; width:100px; } @keyframes pulse{ 0% { transform: rotate(-45deg) scale(1); opacity: 0; }/* 10% { transform: rotate(-45deg) scale(1.3); } 20% { transform: rotate(-45deg) scale(0.9); } 30% { transform: rotate(-45deg) scale(1.2); } 40% { transform: rotate(-45deg) scale(0.9); }*/ 50% { transform: rotate(-45deg) scale(1.3); opacity: 1; }/* 60% { transform: rotate(-45deg) scale(0.95); } 70% { transform: rotate(-45deg) scale(1); } */ 100% { transform: rotate(-45deg) scale(1); opacity: 1; } }
<.DOCTYPE html> <html> <head> <link rel="stylesheet" href="style.css" type="text/css"> <script src="script?js"></script> </head> <body> <div class="container wrap"> <div class="container-title"> <h1>Quer sair comigo.</h1> </div> <div class="container-button"> <div class = "heart" id="heart"></div> <script type="text/javascript"> document.getElementById("heart").style;display = "none"; </script> <div class="botao"> <button class="item" type="button" id="botao2" onclick="setHeart(this)">SIM</button> </div> <div class="botao"> <button type="button" class="item" id="botao" onmouseover="move(this)">NÃO</button> </div> </div> </div> </body> </html>
3 answers
solution1
0 2022-08-13 02:50:07
Try to set dispay to block , maybe you can create a jsfiddle so it's easier to debug the second part of your question
solution2
0 2022-08-13 02:50:42
You need to set display : block instead of visible:
document.getElementById("heart").style.display = "block";
Because they're not the same:
visibility:hidden has visibility:visible and it will keep the element on the page and occupies that space but does not show it to the user.
display:none has display:block and it will not be available on the page and does not occupy any space.
solution3
0 2022-08-13 03:05:10
Couple things:
Visible is not a valid display value ( see options here ), I have set block instead in your setHeat function:
document.getElementById("heart").style.display = "block";
Also edited your console.log inside of move() to include both width & height values, while X & Y coordinates are already shown with your changeTop & changeLeft (you can see these in the fiddle's console at the bottom when you hover over NÃO button triggering move() )
console.log("botao width: " + width + " botao height: " + height + " Height: " + changeTop + " Width: " + changeLeft);
See working snippet below:
function move(el) { let div = document.getElementsByClassName("container-button"); let width = Math.ceil(el.clientWidth); let height = Math.ceil(el.clientHeight); let wdh = Math.floor(div[0].clientHeight); let wdw = Math.floor(div[0].clientWidth); var changeTop = Math.floor((Math.random() * (wdh - height + 1))); var changeLeft = Math.floor((Math.random() * (wdw - width + 1))); console.log("botao width: " + width + " botao height: " + height + " Height: " + changeTop + " Width: " + changeLeft); el.style.marginTop = changeTop + "px"; el.style.marginLeft = changeLeft + "px"; } function setHeart(element) { document.getElementById("botao").style.display = "none"; document.getElementById("botao2").style.display = "none"; document.getElementById("heart").style.display = "block"; }
body { align-items: center; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; background-image: linear-gradient(to top left, rgba(255, 0, 0, 0), rgba(255, 0, 0, 1)); }.container { flex-direction: row; justify-content: center; align-items: center; width: 700px; margin: 0 auto; display: flex; }.wrap { /* Quebra a linha assim que um dos flex itens não puder mais ser compactado. */ flex-wrap: wrap; }.item { /* O flex: 1; é necessário para que cada item se expanda ocupando o tamanho máximo do container. */ flex: 1; background: white; font-size: 1.5em; border-radius: 10px; width: 80px; height: 40px; border: none; color: red; -ms-transform: translateY(-50%); transform: translateY(-50%); top: 50%; }.container-button { align-content: center; width: 500px; height: 500px; display: flex; margin-top: 25%; margin-left: 35%; } h1 { text-align: center; color: white; }.heart { background: yellow; position: relative; height: 100px; width: 100px; /* Animation */ transform: rotate(-45deg) scale(1); animation: pulse 2s linear infinite; } #heart { display: none; }.heart::after { /* background:blue; */ background: inherit; border-radius: 50%; /* To make circle */ content: ''; position: absolute; /* top: -100px;*/ top: -50%; /* Inherit properties of parent */ /* left: -100px; */ left: 0; height: 100px; width: 100px; }.heart::before { /* background:green; */ background: inherit; border-radius: 50%; /* To make circle */ content: ''; position: absolute; top: 0; right: -50%; /* Inherit properties of parent */ height: 100px; width: 100px; } @keyframes pulse { 0% { transform: rotate(-45deg) scale(1); opacity: 0; } 50% { transform: rotate(-45deg) scale(1.3); opacity: 1; } 100% { transform: rotate(-45deg) scale(1); opacity: 1; } }
<div class="container wrap"> <div class="container-title"> <h1>Quer sair comigo?</h1> </div> <div class="container-button"> <div class="heart" id="heart"></div> <script type="text/javascript"> document.getElementById("heart").style.display = "none"; </script> <div class="botao"> <button class="item" type="button" id="botao2" onclick="setHeart(this)">SIM</button> </div> <div class="botao"> <button type="button" class="item" id="botao" onmouseover="move(this)">NÃO</button> </div> </div> </div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Why can't I appendChild to the specified DIV?
Why can't I get the alert to show?
I can't show content of a list of items on my div
Why can't I find this DIV that I appended to the body with jQuery
Why can't I set value to display in a div?
Why can't I access the properties of a HTML div/jQuery object?
Why can't I bold text by clicking a DIV?
Why can´t I insert html in a nested div via Javascript?
Why I can't hide this div using JavaScript?
Why can't I make a Table row using JavaScript and a <div>?
Related Tags