的innerHTML不會改變元素

Question

我有我的頁面上的div元素（「main‘）誰是內容的變化來回兩個不同的屏幕之間（他們的ID是’readout‘和’num」），其內容是存儲爲隱藏的div元素（使用display:none）。每個屏幕都有一個按鈕，將main設置爲其他隱藏的div。

因爲我掙扎着爬JavaScript來把num.innerHTML爲main上的負載，我已經結束了把幾乎相同的內容num（用不同形式的名稱）到主：

<p>Number of Passengers per Carriage:</p> 
<form method="post" action="javascript:void(0);" name="applesForm" onSubmit="setPassengers();"> 

<input type="text" name="numApples" id="numPassengers" /> 

<br/><br/> 
<input type="submit" name="Submit" value="OK!"/> 
</form> 

setPassengers()設置成功後main的內容爲readout。 readout成功將main的內容設置爲num（實際上與main的原始內容幾乎相同）。但是，它不會返回讀出。

這裏是setPassengers()和setPassengersAgain()，這是相同的，但對於不同形式的名稱：

function setPassengers() 
    { 
      passengers=document.applesForm.numPassengers.value; 

      document.getElementById('main').innerHTML=readout.innerHTML; 
     } 

     function setPassengersAgain() 
     { 
      passengers=document.applesFormAgain.numPassengers.value; 

      document.getElementById('main').innerHTML=readout.innerHTML; 
     } 

所以我的問題是： 1）爲什麼不num更改爲readout？ 2）有沒有辦法在頁面加載時立即加載num以簡化代碼？

編輯：我可以使用onload事件，這意味着num是地方不對頭唯一有點...

編輯2：這裏是隱藏的div的：

<div id="readout" style="display:none"> 
<p>Throughput per hour:</p> 
<p id="output">--</p> 

<p>Average Dispatch Time:</p> 
<p id="avDisTime">--</p> 

<form method="post" action="javascript:void(0);" name="dispatchForm" onSubmit="dispatch();i++;"> 
<input type="submit" name="Submit" value="Press on Dispatch!"/> 
</form> 
<br/> 

<form method="post" action="javascript:void(0);" name="resetTimesForm" onSubmit="resetTimes();"> 
<input type="submit" name="Submit" value="Reset Times"/> 
</form> 

<form method="post" action="javascript:void(0);" name="resetAllForm" onSubmit="resetAll();"> 
<input type="submit" name="Submit" value="Reset All"/> 
</form> 
</div> 

<!--back to default page--> 
<div id="num" style="display:none"> 

<p>Number of Passengers per Carriage:</p> 

<form method="post" action="javascript:void(0);" name="applesFormAgain" onSubmit="setPassengersAgain();"> 

<input type="text" name="numApples" id="numPassengers" /> 

<br/><br/> 
<input type="submit" name="Submit" value="OK!"/> 
</form> 

</div> 

Answer 1

你不發表您的HTML代碼，所以我不知道它是怎麼樣子，但你可以使用類似事端：

HTML：

<button id="changeMain">Change #main</button> 
<div id="main"> 
    <div id="readout" class="screen show"> 
     Readout 
    </div> 
    <div id="num" class="screen"> 
     Num 
    </div> 
</div> 

CSS：

#main>.screen{display:none;} 
#main>.screen.show{display:block;} 

的JavaScript：

var els=[document.getElementById('readout'),document.getElementById('num')],current; 
function addClass(el,c){ 
    var arr=el.className.split(' '); 
    if(arr.indexOf(c)>-1){return;} 
    arr.push(c); 
    el.className=arr.join(' '); 
} 
function delClass(el,c){ 
    var arr=el.className.split(' '); 
    var i=arr.indexOf(c); 
    if(i===-1){return;} 
    arr.splice(i,1); 
    el.className=arr.join(' '); 
} 
document.getElementById('changeMain').onclick=function(){ 
    if(!current){ 
     for(var i=0,l=els.length;i<l;i++){ 
      if(els[i].className.indexOf('show')>-1){ 
       current=i; 
       break; 
      } 
     } 
    } 
    delClass(els[current],'show'); 
    current=(current+1)%els.length; 
    addClass(els[current],'show'); 
} 

DEMO: http://jsfiddle.net/CUgqh/

說明：

如果你想要一些內容insode #main，你應該在它裏面放置（隱藏或顯示）。然後，我們隱藏所有.screen與#main>.screen{display:none;}，除了.screen.show：#main>.screen.show{display:block;}。

然後，JavaScript代碼：

首先我們創建與所述元素的數組：

var els=[document.getElementById('readout'),document.getElementById('num')],current; 

而這增加/函數刪除一個類c到元件el：

function addClass(el,c){ 
    var arr=el.className.split(' '); 
    if(arr.indexOf(c)>-1){return;} 
    arr.push(c); 
    el.className=arr.join(' '); 
} 
function delClass(el,c){ 
    var arr=el.className.split(' '); 
    var i=arr.indexOf(c); 
    if(i===-1){return;} 
    arr.splice(i,1); 
    el.className=arr.join(' '); 
} 

然後我們創建按鈕的事件：

上述

的代碼做：

• 如果是第一次電流els人指數（current）是不確定的，我們搜索的元素默認有類show。
• 它將類show移除到當前顯示的元素，因此它消失。
• 它增加1至current（或它變爲0，如果它是最後一個els'元素
• 它添加show類到當前元素，所以會出現。