innerHTML은 요소를 변경하지 않습니다.

Question

내 페이지에 div 요소 ("readout"및 "num")가있는 콘텐츠가 서로 다른 두 화면간에 내용이 변경되는 div 요소 ("main")가 있습니다. 그 내용은 다음과 같습니다. hidden div 요소 (display:none 사용)로 저장됩니다. 각 화면에는 다른 숨겨진 div에 main을 설정하는 버튼이 있습니다. 나는 자바 스크립트로드에 main에 num.innerHTML을 넣어 얻기 위해 분투 때문에

, 나는 주에 (다른 형태의 이름) 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과 동일하게 설정 함)에 성공적으로 설정합니다. 하지만 그때 그것은 다시 읽기로 돌아 가지 않을 것입니다.

이

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) 당사 readout로 변경하지 num됩니다

여기에 동일하지만, 다른 형태의 이름 인 setPassengers() 및 setPassengersAgain()입니까? 2) 코드를 단순화하기 위해 페이지로드시 바로 num을로드하는 방법이 있습니까?

편집 : 나는 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;} 

자바 스크립트 :

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.show{display:block;}을 제외한 #main>.screen{display:none;}으로 모두 숨 깁니다.

다음에, 자바 스크립트 코드 :

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(' '); 
} 

: 요소 el에 클래스 c을

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

그리고 추가/기능 제거합니다

먼저 우리는 요소와 배열을 만들

그리고 버튼에 이벤트를 만듭니다.

위의 코드는 수행합니다

• 그것을, 우리는 기본적으로 클래스 show이있는 요소를 검색 현재 els '지수 (current가) 정의되지 않은 첫 번째 시간합니다.
• 현재 표시된 요소에 클래스 show을 제거하므로 사라집니다.
• 은 1 current에 추가 (또는 그것은 현재 요소에 클래스 show를 추가
• 마지막 els '요소 인 경우가 나타나도록이 0이된다.