2017-02-28 25 views
0

我有一個html頁面分成多個部分我試圖從一個div標籤獲取輸入並試圖在另一個div標籤中顯示該怎麼做我們使用JavaScript訪問該值,並可以在另一個分區標籤中顯示。使用JavaScript調用上一個輸入值,在另一個div標籤中顯示該值

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
    <title>Untitled Document</title> 


    ----css--- 
    <style type='text/css'> 
     span { 
      text-decoration:none; 
      color:blue; 
      cursor:pointer; 
     } 
     .page { 
      text-align:center; 
     } 
    </style> 

    ---javascript---- 

    <script> //javascript 
    // show the given page, hide the rest 
    function show(elementID) { 
     // try to find the requested page and alert if it's not found 
     var ele = document.getElementById(elementID); 
     if (!ele) { 
      alert("no such element"); 
      return; 
     } 

     // get all pages, loop through them and hide them 
     var pages = document.getElementsByClassName('page'); 
     for(var i = 0; i < pages.length; i++) { 
      pages[i].style.display = 'none'; 
     } 

     // then show the requested page 
     ele.style.display = 'block'; 
    } 
    </script> 
    </head> 

    ---body--- 
    <body> 
     <div class="page" id="page0"> 
      <h1>Heloo</h1> 
      <form method="post"> 
       <input type="text" id="u_name" name="uname" placeholder="suchit"/> 
      </form> 
      <span onclick="show('page1');"><input type="button" value="submit"/></span> 
     </div> 
     <div class="page" id="page1" style="display:none;"> 
      <h1>Hello</h1> 
      <p id="user_name">content of page</p> 
      <span onclick="show('page2');">2</span> 
     </div> 
     <div class="page" id="page2" style="display:none;"> 
      <p>content of page</p> 
      <span onclick="show('page3');">3</span> 
     </div> 
     <div class="page" id="page3" style="display:none;"> 
      <p>content of page</p> 
     </div> 

    ---javascript--- 
    <script type="text/javascript"> //javascript 
      var x= document.getElementById('u_name').value; 
       document.getElementById('user_name').innerHTML=x; 
    </script> 

    </body> 
</html> 
+1

您嘗試過什麼嗎? – Burki

回答

0

您還需要引用您的字段名稱。

   function show(elementID,previousTag) { 
        // try to find the requested page and alert if it's not found 
        var ele = document.getElementById(elementID); 
        if (!ele) { 
         alert("no such element"); 
         return; 
        } 

        // get all pages, loop through them and hide them 
        var pages = document.getElementsByClassName('page'); 
        for(var i = 0; i < pages.length; i++) { 
         pages[i].style.display = 'none'; 
        } 

        // then show the requested page 
        ele.style.display = 'block'; 
        document.getElementById('span_'+elementID).innerHTML=document.getElementById(previousTag).innerHTML; 
       } 
      </script> 

在這方面,我們可以通過元素和PreviousTag名稱,它將像顯示

<span onclick="show('page1','u_name');"><input type="button" value="submit"/></span> 

讓我知道是否有幫助。謝謝

+0

對不起,它不工作.thx回覆 –

+0

試圖回覆評論,但沒有正確發帖,請檢查我的其他回覆。 –

0

嘗試使用下面的代碼 我試過下面的一個,這對我來說工作得很好..你能交叉檢查嗎。

<script> //javascript 
        // show the given page, hide the rest 
        function show(elementID,previousTag) { 
         // try to find the requested page and alert if it's not found 
         var ele = document.getElementById(elementID); 
         if (!ele) { 
          alert("no such element"); 
          return; 
         } 

         // get all pages, loop through them and hide them 
         var pages = document.getElementsByClassName('page'); 
         for(var i = 0; i < pages.length; i++) { 
          pages[i].style.display = 'none'; 
         } 

         // then show the requested page 
         ele.style.display = 'block'; 
         if(document.getElementById(previousTag).value ==null) 
         { 
         document.getElementById('span_'+elementID).innerHTML=document.getElementById(previousTag).innerText; 
         }else 
         { 
         document.getElementById('span_'+elementID).innerHTML=document.getElementById(previousTag).value; 
         } 
        } 
       </script> 
相關問題