프롬프트를 사용하여 div의 텍스트를 변경하십시오.

그래,이 페이지에서 수행하려고 시도하는 간단한 코드가 있습니다. 브라우저에서 이름을 요청하는 페이지를로드하자마자 프롬프트를 표시하기를 원합니다. 일단 그들이 그들의 이름이 무엇인지 대답하면 그 변수 (이름)를 취해 div의 내부에 ID "welcomeText"로 씁니다. 어떤 이유로 든 작동하지 않을 것입니다 ... 감사합니다.프롬프트를 사용하여 div의 텍스트를 변경하십시오.

Heres my code. 그것을 읽기 쉽게하기 위해 html 색인 안에 모두 넣으십시오.

<title>Welcome to Validus</title> 

<style> 
#welcomeText { 
     font-family:Verdana; 
     font-size:12px; 
     color:black; 
     width:100px; 
     height:100px; 
     margin:0px auto; 
} 
</style> 

<script type="text/javascript"> 

var name=prompt("Hey! Welcome to Validus! Whats your name?", "Name"); 

document.getElementById("welcomeText").innerHTML = "Hey" + " " + name + "! " + "Welcome to validus..."; 

</script> 

</head> 
<body> 

<div id="welcomeText"> 
</div> 

</body>

출처

2013-06-18 George Coleman

에 ['.innerHTML'] (https://developer.mozilla.org /en-US/docs/Web/API/element.inner HTML)을 사용자 입력과 함께 사용하면 보안 문제에 노출 될 수 있습니다. 가능한 경우 ['.textContent'] (https://developer.mozilla.org/en-US/docs/Web/API/Node.textContent)를 고려하거나 ['document.createTextNode'] (https : // developer. mozilla.org/en-US/docs/Web/API/document.createTextNode) – Xotic750

또는 innerText를 사용하십시오. – cocco

그냥 닫는 몸 태그 바로 앞에 바닥에 스크립트를 이동

. 그렇지 않으면 참조 할 페이지에 'welcomeText'가 아직 없습니다.

출처

2013-06-18 23:00:50

감사! 의미가 있습니다 –

문제 없습니다. 그러나 이것은 당신이 이것을하도록 권장한다는 것을 의미합니다. 아무것도 사이트를 더 빨리 떠날 수는 없습니다. 현대 웹 사이트에서는 prompt()를 사용하지 않습니다. –

페이지로드가 완료되면이 실행됩니다.

U이 필요로 acomplish 다른 많은 방법도 있습니다 ...

위해 window.onload = FUNC;
window.addEventListener ('load', func, false);
window.addEventListener ('DOMContentLoaded', func, false);
또는 body 태그의 끝에 자바 스크립트를 추가하십시오. <script></script></body>
window.addEventListener ('DOMContentReady', func, false); JQuery와 사용
...

가장 일반적이고 호환성이 창로드.

<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>Welcome to Validus</title> 
<style> 
#welcomeText { 
font-family:Verdana; 
font-size:12px; 
color:black; 
width:100px; 
height:100px; 
margin:0px auto; 
} 
</style> 
<script type="text/javascript"> 
window.onload=function(){ 
var name=prompt("Hey! Welcome to Validus! Whats your name?", "Name"); 
document.getElementById("welcomeText").innerHTML = name; 
} 
</script> 
</head> 
<body> 
<div id="welcomeText"></div> 
</body> 
</html>

출처

2013-06-18 23:03:22 cocco

'window.onload'를 사용해야하는 이유를 설명하면 답을 더 잘 나타낼 수 있습니다. –

내 코드는 내 영어보다 낫다. 그러나 이것은 영어 페이지이므로 많은 ppl이 어떤 윈도우가로드를 의미하는지 이해한다고 생각하십니까? 그러나 당신의 권리. – cocco

-1

여기 열쇠는 그래서 자바 스크립트를 업데이트하려고하기 전에 DIV는 DOM에 존재 $(document).ready(function() {});을 사용하고 jQuery를 ...

를 사용하는 예입니다.

<html> 
    <head> 
     <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
     <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script> 
     <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" /> 

     <style> 
      table, tr, td {border:1px solid green;border-collapse:collapse;padding:5px 5px;} 
     </style> 

     <script type="text/javascript"> 
      $(document).ready(function() { 

       var name=prompt("Hey! Welcome to Validus! Whats your name?", "Name"); 
       $("#welcomeText").html("Hey" + " " + name + "! " + "Welcome to validus..."); 


      }); //END $(document).ready() 

     </script> 
    </head> 
<body> 

    <div id="welcomeText"></div> 

</body> 
</html>

출처

2013-06-18 23:12:36 gibberish

jquery-ui와 CSS 파일을 사용하지 않는 이유는 무엇입니까? 특히 OP는 jquery 응답을 표시하지 않았습니다. 그리고 여분의'table, tr, td' CSS는 무엇입니까? – Xotic750

내 의견대로 document.createTextNode을 사용하는 방법을 보여줍니다.

또한 문서로드 프로세스의 끝에 window.onload 및 addEventListener

노트

로드 이벤트가 발생을 참조하십시오. 에서 문서의 모든 개체가 DOM에 있고 이미지와 하위 프레임 모두로드가 완료되었습니다.

addEventListener는 이전 버전의 IE (IE < 9)에서는 지원되지 않으므로 대신 attachEvent을 사용해야합니다.

HTML

<div id="welcomeText"></div>

CSS

#welcomeText { 
    font-family:Verdana; 
    font-size:12px; 
    color:black; 
    width:100px; 
    height:100px; 
    margin:0px auto; 
}

자바 스크립트

function doWelcome() { 
    window.removeEventListener("load", doWelcome); 

    var name = prompt("Hey! Welcome to Validus! Whats your name?", "Name"); 

    document.getElementById("welcomeText").appendChild(document.createTextNode("Hey" + " " + name + "! " + "Welcome to validus...")); 
} 

window.addEventListener("load", doWelcome, false);

사용 jsfiddle

출처

2013-06-18 23:17:50 Xotic750

프롬프트를 사용하여 div의 텍스트를 변경하십시오.

답변

관련 문제