関数のバインドとアンバインド

3つのボタン（btn 1,2、および3）が用意されています。私が欲しいのは、ボタン1はデフォルトで機能1を持っているということです。しかし、ボタン2を押すと、ボタン1の機能は機能4に切り替える必要があります。ボタン3を押すと、ボタン1は機能1に戻っていなければなりません。だから、ボタン2と3は、独自の機能を持っているが、彼らはまた、コード1ボタンの機能を切り替える必要がある：関数のバインドとアンバインド

関数2と関数3で

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

出典

2016-07-27 Jan de Vries

なぜjQueryがないときにjQueryタグが付けられましたか？ – rottenoats

：

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

をあなたはまた functionTypeのブール値（true/false）を使用することもできますが、機能を追加する予定があれば数字を使用します。

出典

2016-07-27 09:34:38

この回答をupvoteし、これがあなたに役立つ場合は、答えとしてマークしてください：P –

ありがとうNick、それは動作します。すばらしいです！ –

使用removeEventListener、その後、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); 
}

文は、関数の数字を使って何をしたいのか割り当てることがあればあなたが使用することができます

出典

2016-07-27 09:22:55 Maxx

ありがとうMAxx、あなたは天才です！ –

関数のバインドとアンバインド

答えて

関連する問題