1

I'm stuck on this for a while now and i don't know whats wrong. My getAttribute is always returning undefined.. I've tried a lot ,i messed with value and classnames but it always returns undefined. please help someone

<!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>
Improve this question
2
  • 2
    You are passing in className variable to your getAttribute which is undefined...What class name do you want to get? Commented May 16, 2018 at 13:27
  • 1
    also, if className is not a variable, you should use "className", with quotes Commented May 16, 2018 at 13:29

1 Answer 1

Reset to default
4

Error :

  • The problem with your code is that there is no variable called ClassName in your code.
  • Another thing that was wrong was that you were using x in your onClick function for goTo instead of this
  • Another slight problem that I found when running the code was that in the end of your <ul> tag you used <ul/> instead of </ul> to close the tag.

Fix :

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>

Thanks to @RogerC for who spotted a mistake in the code that I thought I had fixed :)

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.