웹 페이지가 재설정되고 CSS 적용이 중단됩니다.

JavaScript를 사용하여 자신 만의 스토리를 제작할 수있는 웹 페이지를 제작 중입니다. 처음에는 사용자가 이름을 입력하고 성별 (성별을 나타내는 이미지 클릭 수)을 선택한 다음 removeChild를 사용하여 성별 이미지를 사라지게하고 제목을 제외한 새로운 페이지로 이야기를 시작합니다. 그러나 사용자가 성별을 선택하면 CSS가 웹 페이지에서 무시되는 것처럼 보입니다. 검정색 배경이 흰색으로 바뀌고 텍스트 중심 맞춤이 무시됩니다. 왜 그런가요? 내가하고 싶은 일을하면서 웹 페이지를 통해 CSS를 일관성있게 유지하려면 어떻게해야합니까?웹 페이지가 재설정되고 CSS 적용이 중단됩니다.

HTML :

var name = prompt("Welcome! To begin, please tell me your name:"); 
    var gender = 0; 
    var maleImage = 0; 
    var femaleImage = 0; 
    var genderPrompt = 0; 

    document.writeln("<h2>Hello " + name + "! Welcome to Design Your Own Story! " + 
        "In this game, you pick how the story goes!</h2><h2 id='genderPrompt'>Let's begin. Click which gender you are.</h2>"); 

    document.writeln("<img id='maleImage' src='maleImage.jpg' alt='Male Image' onclick='genderChoice(1)' />"); 
    document.writeln("<img id='femaleImage' src='femaleImage.jpg' alt='Female Image' onclick='genderChoice(2)' />"); 

    function genderChoice(genderImage) { 
     if (genderImage === 1) { 
      gender = "male"; 
     } else { 
      gender = "female"; 
     } 
     setTimeout(genderReset,250); 

    } 

    function genderReset() { 
     if (gender === "female") { 
      maleImage = document.getElementById("maleImage"); 
      maleImage.parentNode.removeChild(maleImage); 
     } 
     if (gender === "male") { 
      femaleImage = document.getElementById("femaleImage"); 
      femaleImage.parentNode.removeChild(femaleImage); 
     } 
     genderPrompt = document.getElementById("genderPrompt"); 
     genderPrompt.parentNode.removeChild(genderPrompt); 

     document.writeln("<h1 class='title'>Design Your Own Story</h1>"); 
     document.writeln("<h2>Ok, " + name + ", so you're " + gender + "! Let's start our journey...</h2>"); 
     setTimeout(leavesHome,1500); 
    }

CSS :

* { 
    background-color:black; 
    color:white; 
    text-align:center; 
} 

img { 
    width:30%; 
}

출처

2014-12-10 Claudia Fitall

은 자바 스크립트가 genderCoice 기능을 인식하지 못합니다. 클로저에서 코드를 실행할 것입니다.

객체에 할당 시도 (가 반드시 가장 좋은 방법이 아니다하지만 나는 예를 들어 document했다) :

document.genderChoice = function(genderImage) { 
    if (genderImage === 1) { 
     gender = "male"; 
    } else { 
     gender = "female"; 
    } 
    setTimeout(genderReset,250); 

}

이 this 작업을 참조하십시오. (writeln으로 인해 파일 자체가 파손되었을 가능성이 있습니다. 더 이상 편집 할 수 없습니다.)

출처

2014-12-10 06:46:33 JNF

문서로드가 완료된 후 document.writeln을 사용하려고합니다. 문서가 닫히면 document.writeln 만 열려있는 문서에 사용해야하며 내용이 지워집니다. 이것이 스타일 시트를 지우는 것입니다.

var div = document.createElement('div'); 
div.innerHTML = "<span>Some new text here</span>";

또는 색인 페이지에 요소를 미리 만들고 다음 innerHTML을 설정하는 데 사용할 :

<body> 
    <div id="section"></div> 
</body>

을가로드 된 후

은 이런 식으로 뭔가를해야 페이지를 수정하려면

다음 코드에서 :

var section = document.getElementById("section"); 
section.innerHTML = "<span>Some new text goes here</span>";

출처

2014-12-10 06:50:00 Bill

어떻게 innerHTML을 사용하여 이미 가지고있는 추가 기능을 사용하여 텍스트를 추가 할 수 있습니까? 장소? 지금은 document.writeln을 계속 사용하여 페이지에 텍스트를 추가합니다. –

웹 페이지가 재설정되고 CSS 적용이 중단됩니다.

답변

관련 문제