开发者问题收集

Html javascript getattribute 不起作用

2018-05-16
739
javascript html

我被这个问题困扰了好一阵子，不知道哪里出了问题。 我的 getAttribute 总是返回未定义。 我试了很多次，我弄乱了值和类名，但它总是返回未定义。 请帮帮我 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="resources/css/Home.css" rel="stylesheet"/>
</head>
<body>

<div id="floatleft">
    <img class="ploegen.html"  onclick="GoTo(this)" onmouseleave="leave(this)" onmouseover="hover(this)" src="resources/ploegenhome.jpg">
    <img onclick="GoTo(x)" onmouseleave="leave(this)" onmouseover="hover(this)" src="resources/stadionhome.jpg">
    <img  onclick="GoTo(x)" onmouseleave="leave(this)" onmouseover="hover(this)" src="resources/opstellinghome.png">
    <img  onclick="GoTo(x)" onmouseleave="leave(this)" onmouseover="hover(this)" src="resources/simulatiehome.jpg">
</div>
<img src="resources/logo_wk_2018.png" id="logowk">
<div id="tekstjes">
    <ul>
        <li><a>Ploegen</a></li>
        <li><a>Stadions</a></li>
        <li><a>Opstelling</a></li>
        <li><a>Simulatie</a></li>
    <ul/>
</div>
<p id="lol"></p>
<script>
    function GoTo(x){
       var y = x.getAttribute(className);
        document.getElementById("lol").innerText = y;

    }
    function leave(x){
        x.style.opacity = 0.5;
    }
    function hover(x){

        x.style.opacity = 1;
        var y = x.getAttribute(className);
        document.getElementById("lol").innerText = y;
    }
</script>

</body>
</html>
1个回答

错误：

  • 代码的问题是代码中没有名为 ClassName 的变量。
  • 另一个错误是您在 onClick 函数中为 goTo 使用 x 而不是 this
  • 我在运行代码时发现的另一个小问题是，在 <ul> 标记的末尾，您使用 <ul/> 而不是 </ul> 来关闭标记。

修复： 

function GoTo(x){
   var y = x.getAttribute("class");
    document.getElementById("lol").innerText = y;

}
function leave(x){
    x.style.opacity = 0.5;
}
function hover(x){

    x.style.opacity = 1;
    var y = x.getAttribute('class');
    document.getElementById("lol").innerText = y;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="resources/css/Home.css" rel="stylesheet"/>
</head>
<body>

<div id="floatleft">
    <img class="ploegen.html"  onclick="GoTo(this)" onmouseleave="leave(this)" onmouseover="hover(this)" src="resources/ploegenhome.jpg">
    <img onclick="GoTo(this)" onmouseleave="leave(this)" onmouseover="hover(this)" src="resources/stadionhome.jpg">
    <img  onclick="GoTo(this)" onmouseleave="leave(this)" onmouseover="hover(this)" src="resources/opstellinghome.png">
    <img  onclick="GoTo(this)" onmouseleave="leave(this)" onmouseover="hover(this)" src="resources/simulatiehome.jpg">
</div>
<img src="resources/logo_wk_2018.png" id="logowk">
<div id="tekstjes">
    <ul>
        <li><a>Ploegen</a></li>
        <li><a>Stadions</a></li>
        <li><a>Opstelling</a></li>
        <li><a>Simulatie</a></li>
    </ul>
</div>
<p id="lol"></p>
</body>
</html>

感谢 @RogerC 发现代码中的一个错误，我以为我已经修复了 :)

Muhammad Salman
2018-05-16