Question 229848 in Html Question posted in
Some basic documentation can be found here.

Html – Can't understand why classList.remove isn't working

It seems like my js function doesen’t work properly.
Every time i remove the class "d-none" from an element, it becomes visible for like 1 second and then disappears again.

Function to make appear and disappear the element:

function acquistaCrediti() {
  document.getElementById("form-pagamento").classList.remove("d-none");
}

Link that triggers the function:

<a href="" class="title" id="acquista_crediti" onclick="acquistaCrediti()">
  ACQUISTA CREDITI
</a>

This is the element I want to make appear and disappear:

<div class="d-none" id="form-pagamento">
  <div class="container text-center">
    <div class="panel panel-default">
      <div class="panel-heading">
        <div class="row">
          <h3 class="text-center">DATI PAGAMENTO</h3>
        </div>
      </div>
      <div class="panel-body">
        <form role="form">
          <div class="row">
            <div class="col-xs-12">
              <div class="form-group"> <label>NUMERO CARTA</label>
                <div class="input-group"> <input type="number" class="form-control" placeholder="Numero Carta valido" required /> <span class="input-group-addon"><span class="fa fa-credit-card"></span></span>
                </div>
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-xs-7 col-md-7">
              <div class="form-group"> <label><span class="hidden-xs">DATA DI SCADENZA</span></label>
                <input type="date" class="form-control" required> </div>
            </div>
            <div class="col-xs-5 col-md-5 pull-right">
              <div class="form-group"> <label>CODICE CV</label> <input type="tel" class="form-control" placeholder="CVC" required maxlength="3" /> </div>
            </div>
          </div>
          <div class="row">
            <div class="col-xs-12">
              <div class="form-group"> <label>INTESTATARIO DELLA CARTA</label> <input type="text" class="form-control" placeholder="NOME-COGNOME" required /> </div>
            </div>
          </div>
          <br>
          <div class="row">
            <div class="col-6">
              <div class="form-group"> <label>NUMERO DI CREDITI CHE SI DESIDERA ACQUISTARE</label>
                <input onchange="aggiornaPrezzo(this.value)" id="prezzo" type="number" class="form-control" placeholder="NUMERO CREDITI" required /> </div>
            </div>
            <div class="col-6">
              <div class="form-group"> <label>PREZZO</label> <input disabled type="text" class="form-control"> </div>
            </div>
          </div>
          <br>
          <div class="panel-footer">
            <div class="row">
              <!--  <div class="col-xs-12"> <input type = "button" class="btn btn-success btn-lg btn-block" onclick="compraCrediti(email)" value = "CONFERMA PAGAMENTO"></input> </div> -->
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

I tried to stop the code as soon as the element is made visible, but the page seams to reload automatically.

Tags:

2

Answers


  1. 0

    Ad the comments have pointed out if you must use an <a> tag then you need to attach a click event listener to it rather than use the onclick attribute. Now you have access to the click Event itself and you can prevent the browser default action for an <a> tag, which is to navigate to another page. This is what your main issue was

    var acquistaCrediti = document.getElementById("acquista_crediti");
var formPagamento = document.getElementById("form-pagamento");

acquistaCrediti.addEventListener("click", function(event){
  event.preventDefault();
  formPagamento.classList.remove("d-none");
})
    .d-none{display:none;}
    <a href="#" id="acquista_crediti">
  ACQUISTA CREDITI
</a>

<div id="form-pagamento" class="d-none">
hidden content
</div>
    Login or Signup to reply.
  2. 0

    It looks like the issue you’re experiencing might be related to the default behavior of the anchor tag () that triggers your function. When you use an empty href attribute in an anchor tag, it can cause the page to reload or jump to the top when the link is clicked.

    To prevent this behavior and ensure your function is executed without any interruptions, you can modify your anchor tag as follows:

    <a href="javascript:void(0);" class="title" id="acquista_crediti" onclick="acquistaCrediti()">
  ACQUISTA CREDITI
</a>

    By using "javascript:void(0);" as the href attribute, you avoid any page reloads or jumps, and your JavaScript function should work smoothly to toggle the visibility of the element.

    Give this modification a try and see if it resolves the issue you’re facing.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search