2017-02-21 77 views
0

我正在創建生日快樂卡,因此我需要將表單中的數據帶到生日卡片頁面,因此如何從第一個div(第一個div是表單)傳輸信息並顯示數據在第二個div中。顯示錶格中的數據

<!DOCTYPE html> 
<html> 
<body> 
<script> 
     function myfunction(){ 
       var divelement = document.getElementById(id); 

     if(divelement.style.display === 'none') 
      divelement.style.display = 'block'; 
     else 
      divelement.style.display = 'none'; 
      } 
     </script> 
    <div> 

<style> 

    form{ 
     text-align: center; 
     font-size: 20px; 
    } 
</style> 
    <div id="form" style="display:block;" > 
     <form name = "form" id = "form"> 
      First name:<br> <br> 
      <input type="text" name="firstname"> 
      <br><br> 
      Last name:<br><br> 
      <input type="text" name="lastname" ><br><br> 
      Message:<br><br> 
      <input type="text" name="message" > 
      <br><br> 
      <button onclick="myfunction('form')">Click me !!!!</button> 
     </form> 
    </div> 
    </div> 

    <div> 

<div class='card'> 
    <div class='front face'> 
     <img src= images/birthday.gif/> 
    </div> 
     <div class="back face"> 
      <img src= images/birthday1.gif/> 

    </div> 
    </div> 
</body> 

回答

1

因此,有相當多的事情你的代碼錯誤。首先,通常情況下,給予您希望操作ID的div總是安全的,因爲這確保了它們是唯一的,並且可以訪問它們的屬性。其次,您在onclick事件中針對myFunction的參數沒有做任何事情,因爲它定義的函數沒有任何參數,在這種情況下也不需要參數。基本上下面的代碼會產生一個輸出,但是你當然需要做相應的調整,以便將信息放在你想要的地方。

function myFunction() { 
    var fname = document.getElementById("firstname"); 
    var lname = document.getElementById("lastname"); 
    var message = document.getElementById("message"); 

    var output = fname + lname + message; 
    document.getElementById("NAME_OF_OUTPUT_DIV").innerHTML = output; 
}; 

再次確保所有輸入都有ID,您希望輸出到的div也是如此。乾杯。

P.S.你可以用jQuery來做更多的事情 - 通常也容易得多。