onclickイベントとondblclickイベントの交換イベント

こんにちは、私はonclickとondblclickイベントのイベントをJavaScriptで交換しようとしています。これは私がイベントれるondblclick onclickのとを交換する "switchEvent（）" 関数のスクリプトをしたい私のHTMLページonclickイベントとondblclickイベントの交換イベント

<div id="displayStatus"class="display"></div> <input type="button" value="Click Me" onclick="clickFunction()" ondblclick="doubleClick()"> <input type="button" value="Switch Event" onclick="switchEvent()">

です。 onclickがondblclickとして動作し、その逆の場合は、「スイッチイベント」ボタンをクリックした後のことを意味します。

私はこの

var booleanFlag = true; function clickFunction(){ if(booleanFlag) document.getElementById("displayStatus").innerHTML="Single Click"; else document.getElementById("displayStatus").innerHTML="Double Click"; } function doubleClick(){ if(booleanFlag) document.getElementById("displayStatus").innerHTML="Double Click"; else document.getElementById("displayStatus").innerHTML="Single Click"; } function switchEvent(){ if (booleanFlag) { booleanFlag=false; } }

が、これらの原因コードの繰り返しのようでした。より良い選択肢を共有することができます。

ありがとうございます。

出典

2017-02-26 Anonymous

ないコードの繰り返しオプション：

<html> 
<body> 
    <div id="displayStatus" class="display"></div> 
    <input type="button" value="Click Me" onclick="handler(false)" ondblclick="handler(true)"> 
    <input type="button" value="Switch Event" onclick="switchEvent()"> 

    <script> 
     var isSwitched = false; 
     var display = document.getElementById("displayStatus"); 

     function handler(isDoubleClick) { 
      isDoubleClick = (!isSwitched && isDoubleClick) || (isSwitched && !isDoubleClick); 
      display.innerHTML = isDoubleClick ? "Double Click" : "Single Click"; 
     } 

     function switchEvent(){ 
      isSwitched = !isSwitched; 
     } 
    </script> 
</body> 
</html>

出典

2017-02-26 14:23:41 m1kael

これは解決策です....それは解決していただきありがとうございます。 –

あなたは大歓迎です。それはあなたのために働いているので、答えとしてマークしてください。ありがとうございました。 – m1kael

@ Indrajeet4192この解決策は機能しません...表示されているテキストのみを変更します。ボタンの属性は変更されません。 'onclick'関数と' ondblclick'関数は常に同じです... –

1つの機能で十分です。 document.getElementByIdでボタンを取得し、州に応じて、onclick属性を変更してください。すべてのあなたがそのようにボタンclickFunction()からdoubleClick()への変更とdoubleClick()clickFunction()からondblclick変化とのonclick属性コンソールに表示されますswitchEventをクリックして

。

var booleanFlag = true; 
 
var btn = document.getElementById('btn'); 
 

 
function switchEvent() { 
 
    if (booleanFlag) { 
 
    btn.setAttribute('onclick', 'doubleClick()'); 
 
    btn.setAttribute('ondblclick', 'clickFunction()'); 
 
    booleanFlag = false; 
 
    } 
 
    else { 
 
    btn.setAttribute('onclick', 'clickFunction()'); 
 
    btn.setAttribute('ondblclick', 'doubleClick()'); 
 
    booleanFlag = true; 
 
    } 
 
    console.log(btn); 
 
} 
 

 
function clickFunction(){ 
 
    console.log('onclick'); 
 
} 
 

 
function doubleClick(){ 
 
    console.log('doubleClick'); 
 
}

<div id="displayStatus" class="display"></div> 
 
<input type="button" id='btn' value="Click Me" onclick="clickFunction()" ondblclick="doubleClick()"> 
 
<input type="button" value="Switch Event" onclick="switchEvent()">

出典

2017-02-26 14:10:41

が機能していない...エラー '"キャッチされない例外TypeError取得：プロパティを読み取ることができません 'とのsetAttribute' ヌルのswitchEventで（myjavascript.js：42） "' –

@ Indrajeet4192しかし、あなたはあなたの 'html'コードを変更しましたか？私はそれをキャッチできるようにボタンに 'id''btn 'を追加しました。 –

ボタンのIDを追加しました....ソリューションを取得していません...私は別の方法を試していますが、ありがとう –

onclickイベントとondblclickイベントの交換イベント

答えて

関連する問題