Erstellte Elemente werden nicht angezeigt

Also im Grunde, was ich versuche zu tun ist, wenn ich ein Formular ausfülle. Alle Informationen werden in einem neu erstellten div angezeigt, nachdem ich auf eine Senden-Schaltfläche geklickt habe. Das Problem, das ich habe, ist, dass wenn ich den Absenden-Knopf drücke. Ein Div wird überhaupt nicht angezeigt. Weiß jemand, wie ich das erreichen kann?Erstellte Elemente werden nicht angezeigt

Javascript

$(document).ready(function() { 

    $('#submit').click(function() { 
     //Form Disappears after Submission 
     var form = document.getElementById("form"); 
     var formBackground = document.getElementById("form-background"); 
     if (form.style.display == "block" || form.style.display == "") { 
       form.style.display = "none"; 
       formBackground.style.display = "none"; 
      } 

     //Creates New Div After Submission 
     var titleInput = document.getElementById("titleInput").value; 
     var descInput = document.getElementById("descInput").value; 
     var structure = $('<div class="note"><div class="note-content"><div class="imagecontainer"><img src="./images/jose.jpg"/></div><div class="description"><h3>Title:</h3>' + titleInput + '<p>Description:</p>' + descInput + '</div></div></div>'); 
     $('#container').append(structure); 
     return false; 


    }); 
});

Html

<!DOCTYPE html> 

<html> 

    <head> 
     <meta charset="UTF-8"> 
     <title>Personal Note Taker</title> 
     <!--Button Icons--> 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> 
     <!--Index Styling--> 
     <link rel ="stylesheet" href="./css/styling.css"/> 
    </head> 

    <body> 

     <div id="header"> 
      <h1>Personal Note Taker</h1> 
     </div> 

     <div id="containter"></div> 
     <!--How the Note should look like 
     <div class="note"> 
      <div class="note-content"> 
       <a href="./quote1.html"> 
       <div class="imagecontainer"> 
        <img src="./images/jose.jpg"/> 
       </div> 

       <div class="description"> 
        <h3>Quote 1</h3> 
        <p>Every action that you commit, will develop who you are. </p> 
       </div> 
       </a> 
      </div> 
     </div> 
     --> 

     <!--Add Note Button--> 
     <div id="addNoteButton"> 
      <i class="fa fa-plus" aria-hidden="true"></i> 
     <div> 

     <!--Form Background--> 
     <div id="form-background"> 
     </div> 

     <!--Form Field--> 
     <div id="form"> 
      <div id="cancel-button-div"> 
       <button id="cancel-button">X</button> 
      </div> 

      <h2 id="form-title">Add a Note</h2> 

      <!--Title and Description Questions--> 
      <form> 
       <br> 
       <input placeholder="Title" type="text" id="titleInput"> 
       <br><br> 
       <textarea placeholder="Description" type="text" id="descInput" rows="5" cols="30"> 
       </textarea> 
       <br><br><br><br> 
       <button id="submit">Submit</button> 
      </form> 
     </div> 

     <!--Index Javascript--> 
     <script 
      src="https://code.jquery.com/jquery-3.1.1.js" 
      integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA=" 
      crossorigin="anonymous"></script> 
     <script src="./js/index_script.js"></script> 

    </body> 

</html>

Quelle

2017-02-24 nipkip

Wenn Sie jQuery verwenden möchten, verwenden Sie * jQuery. Z.B. '$ (" descInput "). val()' anstelle von 'document.getElementById (" descInput "). value;' – j08691

'$ ('# container')' wird nicht funktionieren. Ich sehe 'id = "container" 'in Ihrem html nicht, aber ich sehe' id = "container" ', typo? – Jack

Hoppla, Danke Jack lol – nipkip

Änderung

id="containter"

id="container": D

Quelle

2017-02-24 03:50:21

Erstellte Elemente werden nicht angezeigt

Antwort

Verwandte Themen