CSS button not working (was: JS works in Fiddle but not in website)

Hi, I pieced together some code which adds a div or delites a div when you press a button. I combined it into one file and it worked in a fiddle but not in notepad++ or in the custom code section of weebly. Also I can’t seem to make button css work. Please help!

<!DOCTYPE html>
<html>

  <head>
    <style>
      div.main {
        color: #3f3f3f;
      }
      
      input[type=text],
      select {
        width: 200px;
        padding: 5px;
        margin: 8px 0;
        display: inline-block;
        border: 1px solid #ccc;
        border-radius: 4px;
        box-sizing: border-box;
      }
      
      input[type=button] {
        width: 100%;
        background-color: #2076d8;
        color: white;
        padding: 14px 20px;
        margin: 8px 0;
        border: none;
        border-radius: 4px;
        cursor: pointer;
      }
      
      input[type=button]:hover {
        background-color: #11519b
      }
      
      .multi-field {
        background-color: #ffffff;
        /* Green */
        border-style: solid;
        border-width: 5px;
        border-color: #3a96b8;
        color: black;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
        padding-top: 50px;
        padding-right: 30px;
        padding-bottom: 50px;
        padding-left: 80px;
      }
      
      div.main {
        background-color: #ffffff;
      }
	  

    </style>

  </head>

  <body>


    <form role="form" action="/wohoo" method="POST">
      <label>Team Information:</label>
      <div class="multi-field-wrapper">
        <div class="multi-fields">
          <div class="multi-field">
            Team #
            <input type="text" name="team number">
            <br> Auton Skills Points
            <input type="text" name="auton skills">
            <br> Driver Skills Points
            <input type="text" name="driver skills">
            <br> Total Skills Points
            <input type="text" name="total skills">
            <br> Average Auton Points
            <input type="text" name="average auton">
            <br>

            <button type="button" class="remove-field">Remove</button>
          </div>
        </div>
        <button type="button" class="add-field">Add Team</button>
      </div>

      <script type="text/javascript">
        $('.multi-field-wrapper').each(function() {
          var $wrapper = $('.multi-fields', this);
          $(".add-field", $(this)).click(function(e) {
            $('.multi-field:first-child', $wrapper).clone(true).appendTo($wrapper).find('input').val('').focus();
          });
          $('.multi-field .remove-field', $wrapper).click(function() {
            if ($('.multi-field', $wrapper).length > 1)
              $(this).parent('.multi-field').remove();
          });
        });

      </script>
  </body>

</html>

Hey.

It looks like you’re not loading in jQuery (where you are in the fiddle).

This is the fiddle http://jsfiddle.net/hMJEy/2269/

Go back to what was said in post #2

How would I fix that?

Do I put this into my code?
src=“https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js

Yes you do, as a script tag before your code.

After your last </div> tag, and before the current <script> tag, put another <script> element containing the code you posted. That is —

</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

Thanks, now it works. I still can’t get the button css to work though.:grinning:

We’ve got your back. here you go CSS guys - catch! :slight_smile:

Not sure of the exact code you are using now but in your original you are addressing an input[type=button] but you don’t have one.

input[type=button] {}

You have a button element so to target the button use this:

button[type=button] {}

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.