Why I can't show a div?-CodePudding

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 >
            <div >
                <h1>Quer sair comigo?</h1>
            </div>   
            <div >
                <div class = "heart" id="heart"></div>
                <script type="text/javascript">
                    document.getElementById("heart").style.display = "none";
                </script>
                <div >
                    <button  type="button" id="botao2" onclick="setHeart(this)">SIM</button>&nbsp;
                </div>
                <div >
                    <button type="button"  id="botao" onm ouseover="move(this)">NÃO</button>
                </div>
            </div>
        </div>
    </body>
</html>

CodePudding user response：

Try to set dispay to block, maybe you can create a jsfiddle so it's easier to debug the second part of your question

CodePudding user response：

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.

CodePudding user response：

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)

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 >
  <div >
    <h1>Quer sair comigo?</h1>
  </div>
  <div >
    <div  id="heart"></div>
    <script type="text/javascript">
      document.getElementById("heart").style.display = "none";
    </script>
    <div >
      <button  type="button" id="botao2" onclick="setHeart(this)">SIM</button>&nbsp;
    </div>
    <div >
      <button type="button"  id="botao" onm ouseover="move(this)">NÃO</button>
    </div>
  </div>
</div>