I want to tweak this simple html javascript page of mine

StackOverflow https://stackoverflow.com/questions/22161090

  •  19-10-2022
  •  | 
  •  

Question

My aim in this simple html file is to load a block of div that affiliates to someone who would like to log in. My div "loginProper" is that div I'm talking about. I've put an onClick function on my other divs which contains the name of the people who can login. My problem is nothing happens when I click those divs.

Here is the code, can you please check what is missing?

<!doctype html>
<html>

<head>
    <title>Project Design Exhibit</title>
    <script type="text/javascript">
    function showLogin(loginType){
        if (loginType=="a"){
            document.getElementById("loginProper").innerHTML = "Administrator Login";
        }else if (loginType="s"){
            document.getElementById("loginProper").innerHTML = "Student Login";
        }else if (loginType="g"){
            document.getElementById("loginProper").innerHTML = "Special Guest Login";
        }
    }
</script>
</head>

<body>
<div style="margin:0 auto; width:1000px; border:1px solid black;">
    <div style="width:1000px; height:50px; border:1px solid black;">
        <div style="display:inline; border:1px solid black;" onClick="showLogin(a)">Admin</div>
        <div style="display:inline; border:1px solid black;" onClick="showLogin(s)">Student</div>
        <div style="display:inline; border:1px solid black;" onClick="showLogin(g)">Special Guest</div> 
    </div>
    <div id="loginProper" style="margin:0 auto; width:500px; height:700px;"></div>
</div>
</body>

</html>

No correct solution

OTHER TIPS

Try this:

  1. you're missing quotes when passing 'a', 's', and 'g' to your function
  2. your javascript function is not using == when comparing

  3. I also made it so your cursor turns into a 'hand' when hovering over your div ;-)

    <head>
    <title>Project Design Exhibit</title>
    <script type="text/javascript">
        function showLogin(loginType)
        {
            alert(loginType);
            if (loginType == "a")
            {
                document.getElementById("loginProper").innerHTML = "Administrator Login";
            } else if (loginType == "s")
            {
                document.getElementById("loginProper").innerHTML = "Student Login";
            } else if (loginType == "g")
            {
                document.getElementById("loginProper").innerHTML = "Special Guest Login";
            }
        }
    </script>
</head>

<body>
    <div style="margin:0 auto; width:1000px; border:1px solid black;">
        <div style="width:1000px; height:50px; border:1px solid black;">
            <div style="display:inline; border:1px solid black;cursor: pointer" onclick="showLogin('a')">Admin</div>
            <div style="display:inline; border:1px solid black;cursor: pointer" onclick="showLogin('s')">Student</div>
            <div style="display:inline; border:1px solid black;cursor: pointer" onclick="showLogin('g')">Special Guest</div>
        </div>
        <div id="loginProper" style="margin:0 auto; width:500px; height:700px;"></div>
    </div>
</body>

</html>

It'd be

onClick="showLogin('a')";

and

loginType=="g"

not 

loginType="g"

Working Fiddle

That's because showLogin function is expecting a literal/string variable...

function showLogin(loginType){
    if (loginType=="a") //<----THIS IS A STRING

Yet, you are passing in an object that doesn't exist...

onClick="showLogin(a)"

a is an object that can't be resolved. You should change the onclick handler to...

onClick="showLogin('a')"
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top