fonctions de liaison et de désengagement

J'ai 3 boutons - btn 1, 2 et 3 - avec chacun leur propre fonction qui lui est assignée. Ce que je veux, c'est que le bouton 1 ait la fonction 1 par défaut. Mais en appuyant sur le bouton 2, la fonction du bouton 1 doit passer à la fonction 4. En appuyant sur le bouton 3, le bouton 1 doit être de nouveau assigné à la fonction 1. Ainsi, les boutons 2 et 3 ont leur propre fonction, mais ils ont aussi de changer la fonction du bouton 1. Le code est:fonctions de liaison et de désengagement

<!DOCTYPE html> 
<html> 
<head> 
<title>Page Title</title> 
</head> 
<body> 

<button id="button1">button 1</button> 
<button id="button2">button 2</button> 
<button id="button3">button 3</button> 

<script> 
document.getElementById("button1").addEventListener("click", myFunction1); 

function myFunction1() { 
alert ("1"); 
} 

document.getElementById("button2").addEventListener("click", myFunction2); 

function myFunction2() { 
alert ("2"); 
} 

document.getElementById("button3").addEventListener("click", myFunction3); 

function myFunction3() { 
alert ("3"); 
} 
</script> 

<script> 
function myFunction4() { 
alert ("4"); 
} 
</script> 


</body> 
</html>

Source

2016-07-27 Jan de Vries

Pourquoi jQuery est-il étiqueté lorsqu'il n'y a pas de jQuery? – rottenoats

vous pouvez utiliser si des déclarations pour attribuer ce que vous voulez que la fonction de faire en utilisant les numéros:

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<title>Page Title</title> 
 
</head> 
 
<body> 
 

 
<button id="button1">button 1</button> 
 
<button id="button2">button 2</button> 
 
<button id="button3">button 3</button> 
 

 
<script> 
 
document.getElementById("button1").addEventListener("click", myFunction1); 
 
var functionType = 1; 
 
function myFunction1() { 
 
    if(functionType == 1){ 
 
    alert("1"); 
 
    } else if(functionType == 4){ 
 
    myFunction4(); 
 
    } 
 
} 
 

 
document.getElementById("button2").addEventListener("click", myFunction2); 
 

 
function myFunction2() { 
 
alert ("2"); 
 
functionType=4; 
 
} 
 

 
document.getElementById("button3").addEventListener("click", myFunction3); 
 

 
function myFunction3() { 
 
alert ("3"); 
 
functionType=1; 
 
} 
 
    
 
    function myFunction4() { 
 
alert ("4"); 
 
} 
 
</script> 
 

 
<script> 
 

 
</script>

PS: Vous pouvez également utiliser un booléen (vrai/faux) pour functionType mais si vous prévoyez d'ajouter plus de fonctionnalités, j'utiliserais des nombres.

Source

2016-07-27 09:34:38

Ne pas oublier de surseoir cette réponse et la marquer comme répondue si cela vous aide: P –

Merci Nick, ça marche. Génial! –

Utilisation removeEventListener dans fonction2 et function3, puis fixer le bon fonctionnement avec addEventListener

function myFunction2() { 
    document.getElementById("button1").removeEventListener("click", myFunction1); 
    document.getElementById("button1").addEventListener("click", myFunction4); 
} 

function myFunction3() { 
    document.getElementById("button1").removeEventListener("click", myFunction4); 
    document.getElementById("button1").addEventListener("click", myFunction1); 
}

Source

2016-07-27 09:22:55 Maxx

Merci MAxx, vous êtes un génie! –

fonctions de liaison et de désengagement

Répondre

Questions connexes