获取JavaScript中跨度的id。_Javascript_Html

获取JavaScript中跨度的id。

javascript html

获取JavaScript中跨度的id。,javascript,html,Javascript,Html,我希望在JavaScript中获得span id，以下代码始终返回M26，但我希望在不同的单击M26或M27时获得不同的值： function clickHandler() { var xid= document.getElementsByTagName("span"); var xsp= xid[0].id; alert(xsp); } } <html> <BODY LANGUAGE = "javascript" onCli

我希望在JavaScript中获得span id，以下代码始终返回M26，但我希望在不同的单击M26或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>

函数clickHandler（）{
var xid=document.getElementsByTagName（“span”）；
var xsp=xid[0].id；
警报（xsp）；
} 
}
您面临的问题是var xid=document.getElementsByTagName（“span”）获取页面上的所有跨距，无论单击何处
要解决此问题，只需在函数中传递对单击对象的引用。例如：
<span id=M26 onclick="clickHandler(this);" >2011-2012</span>

不过，最好将事件绑定到javascript中，而不是内嵌到html标记中
这描述了将事件绑定到元素的不同方式。
您可以使用getAttribute（）函数来实现此
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>

函数clickHandler（）{
var xid=document.getElementsByTagName（“span”）；
var xsp=xid[0]。getAttribute（'id'）；
警报（xsp）；
} 

有几种方法可以获取刚刚单击的元素的id：
将对该
的引用传递给处理程序：
onclick="handlerFunc(this);">

或者，更好的方法是将事件对象传递给处理程序，这也允许您操纵事件的行为：
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;
}

onclick='handlerFunc（事件）；'>
//在JS中：
函数handlerFunc（e）
{
e=e | | window.event；
var元素=e.target | | e.src元素；
element.id；//在问题中使用代码之前，请先修复代码：在clickHandler
函数之后，右括号（}
）过多，并且您没有关闭div
。另外，语言=“javascript
无效。仍然有太多的}
字符…@danwellman:我不是故意把他的错误删掉的。当然，我的评论是针对OP的，因为他在你的评论后编辑了帖子，但这个问题仍然存在……通常，我会否决内联事件侦听器，但考虑到OP中的代码，最好保持简单，对吗？我更喜欢onclick=“clickHandler.call（this）”
在你的函数alert（this.id）@Cerbrus中，如果你读了最后一句话，它清楚地表明用javascript绑定而不是内联是个好主意。然而，在这样的示例中，用内联处理程序进行说明通常更容易。但是，如果我已经用body调用了方法，我不想用每个span调用方法tag@JonTaylor是的，我看到了。就我个人而言，我建议添加一个示例，说明应该如何进行。如果10个跨度使用相同的事件处理程序会怎么样？另外：为什么每次单击都要扫描DOM？那真是太过分了
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;
}