2017-02-21 4 views
0

私は誕生日カードを作成していますので、フォームから誕生日カードページにデータを取り込む必要があります。最初のdiv(最初のdivはフォーム)から情報を転送する方法2番目の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を与えることが常に安全な方法です。これは、IDが固有であり、その属性にアクセスできるようにするためです。第2に、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を使ってかなり上のことをすることができます - しばしばずっと簡単です。

関連する問題