Jquery Display and Hide Div Problem

Question

I have a code, where I want to display the result of a sum without reloading the page. As an example, I have already set initial values in the fields.

*Problem: I have one div id resultado that has a css to hide it in initial state. Clicking on the calculate button has a function to display the div.

There is another function that will take the values of the fields input and display the result within the div with id normal. This div is inside the div with id resultado.

But I don’t know why div id resultado is not being displayed. Only the div with id normal with the result. If I remove the function that sums up and click on the div id resultado is displayed normally.

The code can be seen by clicking here.

Answer 1

I didn’t notice in your code any instructions to enable the display of div outworking.

I made a small modification and now your code is working.

PS: Avoid using the onclick property of tags, use addEventListener instead.

document.getElementById("calcular").addEventListener("click", function() {
  var a = document.getElementById('a').value;
  var b = document.getElementById('b').value;
  document.getElementById("normal").innerHTML = (a / b);
  document.getElementById("resultado").style.display = "block";
});

.principal-i {
  width: 600px;
  height: 135px;
  padding-left: 15px;
  padding-right: 15px;
  padding-top: 10px;
  background: #ff7f27;
  border-radius: 5px;
  font-family: 'Open Sans', sans-serif;
}
.calcule {
  font-size: 15px;
  text-transform: uppercase;
  color: #FFFFFF;
  text-align: center;
  font-weight: 600;
  margin-bottom: 20px
}
.col-md-34 {
  width: 28%;
  height: auto;
  float: left;
  margin-left: 7%;
  margin-right: 3%;
}
.col-md-34-2 {
  width: 28%;
  height: auto;
  float: left;
  margin-left: 2%;
  margin-right: 2%;
}
.col-md-30 {
  width: 20%;
  height: auto;
  float: left;
  margin-left: 3%;
  margin-right: 7%;
}
input.campo-i {
  width: 100%;
  height: 55px;
  border-radius: 4px;
  border: 1px solid #ccc;
  background: #fff;
}
.botao-calcular {
  background: #20a648;
  color: #ffffff;
  padding: 20px 20px;
  width: 100%;
  height: auto;
  border: none;
  border-radius: 4px;
  font-size: 13px;
  font-weight: bold;
  text-transform: uppercase;
  cursor: pointer;
}
.botao-calcular:hover {
  background: #1b923f;
}
#resultado {
  display: none;
}
.resultado {
  margin-top: 20px;
  width: 600px;
  height: auto;
}
.resultado-exibido {
  width: 100%;
  height: auto;
  border-radius: 15px;
  background: #ebebeb;
  padding: 15px;
  font-family: 'Open Sans', sans-serif;
  font-weight: 300;
}
.titulo-i {
  color: #7f7f7f;
  text-align: center;
}
.i-centro {
  width: 49%;
  float: left;
}
.text-align-left {
  text-align: left;
}
.text-align-right {
  text-align: right;
}
.resultado-valor {
  font-size: 30px;
  color: #009b36;
  font-weight: 700;
}

<div class="principal-i">
  <p class="calcule">Divisão de A por B</p>

  <div class="col-md-34">
    <input type="text" name="a" id="a" class="campo-i" placeholder="A" value="50">
  </div>
  <div class="col-md-34-2">
    <input type="text" name="b" id="b" class="campo-i" placeholder="B" value="10" />
  </div>
  <div class="col-md-30">
    <button type="submit" id="calcular" class="botao-calcular">Dividir</button>
  </div>

</div>

<div id="resultado" class="resultado">
  <div id="normal" class="resultado-exibido">
    <h2 class="titulo-i">RESULTADO</h2>
    <div class="i-centro text-align-right"></div>
    <div class="i-centro text-align-left">
      <div id="normal" class="resultado-valor"></div>
    </div>
  </div>
</div>

I hope I’ve helped.

Answer 2

Look you’re replacing all the contents of div for the result. That’s why it doesn’t show:

document.getElementById("normal").innerHTML = (a / b);

Everything within the div normal is replaced by value. Then the title is deleted.