CODEWITHSUNDEEP
jqueryhtmlcss
James
James

Reputation: 133

JQuery - button not created

Following a tutorial - the class js is being added to html - but for some reason the button is not being created. I've made multiple attempts, tried rewriting the code a thousand times, looked for any small spelling mistakes but nothing. It's directly taken from the tutorial so I don't see what's going wrong.

<!doctype html>
<html>
<head>
  <meta charset=utf-8>
  <title>fww</title>
  <style>
    body {
      width: 600px;
      margin: auto;
      font-family: sans-serif;
    }
    
    #contact {
      background: #e3e3e3;
      padding: 1em 2em;
      position: relative;
    }
    
    .js #contact {
      position: absolute;
      top: 0;
      width: inherit;
      display: none;
    }
    
    #contact h2 {
      margin-top: 0;
    }
    
    #contact ul {
      padding: 0;
    }
    
    #contact li {
      list-style: none;
      margin-bottom: 1em;
    }
    /* Close button on form */
    
    .close {
      position: absolute;
      right: 10px;
      top: 10px;
      font-weight: bold;
      font-family: sans-serif;
      cursor: pointer;
    }
    /* Form inputs */
    
    input,
    textarea {
      width: 100%;
      line-height: 2em;
    }
    
    input[type=submit] {
      width: auto;
    }
    
    label {
      display: block;
      text-align: left;
    }
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script>
    (function() {
      $('html').addClass('js');

      var contactForm = {
        init: function() {
          $('<button><button>', {
              text: 'contact us'
            })
            .insertAfter('article:first');
        }

      };
      contactForm.init();

    })();
  </script>
</head>
<body>
  <article>
    <h1>My Awesome Post</h1>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. sed do eiusmod tempor incididunt ut labore et dolore magna
      aliqua. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. sed do eiusmod tempor incididunt ut labore et dolore magna
      aliqua. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </p>
  </article>
  <div id="contact">
    <h2>Contact Me</h2>
    <form action="#">
      <ul>
        <li>
          <label for="name">Name: </label>
          <input name="name" id="name">
        </li>
        <li>
          <label for="email">Email Address: </label>
          <input name="email" id="email">
        </li>
        <li>
          <label for="comments">What's Up?</label>
          <textarea name="comments" id="comments" cols="30" rows="10"></textarea>
        </li>
        <li>
          <input type="submit" value="Submit">
        </li>
      </ul>
    </form>
  </div>
</body>
</html>

Upvotes: 1

Views: 30

Answers (1)

Rory McCrossan
Rory McCrossan

Reputation: 337637

The issue is because you're using an Immediately Invoke Function Expression (IIFE) to wrap your jQuery code. This means your JS code is running too early in the page lifecycle.

Instead you need to use a document.ready event handler to ensure that the DOM is loaded before you attempt to access it.

Also note that your syntax for creating the button in jQuery is a little off. Try this:

$(function() {
  $('html').addClass('js');

  var contactForm = {
    init: function() {
      $('<button />').text('contact us').insertAfter('article:first');
    }
  };

  contactForm.init();
});

Full working snippet:

<!doctype html>
<html>

<head>
  <meta charset=utf-8>
  <title>fww</title>
  <style>
    body {
      width: 600px;
      margin: auto;
      font-family: sans-serif;
    }
    
    #contact {
      background: #e3e3e3;
      padding: 1em 2em;
      position: relative;
    }
    
    .js #contact {
      position: absolute;
      top: 0;
      width: inherit;
      display: none;
    }
    
    #contact h2 {
      margin-top: 0;
    }
    
    #contact ul {
      padding: 0;
    }
    
    #contact li {
      list-style: none;
      margin-bottom: 1em;
    }
    /* Close button on form */
    
    .close {
      position: absolute;
      right: 10px;
      top: 10px;
      font-weight: bold;
      font-family: sans-serif;
      cursor: pointer;
    }
    /* Form inputs */
    
    input,
    textarea {
      width: 100%;
      line-height: 2em;
    }
    
    input[type=submit] {
      width: auto;
    }
    
    label {
      display: block;
      text-align: left;
    }
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script>
    $(function() {
      $('html').addClass('js');

      var contactForm = {
        init: function() {
          $('<button />').text('contact us').insertAfter('article:first');
        }
      };

      contactForm.init();
    });
  </script>
</head>

<body>
  <article>
    <h1>My Awesome Post</h1>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. sed do eiusmod tempor incididunt ut labore et dolore magna
      aliqua. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. sed do eiusmod tempor incididunt ut labore et dolore magna
      aliqua. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </p>
  </article>
  <div id="contact">
    <h2>Contact Me</h2>
    <form action="#">
      <ul>
        <li>
          <label for="name">Name: </label>
          <input name="name" id="name">
        </li>
        <li>
          <label for="email">Email Address: </label>
          <input name="email" id="email">
        </li>
        <li>
          <label for="comments">What's Up?</label>
          <textarea name="comments" id="comments" cols="30" rows="10"></textarea>
        </li>
        <li>
          <input type="submit" value="Submit">
        </li>
      </ul>
    </form>
  </div>
</body>

</html>

Upvotes: 5

Related Questions