2012-07-04 4 views
-2
function init(){ 
    var flag=true; 
    if(flag) 
    { 
     document.getElementById("panel").innerHTML= 
      "power is on<br />"; 
    } 
    if(7<2) 
    { 
     document.getElementById("panel").innerHTML= 
      "<br />failure"; 
    } 
     if(2<7) 
    { 
     document.getElementById("panel").innerHTML= 
      "<br />success"; 
    } 
} 
window.onload=init; 

이것은 다른 html 파일에서로드하지만 이는 실행되는 주 코드입니다.자바 스크립트 출력이 사라집니다.

출력은 "성공"으로 표시되지만 "전원이 켜져 있습니다"는 무엇이 잘못 표시되지 않습니까?

+0

'document.getElementById ("panel")에 두 번째 호출하면 첫 번째 내용을 바꿉니다. innerHTML = –

답변

0
var panel = document.getElementById("panel"); 
    if(flag) { 
     panel.innerHTML += "power is on<br />"; 
    } 

    if(7<2) { 
     panel.innerHTML += "<br />failure"; 
    } 
    if(2<7) { 
     panel.innerHTML += "<br />success"; 
    } 

변경할 때마다 innerHTML 당신이 +=로 문자열을 추가 할 필요가 있도록, 이전의 모든 내용을 덮어 씁니다.

패널 요소에 대한 참조를 한 번만 만들 수도 있습니다.

예 바이올린 : 당신은 거기에 현재 HTML을 교체하는 http://jsfiddle.net/ypznU/

+0

제발, downvoter가 -1을 설명 할 수 있을까요? – fcalderan

+0

'+ = innerHTML', 더 말할 필요가 있습니까? – Esailija

+1

@Esailija 예 : 무엇이 잘못 되었나요? :) 두 문자열을 추가 할 때 미세 최적화 문제가 발생하지 않기를 바랍니다. (이 경우에도 절대적으로 옳습니다.) – fcalderan

0

, 당신은 + = = 대신 사용한다.

function init(){ 
var flag=true; 
if(flag) 
{ 
    document.getElementById("panel").innerHTML += 
     "power is on<br />"; 
} 
if(7<2) 
{ 
    document.getElementById("panel").innerHTML += 
     "<br />failure"; 
} 
    if(2<7) 
{ 
    document.getElementById("panel").innerHTML += 
     "<br />success"; 
} 

어떻게이 기능을 사용할 수 있습니까?

+0

+1 알고 싶습니다. 왜이 답변이 다운 되었습니까? –

+2

innerHTML을 통해 문자열을 추가하기 전에 한 번 문자열을 계산해야한다는 점을 올바르게 지적한 사용자가 downvoted라고 생각합니다.어쨌든이 특별한 경우에는 더 중요한 쇼라고 생각하고 이전 문자열이 삭제 된 이유를 사용자에게 설명합니다. – fcalderan

+0

그래, 그게 아마도 내가 downvoted 된 이유이고, 그들은 옳았다. 문자열을 한 번에 지정하십시오. 그러나 이것은 왜 당신의 텍스트가 당신이 어쨌든 기대했던 것처럼 보이지 않는지를 보여줍니다. –

0

innerHTML 설정은 이전에 지정된 내용이 제공된 HTML 문자열로 바뀌 었습니다.을 대체합니다. 그래서 무슨 일이 일어나고 있는지 "전원이 켜져있다"순간 (컴퓨터가 요즘 정말 빠르다)이며 즉시 "성공"로 바뀝니다.

2

innerHTML을 여러 위치에 할당하거나, 문자열을 만들어 한 번에 할당하지 마십시오. 대신

function init(){ 
    var flag=true; 
    if(flag) 
    { 
     document.getElementById("panel").innerHTML= 
      "power is on<br />"; 
    } 
    else if(7<2) 
    { 
     document.getElementById("panel").innerHTML= 
      "<br />failure"; 
    } 
     else if(2<7) 
    { 
     document.getElementById("panel").innerHTML= 
      "<br />success"; 
    } 
} 
window.onload=init; 

위의 코드주의 경우의 항상 당신이 당신이 할 수있는 다중 출력을 원한다면 당신의 방법에 당신이 플래그가 true로 지정하기 때문에 "전원이 켜져"표시 할 경우

var flag = true, 
    html = ""; 
if (flag) { 
    html += "power is on<br />"; 
} 
if (7 < 2) { 
    html += "<br />failure"; 
} 
if (2 < 7) { 
    html += "<br />success"; 
} 
document.getElementById("panel").innerHTML = html; 
0

당신은 다른 사용할 수 있습니다 다른 제안대로 연결 접근법을 사용하십시오.

0

마지막 if 문은 항상 true로 평가됩니다.

if(2<7) 
{ 
    document.getElementById("panel").innerHTML= 
     "<br />success"; 
} 

즉, "성공"은 항상 패널 요소 내부의 모든 것을 대체합니다. 조건부가 실제로 원하는 것과 교체가 실제로 의도 한 것인지 확인하십시오. 그렇지 않으면 다른 사람들이 제안한 것처럼 문자열을 추가하십시오.