Ich möchte die Span-ID in JavaScript erhalten, wobei der folgende Code immer M26 zurückgibt, aber ich möchte unterschiedliche Werte bei unterschiedlichen Klicks auf M26 oder M27:

function clickHandler() {
    var xid= document.getElementsByTagName("span");
    var xsp= xid[0].id;   
    alert(xsp);     
} 
}

<html>
    <BODY LANGUAGE = "javascript" onClick = "clickHandler();">
        <a href="javascript:void(0)"><u><b><span id=M26>2011-  
        2012</span></b></u></a>   
        <div id=c26 STYLE="display:none">
            <a href="javascript:void(0)"><u><b><span id=M27>2012-  
            2013</span></b></u></a>   
        <div id=c27 STYLE="display:none"> 
    </body>
</html>
0
user1865365 30 Nov. 2012 im 15:52

3 Antworten

Beste Antwort

Das Problem, mit dem Sie konfrontiert sind, ist, dass var xid= document.getElementsByTagName("span"); alle Bereiche auf der Seite erhält, unabhängig davon, wo Sie klicken.

Um dieses Problem zu lösen, sollten Sie nur einen Verweis auf das angeklickte Objekt innerhalb der Funktion übergeben. Beispielsweise:

<span id=M26 onclick="clickHandler(this);" >2011-2012</span>

Dann in Ihrem Javascript-Code:

function clickHandler(object) {
    alert(object.id);
}

Es ist jedoch eine gute Idee, die Ereignisse in Javascript zu binden, anstatt sie in die HTML-Tags einzubinden.

Dieser Artikel beschreibt die verschiedenen Möglichkeiten in dem Sie Ereignisse an Elemente binden können.

3
Jon Taylor 30 Nov. 2012 im 12:07

Es gibt verschiedene Möglichkeiten, die ID des Elements abzurufen, auf das gerade geklickt wurde:

Übergeben Sie dem Handler einen Verweis auf this:

onclick="handlerFunc(this);">

Oder, noch besser, übergeben Sie das Ereignisobjekt an den Handler. Auf diese Weise können Sie auch das Verhalten des Ereignisses ändern:

onclick='handlerFunc(event);'>
//in JS:
function handlerFunc(e)
{
    e = e || window.event;
    var element = e.target || e.srcElement;
    element.id;//<-- the target/source of the event (ie the element that was clicked)
    if (e.preventDefault)
    {//a couple of methods to manipulate the event
        e.preventDefault();
        e.stopPropagation();
    }
    e.returnValue = false;
    e.cancelBubble = true;
}
0
Elias Van Ootegem 30 Nov. 2012 im 12:14

Sie können hierfür die Funktion getAttribute () verwenden ...

function clickHandler() {
var xid= document.getElementsByTagName("span");
var xsp= xid[0].getAttribute('id');   
alert(xsp);     
} 


<html>
<body LANGUAGE = "javascript" onload = "clickHandler();">
    <a href="javascript:void(0)"><u><b><span id=M26>2011-  
    2012</span></b></u></a>   
    <div id=c26 STYLE="display:none">
        <a href="javascript:void(0)"><u><b><span id=M27>2012-  
        2013</span></b></u></a>   
    <div id=c27 STYLE="display:none"> 
</body>
</html>

Siehe Arbeitsdemo

-1
Dineshkani 30 Nov. 2012 im 12:10