CODEWITHSUNDEEP
javascriptjqueryhtmlbuttonclick
arm32x
arm32x

Reputation: 147

My buttons won't call jQuery .click() function

Code

<!doctype html>
<html>
  <head>
    <meta charset = "utf-8"/>
    <title>Icons</title>
    <script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src = "https://documentcloud.github.com/underscore/underscore-min.js"></script>
    <style>

      label {
        font-size: 15px;
        font-family: sans-serif;
        position: fixed;
        left: 50px;
        padding-top: 8px;
      }

    </style>
    <script>

      $(document).ready(function(){

        $("#editor").hide();

        var files = [];
        var docFileEXTs = ["docx", "txt", "doc", "docm", "dot", "dotx", "dotm"];

        $("#newFolder").click(function(){

          var folderName = prompt("Folder Name:");

          if (folderName === null) {



          } else if (folderName === "") {

            alert("Folder name can't be empty!");

          } else if (_.contains(files, folderName)) {

            alert("That folder name is already taken.");

          } else {

            $("body").append('<label>' + folderName + '</label>');
            $("body").append('<img class = "folder" src = "http://www.iconarchive.com/icons/hopstarter/sleek-xp-basic/32/Folder-icon.png"/>');
            $("body").append('<br/>');
            files.add(folderName);

          };

        });

        $("#newFile").click(function(){

          var fileName = prompt("File Name:");
          var icon;

          if ($.inArray(fileName.split(".", 2)[1], docFileEXTs) !== -1) {

            icon = "http://www.iconarchive.com/icons/hopstarter/sleek-xp-basic/32/Document-icon.png";

          } else {

            icon = "http://www.iconarchive.com/icons/hopstarter/sleek-xp-basic/32/Document-Blank-icon.png");

          };

          if (fileName === null) {



          } else if (fileName === "") {

            alert("File name can't be empty!");

          } else if (_.contains(files, fileName) {

            alert("That file name is already taken.");

          } else {

            $("body").append('<label class = "file" index = "' + files.length + '">' + fileName + '</label>');
            $("body").append('<img class = "file" src = "' + icon + '"/>');
            $("body").append('<br/>');
            files.add(fileName);

          };

        });

      });

    </script>
  </head>
  <body>
    <input type = "submit" value = "New Folder" id = "newFolder"/>
    <input type = "submit" value = "New File" id = "newFile"/>
    <hr/>
  </body>
</html>

Details

My buttons won't respond to my jQuery .click() function. What's supposed to happen is the button is clicked, a window pops up, and then validates if that name is available. If it's available, then it places an icon and a label on the screen. But now it just does nothing.

JSFiddle: http://jsfiddle.net/5xQ3a/

Note: In JSFiddle, I had to take off the <!doctype html> and put the JavaScript and CSS in the seperate tabs.

Completed now!

Upvotes: 0

Views: 237

Answers (1)

JBB
JBB

Reputation: 667

You have a rogue bracket on this line:

icon = "http://www.iconarchive.com/icons/hopstarter/sleek-xp-basic/32/Document-Blank-icon.png");

should be:

icon = "http://www.iconarchive.com/icons/hopstarter/sleek-xp-basic/32/Document-Blank-icon.png";

and you have a missing bracket on this line:

} else if (_.contains(files, fileName) {

should be:

} else if (_.contains(files, fileName)) {

Using the "JSHint" button on your fiddle reveals both these errors by the way :-)

Upvotes: 2

Related Questions