http://www.mediaplayer.kr/main/bbs/html_editor.php

위 링크에서 직접 확인해 보세요. 좌측창에 코드 붙이고 결과보기 클릭하면 우측창에 결과가 나옵니다.

1. 우리가 보통 버튼 이벤트를 줄 때는 아래와 같은 형태를 사용합니다.

[code]

<style>
#my {
    width:200px;
    padding:5px;
    text-align:center;
    background-color:#eeeeee;
    border:1px solid #cccccc;
}
</style>

<div id=my>내용물</div>
<span id=you style=cursor:pointer>클릭</span>

<script>
you.onclick = function() {
    my.style.textAlign = "left";
    my.style.backgroundColor = "#ffffff";
    my.style.border = "1px dashed #900000";
    my.innerText = "그누보드";
}
</script>

[/code]

아니면 함수만 만들고 클릭이벤트가 일어나는 엘레먼트 안에 onclick 으로 연결해도 되구요.

[code]

<style>
#my {
    width:200px;
    padding:5px;
    text-align:center;
    background-color:#eeeeee;
    border:1px solid #cccccc;
}
</style>
<div id=my>내용물</div>
<span id=you style=cursor:pointer onclick=youClick()>클릭</span>

<script>
function youClick() {
    my.style.textAlign = "left";
    my.style.backgroundColor = "#ffffff";
    my.style.border = "1px dashed #900000";
    my.innerText = "그누보드";
}
</script>

[/code]

하지만 때에 따라서는 엘레먼트 안에 함수의 내용을 직접 입력해도 됩니다.

단 그럴때는 쌍따옴표로 두르고 쌍따옴표 안에는 홑따옴표만 들어가야 합니다.

[code]

<style>
#my {
    width:200px;
    padding:5px;
    text-align:center;
    background-color:#eeeeee;
    border:1px solid #cccccc;
}
</style>
<div id=my>내용물</div>
<span id=you style=cursor:pointer onclick="my.style.textAlign = 'left'; my.style.backgroundColor = '#ffffff'; my.style.border = '1px dashed #900000'; my.innerText = '그누보드';">클릭</span>

[/code]

--------------------

본문의 내용과는 상관이 없지만

같은 구문이 반복될 경우는 함수를 만들 때 with 블럭으로 감는 것이 소스가 간명합니다.

[code]

<style>
#my {
    width:200px;
    padding:5px;
    text-align:center;
    background-color:#eeeeee;
    border:1px solid #cccccc;
}
</style>
<div id=my>내용물</div>
<span id=you style=cursor:pointer onclick=youClick()>클릭</span>
<script>
function youClick() {
    with (my.style) { // with 블럭 적용
        textAlign = "left";
        backgroundColor = "#ffffff";
        border = "1px dashed #900000";
    }
    my.innerText = "그누보드";
}
</script>

[/code]