Function running from second click

Asked

Viewed 55 times

2

I have a button in my project, which the function is to make appear a div that is as display None, but the function is only executed from the second click on the button, the first click just selects the button. Someone would know to tell me what I’m doing wrong?

Follows prints:

Canvas:

Knob:

inserir a descrição da imagem aqui

First click: (Selected button)

inserir a descrição da imagem aqui

Second click: (Div appears)

inserir a descrição da imagem aqui

Code:

HTML:

<button class="btn botaoGlobalLeft" ng-click="$ctrl.intermediacao()">
    <span class="glyphicon glyphicon-menu-down"></span> Intermediação</button>

<div class="elemento form-group row" id="intermediacao">
    <div class="row">
        <div class="col-sm-2">
            <label for="apelido2">Apelido</label>
            <input type="text" title="Informe o apelido" id="apelido2" class="form-control inputEstoque">
        </div>
    </div>

CSS:

#informacoes{
display: none;
}

JS (Angular):

intermediacao() {
  const display = document.getElementById("intermediacao").style.display;
  if (display == "none") {
    document.getElementById("intermediacao").style.display = 'block';
  } else {
    document.getElementById("intermediacao").style.display = 'none';
  }
}
javascript angularjs
  • 2

    Please type your code in the question. Use the Code Sample option {} to format your code. The image of the code is very disturbing for those who answer.

  • Edited, thanks for the tip

  • It is not legal to manipulate the classes of the element directly in the code with Angular

  • I have already withdrawn my negative vote, but to explain why I voted 'no': http://idownvotedbecau.se/imageofcode

  • Relax, I’m new around here, and I won’t do it again

1 answer

2


An element with display: none direct in CSS, has no value inline, which is what you get with document.getElementById("intermediacao").style.display.

So in the first click element wins the style none inline and the second click will already work.

To resolve this, enter if a second condition to check if it is empty:

if (display == "none" || display == "") {...

Browser other questions tagged javascript angularjs

You are not signed in. Login or sign up in order to post.