binden und lösen Funktionen

Ich habe 3 Tasten - BTN 1, 2 und 3 - mit jeder ihre eigene Funktion zugewiesen. Was ich will, ist, dass Knopf 1 standardmäßig Funktion 1 hat. Beim Drücken der Taste 2 muss jedoch die Funktion der Taste 1 auf Funktion 4 umgeschaltet werden. Beim Drücken der Taste 3 muss die Taste 1 wieder auf Funktion 1 gesetzt werden. So Tasten 2 und 3 haben ihre eigene Funktion, aber sie haben auch die Funktion der Taste 1 um den Code zu wechseln ist:binden und lösen Funktionen

<!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>

Quelle

2016-07-27 Jan de Vries

Warum haben Sie jQuery markiert, wenn es keine jQuery gibt? – rottenoats

Sie verwenden können, wenn Aussagen zuweisen, was die Funktion wollen Zahlen zu tun mit:

<!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: Sie können auch einen booleschen Wert (true/false) für functionType verwenden, aber wenn Sie mehr Funktionalität hinzufügen möchten, würde ich Zahlen verwenden.

Quelle

2016-07-27 09:34:38

Vergessen Sie nicht, diese Antwort zu verbessern und markieren Sie sie als beantwortet, wenn dies Ihnen hilft: P –

Dank Nick, es funktioniert. Groß! –

Verwenden removeEventListener in function2 und function3 und dann eine einwandfreie Funktion anhängen mit 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); 
}

Quelle

2016-07-27 09:22:55 Maxx

Danke MAxx, du bist ein Genie! –

Antwort

Verwandte Themen