JS onclick pourquoi ma page se refresh??

lGatl
Javascript

Bonjour les amis,
Je cherche à utiliser un bouton en js sans utiliser jquerry...
J'avais deja réussi à contourner le problème il y a 2 ans dans un autre projet.
Mais aujourd'hui, je veux bien comprendre, alors apres 2 jours de recherche intensive dans les forums, me voici.

console.log("erzrzrezrz")

var bt=document.getElementById('bt')
bt.onclick=function(){init()}

var init = function(){

console.log("TEST")

/*
  conv=mev(conv)
  converter(conv)
  aff(conv)*/
}

mon bouton à un id="bt"
au lancement du html
mon premier console.log s'affiche, normal.
quand je clique le second console.log s'affiche, mais disparait direct aprés!!!!!!!!!
POURQUOI??? :'(
Aaaaaaaaaaaah je suis trop un noob! :)

Merci d'avoir lu ce post.

4 réponses

Defy
Réponse acceptée

parceque un bouton submit rafraichi ta page automatiquement, pour palier a ce comportement il suffit de faire un truc du genre:

var bt=document.getElementById('bt')
bt.addEventListener('click', function(e){
    e.preventDefault();

    "ton code à lancer au click"
}

maintenant petite explication

pour gérer les evenement on passe pas par du onclick direct mais par des eventlistener ca te permet d'avoir un peut plus de controle.
le e en parametre de fonction représente l'event et le e.preventDefault()permet de couper l'effet de base du bouton et donc d'afficher ton console.log a la place de rafraichir la page.

PhiSyX
Réponse acceptée

Tu peux pallier à ce problème en y mettant un type à ton boutton, qui est plus recommandable (a11y).
<button id="bt" type="button">Test</button>.

lGatl
Auteur

Genial!!
Merci mille fois!!!!!

Defy

de rien ;-) pour informations il y as une formation dédié au debutant pour le javascript sur grafikart