CODEWITHSUNDEEP
javascripthtmlcss
Karl
Karl

Reputation: 111

javascript ok exit button

I am pretty new to web programming, but still trying to develop a website. I am using HTML and JavaScript to get things done, but I got really stuck. Looking at some examples online, I was able to create an OK/Cancel button. Now I am attempting to create the same type of button using CSS because I don't want to write the same piece of code in every single page. Is it possible to use CSS for this purpose? If so, could someone please show me how to do it?

This is the code I have for the buttons, which, by the way, works just fine:

<html>
   <body>
     <script type="text/javascript">
        if (confirm("Press 'OK' to leave the Eternity Test, or 'Cancel' if you want to stay: "))
        {         
           window.location="http://google.com";
        }
        else
        {         
           window.location= "http://www.myWebPage.com";
        }
      </script>
   </body>
</html>

Thank you.

Upvotes: 3

Views: 5703

Answers (6)

Rian Schmits
Rian Schmits

Reputation: 3206

As far as I know you can't do this with css, but you don't need it. You don't have to write the same code on every page using javascript either. You can include an external javascript file in your page like so: 

<script type="text/javascript" src="external.js"></script>

Even though you say you don't have much experience you have already discovered the DRY (don't repeat yourself) principle by yourself.

Upvotes: 2

Marco
Marco

Reputation: 1346

Create a script called "exit.js" with the code between the tags, then just refer to that script using <script type="text/javascript" src="/exit.js"> </script> in all your pages.

Upvotes: 1

The Muffin Man
The Muffin Man

Reputation: 20004

You can't make the browser do an alert/confirm with CSS.

A tip: If you only have one line of code for the if/else block you don't need the {}

    <html>
   <body>
     <script type="text/javascript">
        if (confirm("Press 'OK' to leave the Eternity Test, or 'Cancel' if you want to stay: "))       
           window.location="http://google.com";
        else     
           window.location= "http://www.myWebPage.com";
      </script>
   </body>
</html>

Upvotes: 0

TNC
TNC

Reputation: 5386

You can create a button-styling via css that can be used on multiple pages, that reference that css document. Similarly, you can also place your javascript in an external document and reference that code on multiple pages.

Upvotes: 1

Jeremy Massel
Jeremy Massel

Reputation: 2267

This can't be done using CSS, but you could put the javascript in an external file (say, confirm.js) then put it at the bottom of every page like so:


<html>
   <body>
     <script type="text/javascript" src="confirm.js"> </script>
   </body>
</html>

Your confirm.js would look like: 




if (confirm("Press 'OK' to leave the Eternity Test, or 'Cancel' if you want to stay: "))
{

     window.location="http://google.com";
}
else
{

     window.location= "http://www.myWebPage.com";
}

Upvotes: 1

Prisoner
Prisoner

Reputation: 27628

I think you're getting a bit confused to be honest with you, to do this in CSS would be much harder (would involve using a div to hide/show with the options to exit or stay). The simpler way is:

You can create a function in javascript such as:

function closeWindow(){
   if (confirm("Press 'OK' to leave the Eternity Test, or 'Cancel' if you want to stay: "))
   {         
      window.location="http://google.com";
   }
      else
   {         
      window.location= "http://www.myWebPage.com";
   }
}

and then place this into a .js file, you can then include this file on any page using this and call it on any page you wish, like:

<a href="javasctipt:closeWindow();">Close Window</a>

Upvotes: 1

Related Questions