Problem with Show and Hide Div with Jquery

Question

Problem with Show and Hide Div with Jquery

Navigation

#1 by (0 votes)
#2 by (-1 votes)

0

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

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

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

But I do not know why div with resultado is not being displayed. Only the div with id normal with the result. If I remove the function that makes the sum and click the div button with id resultado is normally displayed.

The code can be viewed by clicking here .

javascript jquery

asked by anonymous 27.08.2016 / 02:21

2 answers

-1

Look, you're replacing all contents of div with the result. So it does not show:

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

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

27.08.2016 / 02:37

How to read DBF generated in Protheus in Visual Fox Pro? Problems using callback in a ws

score 0 · Accepted Answer

I did not notice in your code any instructions to re-enable% of the div result.

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

PS: Avoid using the onclick property of the tags, instead display 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 have helped.