Back to feed
Renewal·서른의 생활코딩

Sample Source 3) JavaScript Basics (User-Defined Functions Applied)

NS
normalstory
cover image

This time it's a more advanced example.
Each time you press a button, it changes the background color.

A user-defined function
is linked to a button created in the body tag 

so each time the user presses it, the onclick handler routes through to the linked user-defined function
and runs it.






<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko" lang="ko">




<head>


<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />




<title> User-defined Function 4</title>




<script type="text/javascript">


//<!CDATA[


function bg_red()


{


document.bgColor='red';


}


function bg_white()


{


document.bgColor='white';


}


function bg_yellow()


{


document.bgColor='yellow';


}


function bg_green()


{


document.bgColor='green';


}


//]]]]]]>


</script>




</head>






<body>




<form method="post" action="">


<p>


<input type="button" value="Reset" onclick="bg_white()" />


<input type="button" value="red" onclick="bg_red()" />


<input type="button" value="green" onclick="bg_green()" />


<input type="button" value="yellow" onclick="bg_yellow()" />


</p>


</form>




</body>




</html>

This English version was translated by Claude.

친절한 찰쓰씨
Written by
친절한 찰쓰씨

Pleasant Charles — UI/UX researcher at AIT. Keeping notes on design, planning, and slow days here since 2010.

More on the author's page

Keep reading

Renewal

Steadily, for the long haul, without burning out

Mar 31, 2026·9 min
Renewal

Tech-life balance

Feb 7, 2026·3 min
Renewal

Humanality, by Park Jeong-ryeol

Feb 7, 2026·11 min