Javascriptを実行しない2つのウィンドウonclick関数を追加する

Question

純粋なjavascriptを使用してハンバーガーメニューを作成しています。

私は1つのwindow.onclick関数を持っています。あなたがそれを外にクリックすると、それ自体がうまくいきます。

ただし、別のものを追加すると、両方の機能が停止します。私は、変数名を変更しましたが、私はこの作品https://jsfiddle.net/7wcyz9p5/

var navcontainerwrapperr = document.getElementById('main_wrapper_box'); 

window.onclick = function(eventexi) { 
if (eventexi.target == navcontainerwrapperr) { 
document.getElementById("mySidenav").style.width = "0"; 
} 

//// if these below lines are removed it works fine 
//// if these below lines are removed it works fine 
var ciever = document.getElementById('bix'); 

window.onclick = function(eventexit) { 
if (eventexit.target == ciever) { 
document.getElementById("mySidenav").style.width = "0"; 
}  

Answer 1

"onclick"イベントに複数のリスナーを追加する場合は、onclick関数ではなく 'addEventListener'を使用する必要があります。プロパティ 'onclick'を使用すると、秒を割り当てることを試みるuがちょうど最初の書き換え：

var navcontainerwrapperr = document.getElementById('main_wrapper_box'); 
window.addEventListener('click',function(eventexi) { 
    if (eventexi.target == navcontainerwrapperr) { 
     document.getElementById("mySidenav").style.width = "0"; 
    } 
}); 

var ciever = document.getElementById('bix'); 

window.addEventListener('click', function(eventexit) { 
    if (eventexit.target == ciever) { 
     document.getElementById("mySidenav").style.width = "0"; 
    } 
}); 

しかし、あなたの場合にはあれば、他の内部と、ワンクリックリスナーを使用することも、より便利である：

var navcontainerwrapperr = document.getElementById('main_wrapper_box'); 
var ciever = document.getElementById('bix'); 
window.addEventListener('click',function(eventexi) { 
    if (eventexi.target == navcontainerwrapperr) { 
     document.getElementById("mySidenav").style.width = "0"; 
    } 
    if (eventexit.target == ciever) { 
     document.getElementById("mySidenav").style.width = "0"; 
    } 
}); 

Answer 2

は、更新フィドルを参照してくださいをご覧くださいコードの完全なコピーのために、やっている何

ここ

を働いていないその：https://jsfiddle.net/vineeshmp/7wcyz9p5/2/

を

var navcontainerwrapperr = document.getElementById('main_wrapper_box'); 

var menu = document.getElementById('menu'); 

var closebtn = document.getElementById('closebtn'); 
window.onclick = function(eventexi) { 
    if (eventexi.target == navcontainerwrapperr) { 
    document.getElementById("mySidenav").style.width = "0"; 
    } 

    if (eventexi.target == menu) { 
    document.getElementById("mySidenav").style.width = "300px"; 
    } 
    if (eventexi.target == closebtn) { 
    document.getElementById("mySidenav").style.width = "0"; 
    } 

} 

Answer 3

私が最初に「}」欠けましたwindow.onclick関数。また、私はあなたが唯一の1つのwindow.onclick機能を持つ必要があります更新されたURL https://jsfiddle.net/7wcyz9p5/5/

window.onclick = function(eventexi) { 
    if (eventexi.target == navcontainerwrapperr) { 
     document.getElementById("mySidenav").style.width = "0"; 
    } 
}