創建的元素不顯示

所以基本上我想要做的是當我填寫表單。我點擊一個提交按鈕後，所有的信息都顯示在一個新創建的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

創建的元素不顯示

回答

相關問題