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

Question

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>

Why do you have each of the functions in its own <script> block? Just curious. — Mr Lister
– Mr Lister, Commented Apr 12, 2012 at 13:14

rickyduck · Accepted Answer · 2012-04-12 12:17:17Z

2

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>

answered Apr 12, 2012 at 12:17

rickyduck

4,08414 gold badges62 silver badges95 bronze badges

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

6 Comments

user1327904 Over a year ago

It still doesn't seem to hide the other two buttons.

user1327904 Over a year ago

Oh wait I see the problem. Never mind- You were right. Thanks :D

user1327904 Over a year ago

I changed script to style and nothing happened again :-(

user1327904 Over a year ago

Wait no it worked. Sorry about all the... changes. In the end, you were right. Thanks!

loddn Over a year ago

|

ali · Accepted Answer · 2012-04-12 12:58:02Z

1

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" />

edited Apr 12, 2012 at 12:58

answered Apr 12, 2012 at 12:39

ali

9871 gold badge6 silver badges8 bronze badges

Comments

srini · Accepted Answer · 2012-04-12 13:36:14Z

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>

Collectives™ on Stack Overflow

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

3 Answers 3

6 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related