CODEWITHSUNDEEP
javascripthtmlcss
user1327904
user1327904

Reputation:

Why won't my buttons hide? (JavaScript Functions/CSS Visibility)

I don't really get this. I tried to hide the three buttons with CSS in my JavaScript example, but nothing happened at all! Why won't li.two and li.three hide? I want to make it so that li.two and li.three aren't visible until their button is clicked. (Yahoo is only visible when Google is clicked, Facebook is only visible when Yahoo is clicked) Here's the code:

<html>
<head>
<script type="text/javascript">
function show_prompt()
{
var name=prompt("Your Name");
if (name!=null && name!="")
  {
  alert("Thanks for clicking " + name + "!");
  window.open("http://www.google.com/};
}
</script>
<script type="text/javascript">
function show_alert()
{
alert("Thanks for clicking me!");
window.open("http://www.yahoo.com/");
}
</script>
<script type="text/javascript">
function show_alert1()
{
alert("Have fun on Facebook!");
window.open("http://www.facebook.com/");
}
</script>
<script type="css/text">
li.two, li.three {display:none};
</script>
</head>
<body>
<ul>
<li class="one"><input type="button" onclick="show_prompt();showNext('Yahoo')" value="Google" />
<li class="two"><input type="button" id="Yahoo" onclick="show_alert();showNext('Facebook')" value="Yahoo" />
<li class="three"><input type="button" id="Facebook" onclick="show_alert1()"value="Facebook" />
</ul>
</body>
</html>

Upvotes: 0

Views: 497

Answers (3)

srini
srini

Reputation: 884

you are not closed li tag ,your showNext() function call only , didn't write that function

try this 

        <html>
        <head>
        <style type="text/css">
        .two,.three{
        display:none;
        }
        </style>


        <script type="text/javascript">
        function show_prompt()
        {
        var name=prompt("Your Name");
        if (name!=null && name!="")
          {
          alert("Thanks for clicking " + name + "!");
          window.open("http://www.google.com/")

          };
        }
        </script>
        <script type="text/javascript">
        function showNext(value){

        document.getElementById(value).style.display="block";





        }
        </script>
        <script type="text/javascript">
        function show_alert()
        {
        alert("Thanks for clicking me!");
        window.open("http://www.yahoo.com/");
        }
        </script>
        <script type="text/javascript">
        function show_alert1()
        {
        alert("Have fun on Facebook!");
        window.open("http://www.facebook.com/");
        }
        </script>

        </head>
        <body>
        <ul>
        <li class="one"><input type="button" onclick="show_prompt();showNext('Yahoo')" value="Google" /></li>
        <li class="two" id="Yahoo" ><input type="button" id="Yahoo" onclick="show_alert();showNext('Facebook')" value="Yahoo" /></li>
        <li class="three" id="Facebook"><input type="button" id="Facebook" onclick="show_alert1()"value="Facebook" /></li>
        </ul>
        </body>
        </html>

Upvotes: 0

ali
ali

Reputation: 987

You need to use this

<li class="one"><input type="button" onclick="show_prompt();showNext('Yahoo')" value="Google" />
<li class="two"><input type="hidden" type="button" id="Yahoo" onclick="show_alert();showNext('Facebook')" value="Yahoo" />
<li class="three"><input type="hidden" type="button" id="Facebook" onclick="show_alert1()"value="Facebook" />

Upvotes: 1

rickyduck
rickyduck

Reputation: 4084

You have no closing tags on the <li>

<li class="one"><input type="button" onclick="show_prompt();showNext('Yahoo')" value="Google" /></li>
<li class="two"><input type="button" id="Yahoo" onclick="show_alert();showNext('Facebook')" value="Yahoo" /></li>
<li class="three"><input type="button" id="Facebook" onclick="show_alert1()"value="Facebook" /></li>

Your CSS is wrong, ; is outside the {}

li.two, li.three {display:none;}

And your css is in a <script> tag, needs to be inside:

<style type="text/css">li.two, li.three {display:none;}</style>

Upvotes: 2

Related Questions