2013-05-11 2 views
1

여기서는 zerg이라는 HTML 속성을 정의하고 단락을 클릭했을 때 표시하려고하지만 클릭 할 때 "정의되지 않음"을 표시합니다. the code that I've written의 문제점은 무엇이며 올바른 방법은 무엇입니까?html 요소 인라인 속성 설정하기

<p onclick = "alert(this.zerg);" zerg = "Why doesn't this work?">Click here!</p> 
+3

속성은 속성과 다릅니다. 'this.getAttribute ("zerg"); 유효한 속성은 아니지만. 'data-zerg'를 사용하여 적어도 HTML5와 호환 될 수 있습니다. –

+1

약간의 배경 지식으로 http://stackoverflow.com/questions/5871640/why-is-using-onclick-in-html-a-bad-practice 및 http://en.wikipedia.org/wiki/Unobtrusive_JavaScript – Xotic750

+2

"눈에 잘 띄지 않는 JavaScript"는 종교입니다. –

답변

5

를, 속성 대신 zergdata-zerg을 지정해야합니다. 이 시도 :

<p onclick = "alert(this.getAttribute('data-zerg'));" data-zerg = "Now it works as intended!">Click here!</p> 

http://jsfiddle.net/QrrpB/1340/

+0

html의 유효성을 명시하는 데 +1 ... – PSL

+0

답변에 관해서 ... 질문을하기 전에이 사실을 알고 있습니까? –

+0

@squint 아니요, 솔루션을 아직 찾지 못했기 때문에 질문을했습니다. –

3

이 시도 : HTML5 호환 될하기 위해

<p onclick = "alert(this.getAttribute('zerg'));" zerg = "Why doesn't this work?">Click here!</p> 
3

당신은 getAttribute() 방법을 사용할 수 있습니다 : 당신이 시도 할 수

<p onclick = "alert(this.getAttribute('zerg'));" zerg = "Why doesn't this work?">Click here!</p> 
0

: -

<p onclick = "javascript:alert(this.getAttribute('zerg'));" zerg="Now it works as 
intended!">Click here!</p> 

this

은 현재 요소를 참조하십시오. 따라서 this.getAttribute()을 인라인 코드로 사용할 수 있습니다.