CODEWITHSUNDEEP
jqueryhtml
RuuddR
RuuddR

Reputation: 941

How can I put this in an external javascript file

I am trying to create a button that makes a div appear in front of the page when clicked an anchor in the menu bar. The problem is that I have the javascript in the html file and I would like to have it in an external file, so I can reuse it in different pages, as this form has to appear on every page when you click on the anchor.

input[type=text], input[type=password] {
    width: 100%;

    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    box-sizing: border-box;
}

.close {
    position: absolute;
    right: 35px;
    top: 15px;
    color: #000;
    font-size: 40px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: red;
    cursor: pointer;
}

.clearfix::after {
    content: "";
    clear: both;
    display: table;
}

.modal {
    display: none;
    position: fixed;
    z-index: 1;
    padding-top: 60px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.5);
}

.modal-content {
    background-color: #fefefe;
    margin: 5% auto 15% auto;
    border: 1px solid #888;
    width: 80%;
}
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>

  <title>Near-reality craft</title>

  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <meta name="description" content="" />
  <meta name="keywords" content="" />
  <script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>

</head>

<body>

  <div id="hormenu">
    <a href="#" class="hormenu_item">Home</a>
    <a href="#" class="hormenu_item" id="registerButton">Registeren</a>
    <a href="#" class="hormenu_item">features</a>
    <a href="#" class="hormenu_item">Contact</a>

  </div>

  <!-- Het veld (Het registratieveld) -->
  <div id="registerModal" class="modal">
    <span onclick="document.getElementById('registerModal').style.display='none'" class="close" title="Close Modal">&times;</span>
    <form class="modal-content animate" action="/action_page.php">
      <div class="container">
        <label><b>Email</b></label>
        <input type="text" placeholder="Enter Email" name="email" required>

        <label><b>Password</b></label>
        <input type="password" placeholder="Enter Password" name="psw" required>

        <label><b>Repeat Password</b></label>
        <input type="password" placeholder="Repeat Password" name="psw-repeat" required>
        <input type="checkbox" checked="checked"> Remember me
        <p>By creating an account you agree to our <a href="#">Terms & Privacy</a>.</p>

        <div class="clearfix">
          <button type="button" onclick="document.getElementById('registerModal').style.display='none'" class="cancelbtn">Cancel</button>
          <button type="submit" class="signupbtn">Sign Up</button>
        </div>
      </div>
    </form>

  </div>

  <script>
    $("#registerButton").click(function() {
      $("#registerModal").toggle();
    })
  </script>
  
  <div id="informatie">
    <h1>Welkom!</h1>
    <p>test</p>
  </div>


  </div>

</body>

</html>

Could you please help me with this?

Upvotes: 1

Views: 89

Answers (3)

Death-is-the-real-truth
Death-is-the-real-truth

Reputation: 72269

Just copy-paste the script code into external js file.

But wrap the code inside $(document).ready(function(){..}); like below:-

$(document).ready(function(){
  $("#registerButton").click(function() {
     $("#registerModal").toggle();
  });
});

Now in your html file just add this file like below:-

<script type="text/javascript" src="your external js file path"></script>

You can call it in <head> section or at the bottom of the page.

Note:- Make sure that jQuery library added before this external js file. Otherwise you will get

$ not defined error

Upvotes: 2

r3dst0rm
r3dst0rm

Reputation: 1926

Create a script file and name it somehow.

Save this file somewhere - I'd recommend inside a "script" folder. Then you can include it in your HTML like that:

<script src="/Path/To/Script/script.js"></script>

Where the content is as follows:

function toggleItem(item){
  $(item).toggle();
};

And your HTML you change to something like this:

<button onclick="toggleItem('#IdOfDiv'); return false;">Hide given div</button>

Upvotes: 1

Atk
Atk

Reputation: 149

requirejs

RequireJS is a JavaScript file and module loader. It is optimised for in-browser use, but it can be used in other JavaScript environments, like Rhino and Node. Using a modular script loader like RequireJS will improve the speed and quality of your code.

May this help?

Upvotes: 0

Related Questions