Javascript를 사용하여 HTML 태그의 텍스트를 innerHTML 및 함수로 바꿉니다.

요소 id "greeting"및 외부 Java 스크립트를 사용하여 h1 태그 내부의 텍스트를 변경하려고합니다. 변수를 수집하고 다음 함수에서 사용하는 함수 init을 호출하는 방법을 파악하는 데 문제가 있습니다. 지금까지 내가 가지고있는 것을 보았습니다.Javascript를 사용하여 HTML 태그의 텍스트를 innerHTML 및 함수로 바꿉니다.

HTML

<head> 

    <title>Matt Beckley</title> 
    <script type="text/javascript" src="script1.js"></script> 
</head> 

<body> 

<h1 id="greeting">Welcome!</h1> 

</body> 
</html>

문제가 스크립트를!

window.onload = init; 

function init() 
{ 
var fullname=prompt("Please Enter you name!","Anonymous "); 
(fullname == "Anonymous")? "Anonymous " : ""; 

var nickname=prompt("Please Enter you nickname!"," None"); 
(nickname == "None")? " None": ""; 
} 

function writeGreeting() 
{ 
    document.getElementById("greeting").innerHTML= ????????? 
}

그래서 h1 태그가 이름과 닉을 표시하도록 마지막 기능을 만드는 방법을 모르겠습니다. w3schools는 "문자열"만 표시하고 다른 기능을 호출 할 수는 없습니다. 누구든지이 작업을 수행하는 방법을 알고 있습니까?

출처

2010-01-14 Matt

어떻게 init 및 writeGreeting 기능 병합에 대한 :

window.onload = init; 

function init() 
{ 
var fullname=prompt("Please Enter you name!","Anonymous "); 
fullname = (fullname == "Anonymous")? "Anonymous " : ""; 

var nickname=prompt("Please Enter you nickname!"," None"); 
nickname = (nickname == "None")? " None": ""; 
document.getElementById("greeting").innerHTML= "Welcome " + fullname + " (" + nickname + ")"; 
}

추신을 사소한 문법 포인트 - "Please enter your name"보다는 "Your name your name"을 원하고, 닉네임 프롬프트에서는 비슷하게 사용하는 것이 좋습니다.

출처

2010-01-14 12:22:41

// Create two GLOBAL variables 
var fullname = ""; 
var nickname = ""; 

function init() { 
    fullname = /* ... */ 
    nickname = /* ... */ 
    // pass the nickname on to the greeting function 
    writeGreeting(nickname); 
} 

// This function is remain separate, if you wish to call it again 
// at a later time before a page-refresh. 
function writeGreeting(name) { 
    document.getElementById("greeting").innerHTML = name; 
}

출처

2010-01-14 12:23:29 Sampson

어때요?

당신이 어떤을 넣어하지 않는 경우 그것은 "에 오신 것을 환영합니다 전체 이름!"또는 "에 오신 것을 환영 별명!"또는 "에 오신 것을 환영합니다 익명을!"이 표시됩니다.

function init() { 
    var fullname=prompt("Please Enter you name!"); 
    var nickname=prompt("Please Enter you nickname!"); 
    writeGreeting(fullname||nickname||"Anonymous"); 
} 

function writeGreeting(name){ 
    document.getElementById("greeting").innerHTML= "Welcome "+name+"!"; 
}

출처

2010-01-14 12:32:18 YOU

나는 Dominic의 솔루션을 좋아한다. 사용자가 입력 한 데이터는 신중해야합니다. escape() 함수를 사용하기 전에 함수를 사용하여 이스케이프 문자열을 사용하는 것이 좋습니다.

document.getElementById("greeting").innerHTML= "Welcome " + escape(fullname) + 
               " (" + escape(nickname) + ")";

출처

2010-01-14 12:33:28

잘못된 이스케이프입니다. 자바 스크립트 관련 인코딩으로 URL 인코딩과 비슷하지만 깨졌습니다. 공백이나 악센트 같은 일반 이름 문자를 조작합니다. '이스케이프 (escape) '는 결코 사용해서는 안됩니다. 올바른 이스케이프는'<'를'<'으로,'&'를'&'으로 대체하는 HTML 인코딩입니다. – bobince

아. 그러나 여전히 아무것도 아닌 것보다 낫다는 것에 동의해야합니다. :) –

왜 .inner 텍스트 대신를 사용하지?

출처

2010-01-14 12:50:44 pencilCake

그것은 IE 전용이기 때문입니다. 최근의 다른 브라우저에서는 'textContent' 대신 DOM Level 3 Core 속성을 사용할 수 있습니다. 하지만 네, 분명히 이스케이프 처리되지 않은 텍스트를 'innerHTML'에 쓰고 싶지는 않습니다. – bobince

위와 같이 innerHTML은 위험합니다. http://www.slideshare.net/x00mario/the-innerhtml-apocalypse – kufudo

시도해보십시오. ie, chrome 및 ff (모두 최신)로 테스트되었습니다.

var msg = "Welcome " + fullname + "(" + nickname + ")!"; 

var greetingElement = document.getElementById("greeting"); 

if(greetingElement.firstChild == null) 
    greetingElement.appendChild(document.createTextNode(msg)); 
else 
    greetingElement.firstChild.nodeValue = msg;

출처

2010-01-14 17:45:17

Javascript를 사용하여 HTML 태그의 텍스트를 innerHTML 및 함수로 바꿉니다.

답변

관련 문제