创建的元素不显示

所以基本上我想要做的是当我填写表单。我点击一个提交按钮后，所有的信息都显示在一个新创建的div中。我遇到的问题是，当我按下提交按钮时。一个div完全不显示。有谁知道我能做到这一点？创建的元素不显示

的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>

来源

2017-02-24 nipkip

如果你打算使用jQuery，那么*使用* jQuery。例如。 $（“descInput”）.val（）'而不是'document.getElementById（“descInput”）。value;' – j08691

'$（'＃container'）'不起作用。我没有在你的html中看到'id =“container”'，但是我确实看到'id =“containter”'，错字？ – Jack

哎呀，谢谢杰克大声笑 – nipkip

变化

id="containter"

到

id="container"： D

来源

2017-02-24 03:50:21

创建的元素不显示

回答

相关问题