Wie erkennt man, welche Schaltfläche in Javascript angeklickt wird?

ich versuche herauszufinden, wie die ID der Schaltfläche zu tragen, wenn auf meine Funktion geklickt wird. 1 Funktion zum Ändern der Farbe bei Mouseover und eine Funktion zum Zurücksetzen auf die Originalfarbe beim MouseOut. Ich weiß, ich kann es einfach in CSS tun, aber ich möchte nur lernen, wie man es in Javascript macht. Vielen Dank im Voraus. Unten ist mein Code.Wie erkennt man, welche Schaltfläche in Javascript angeklickt wird?

var buttonClass = this.className(); 
 
// document.getElementById("mainTitle"); 
 
    this.style.backgroundColor="#000000"; 
 
    this.style.color="#ffffff"; 
 
    this.style.cursor = "pointer"; 
 
} 
 

 
function defaultColor() { 
 
    var buttonClasss = this.getElementById(); 
 
    //document.getElementById("addList"); 
 
    this.style.backgroundColor = "#ffffff"; 
 
    this.style.color = "#000000"; 
 
    this.style.cursor = "pointer"; 
 
} 
 
    
 

 
//event listener for Change Title button 
 
document.getElementById("mainTitle").addEventListener("mouseover", changeColor); 
 
document.getElementById("mainTitle").addEventListener("mouseout", defaultColor); 
 
document.getElementById("mainTitle").addEventListener("click", changeTitle); 
 
//event listener for change title ends here 
 

 
//event listener for add listing 
 
document.getElementById("addList").addEventListener("mouseover", changeColor); 
 
document.getElementById("addList").addEventListener("mouseout", defaultColor); 
 
document.getElementById("addList").addEventListener("click", addListing); 
 
//event listener for add listing ends here

#mainTitle { 
 
    border:1px solid #ff33f4; 
 
    float:left; 
 
    clear:both; 
 
    font-family:arial; 
 
    font-weight:bold; 
 
    font-size:20px; 
 
    border-radius:50px; 
 
    background-color:#ff33ff; 
 
    width:200px; 
 
    height:35px; 
 
    text-align:center; 
 
    padding-top:20px; 
 
    padding-bottom:10px; 
 
    cursor:pointer; 
 
} 
 

 
#addList { 
 
    border:1px solid #ff33f4; 
 
    float:right; 
 
    font-family:arial; 
 
    font-weight:bold; 
 
    font-size:20px; 
 
    border-radius:50px; 
 
    background-color:#ff33ff; 
 
    width:200px; 
 
    height:35px; 
 
    text-align:center; 
 
    padding-top:20px; 
 
    padding-bottom:10px; 
 
    cursor:pointer; 
 
} 
 

 
#main { 
 
    clear:both; 
 
    margin-top:120px; 
 
}


 
    <div id="mainTitle" class="changeTitle">Change Title</div> 
 
    <div id="addList" class="addList">Add List</div>

Quelle

2016-09-14 jerz

Wenn eine Funktion ausgelöst wird, kommt es mit dem Argument 'event'. Mit 'event'-Objekt können Sie die angeklickte Schaltfläche erhalten. mit 'event.currentTarget'. –

Wenn Sie eine Funktion auf ein Ereignis anhängen, Sie nicht wirklich brauchen, die ID des Elements verfolgen das Ereignis zu emittieren, müssen Sie benutzen Sie einfach die ‚this‘ Schlüsselwort, darauf zuzugreifen. Unten finden Sie ein Beispiel dafür anhand Ihres Beispielcodes.

<html> 
 
<head> 
 
<style> 
 
#mainTitle { 
 
    border:1px solid #ff33f4; 
 
    float:left; 
 
    clear:both; 
 
    font-family:arial; 
 
    font-weight:bold; 
 
    font-size:20px; 
 
    border-radius:50px; 
 
    background-color:#ff33ff; 
 
    width:200px; 
 
    height:35px; 
 
    text-align:center; 
 
    padding-top:20px; 
 
    padding-bottom:10px; 
 
    cursor:pointer; 
 
} 
 

 
#addList { 
 
    border:1px solid #ff33f4; 
 
    float:right; 
 
    font-family:arial; 
 
    font-weight:bold; 
 
    font-size:20px; 
 
    border-radius:50px; 
 
    background-color:#ff33ff; 
 
    width:200px; 
 
    height:35px; 
 
    text-align:center; 
 
    padding-top:20px; 
 
    padding-bottom:10px; 
 
    cursor:pointer; 
 
} 
 

 
#main { 
 
    clear:both; 
 
    margin-top:120px; 
 
} 
 
</style> 
 
<script type="text/javascript"> 
 

 

 
function defaultColor() { 
 
    //var buttonClasss = this.getElementById(); 
 
    //document.getElementById("addList"); 
 
    this.style.backgroundColor = "#ffffff"; 
 
    this.style.color = "#000000"; 
 
    this.style.cursor = "pointer"; 
 
} 
 
    function changeColor(){ 
 
    this.style.backgroundColor="#000000"; 
 
    this.style.color="#ffffff"; 
 
    this.style.cursor = "pointer"; 
 
    } 
 
    function changeTitle(){ 
 
    } 
 
    function addListing(){ 
 
    } 
 
function OnL(){ 
 
//event listener for Change Title button 
 
document.getElementById("mainTitle").addEventListener("mouseover", changeColor); 
 
document.getElementById("mainTitle").addEventListener("mouseout", defaultColor); 
 
document.getElementById("mainTitle").addEventListener("click", changeTitle); 
 
//event listener for change title ends here 
 

 
//event listener for add listing 
 
document.getElementById("addList").addEventListener("mouseover", changeColor); 
 
document.getElementById("addList").addEventListener("mouseout", defaultColor); 
 
document.getElementById("addList").addEventListener("click", addListing); 
 
} 
 
</script> 
 
</head> 
 
<body onload="OnL()"> 
 

 
    <div id="mainTitle" class="changeTitle">Change Title</div> 
 
    <div id="addList" class="addList">Add List</div> 
 
</body> 
 
</html>

Quelle

2016-09-14 07:01:33 Owuor

danke. das hilft viel – jerz

Am meisten willkommen ... – Owuor

Jeder registrierte Ereignis Willen kommt mit dem Argument Event.

function defaultColor(e) { 
        //^argument (Event) 

    var currentClickedButton = e.currentTarget; // to get the current clicked button 
    /* Your code here */ 
}

Quelle

2016-09-14 06:35:51

Wie erkennt man, welche Schaltfläche in Javascript angeklickt wird?

Antwort

Verwandte Themen