자바 스크립트에서 사라지는 버튼

다음 코드에 버튼을 넣는 데 문제가 있습니다. Javascript 프로그램 I이 콘솔에 오류 메시지가 말하는 얻을 :자바 스크립트에서 사라지는 버튼

ReferenceError: myClickFunc is not defined

이 기능은 내 눈 앞에있다. 아래는 관련 코드입니다.

최근에 답변을 얻지 않고 유사한 게시물을 만들었지 만 문제를 해결하기 위해 몇 가지 팁을 얻었으며 더 많은 연구를했습니다. . 여기

라인 전에 다음 코드에서 버튼 내가에서 오전 현재 상황 :

dbRef.on("value", function(snapshot)

작품은해야하지만 곧 사라집니다. 다른 버튼 (루프 내부)은 위에서 언급 한 오류 메시지를 생성합니다. 내가 알아챈 또 하나의 점은 페이지가 로딩을 종료하지 않는 것입니다.

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>Web application</title> 
</head> 

<body> 

<script src="https://www.gstatic.com/firebasejs/3.9.0/firebase.js"></script> 

<script> 

function someCallingFunc(timeRef,work) 
{/* Beginning of someCallingFunc */ 
var workRef = timeRef.child(work) 

workRef.on("value", function(workSnapshot) { 
    var rcdData = workSnapshot.val(); 
    document.write("English name: " + rcdData["engName"] + "<br/>\n"); 
    document.write("<input type='Submit' value='Edit' onClick='myClickFunc()'><br/>\n"); 
}); 

}/* End of someCallingFunc */ 


function myClickFunc() 
{/* Beginning of myClickFunc */ 
window.open("http://www.google.com"); 
}/* End of myClickFunc */ 


var config = { 
    apiKey: ".........", 
    authDomain: "..........firebaseapp.com", 
    databaseURL: "..........firebaseio.com", 
    projectId: ".........", 
    storageBucket: "..........appspot.com", 
    messagingSenderId: "........." 
}; 
firebase.initializeApp(config); 

var dbRef = firebase.database().ref().child('DataList'); 

// This button works but only appears for half a second, then disappears. 
document.write("<button onClick='myClickFunc()'>EDIT</button><br/>\n"); 

dbRef.on("value", function(snapshot) { 

for (number in snapshot.val()) { 
    document.write("Year " + number + " :<br/>\n"); 
    var numberRef = dbRef.child(number) 
    numberRef.on("value", function(numberSnapshot) { 
     for (work in numberSnapshot.val()) { 
     someCallingFunc(numberRef,work); 
     document.write("<br/>\n"); 
     } 
    }); 
}}); 
</script> 

</body> 
</html>

다양한 방법으로 myClickFunc()의 위치를 변경하려했지만 성공하지 못했습니다.

JS에 익숙하지 않은 나는 초보자 실수를해야 할 것입니다. 그러나 그 실수는 어디에 있습니까?

출처

2017-05-09 Michel

이벤트 핸들러에서'document.write'를 사용하고 있습니다. 이 이벤트 핸들러는 페이지가로드되고'document'가 닫힌 후에 호출됩니다. 이것 때문에,이 시점에서'document.write'를 호출하면 기존 내용을 추가하는 대신 덮어 씁니다. –

문제는 document.write을 이벤트 처리기 (dbRef.on("value", ...)에 사용하고있는 것입니다. 그래서 비동기 적으로 호출합니다. 즉,이 시점에서 문서가 닫혀 있음을 의미합니다. 따라서 document.write은 암시 적으로 document.open을 호출하여 현재 페이지를 지우고 거기에 있던 모든 것을 제거합니다 (특히 버튼).

document.write을 사용하여 문서에 내용을 추가하는 대신 DOM 조작을 사용하십시오. 예를 들어, 페이지에 새 단락을 추가하려면, 당신은이 작업을 수행 할 수 있습니다 : 첫 번째 주에

var p = document.createElement("p"); 
p.innerHTML = "Hello <b>world!</b>"; 
document.body.appendChild(p);

출처

2017-05-09 10:01:20 ij6

https://developer.mozilla.org/en-US/docs/Web/API/Document/write

봐 "... 폐쇄 (로드) 문서에 document.write를 호출 자동으로 document.open을 호출하여 문서를 지 웁니다. "

페이지가로드 된 후 이벤트 핸들러가 호출됩니다. 즉, document이 닫혔습니다.

document.write을 사용하는 대신 document.createElement()으로 요소를 만들고 .appendChild()과 함께 추가하여 DOM을 직접 조작해야합니다.
document.write 버튼을 추가하는 동안 페이지가로드되어 있고 document이 아직 열려 있기 때문에 일반적으로 document.write을 피하는 것이 좋습니다. 따라서 DOM 조작을 추가하는 것이 좋습니다.

출처

2017-05-09 10:06:33

자바 스크립트에서 사라지는 버튼

답변

관련 문제