Harvard Extension School, Fall 2018
CSCI E-12 Fundamentals of Web Site Development

## Some Events Illustrated

- event attributes
- Javascript function

      function setBackgroundColor(myid,mycolor) {
          mynode = document.getElementById(myid);
          mynode.style.backgroundColor = mycolor;
      }

Example 8.6 - Javascript Events Illustrated - Example 8.6 (Without Styles) | <ul><li><a href="#" onclick="setBackgroundColor('p1','#ff3333');">Click to make "red"</a></li><li><a href="#" onclick="setBackgroundColor('p1','#3333ff');">Click to make "blue"</a></li><li><a href="#" ondblclick="setBackgroundColor('p1','#33ff33');">Double Click to make "green"</a></li><li><a href="#" onmouseover="setBackgroundColor('p1','#ffff33');" onmouseout="setBackgroundColor('p1','#cccccc');">Mouseover to make "yellow" and mouseout to make "gray"</a></li><li><a href="#" onkeypress="setBackgroundColor('p1','#ff33ff');">Keypress to make "magenta"</a></li></ul><p id="p1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc lobortis orci a odio. Donec cursus, felis eu pulvinar ornare, sem turpis dapibus elit, eget laoreet eros quam vel dolor. Ut ante mauris, ullamcorper quis, posuere quis, lacinia a, felis. In tincidunt malesuada pede. Donec varius lacus sed nisi. Donec rhoncus est ac erat. Duis lobortis fringilla eros. Donec volutpat ligula eu neque. In hac habitasse platea dictumst. Donec in massa. Aenean lectus ante, gravida et, luctus id, posuere at, pede. Nam risus orci, rhoncus eu, aliquam ut, interdum ut, orci. Suspendisse rutrum, turpis sed molestie gravida, libero risus iaculis ligula, quis tempor ligula enim vel sem. </p> body {font-family: Calibri,Tahoma,Verdana,Helvetica,sans-serif;} #p1 { padding: 1em; border: medium solid black; width: 75%; } function setBackgroundColor(myid,mycolor) { mynode = document.getElementById(myid); mynode.style.backgroundColor = mycolor; return false; }

- Markup
- Style
- Script
- Screenshot

     <ul>
    <li><a href="#" onclick="setBackgroundColor('p1','#ff3333');">Click to make "red"</a></li>
    <li><a href="#" onclick="setBackgroundColor('p1','#3333ff');">Click to make "blue"</a></li>
    <li><a href="#" ondblclick="setBackgroundColor('p1','#33ff33');">Double Click to make "green"</a></li>
    <li><a href="#" onmouseover="setBackgroundColor('p1','#ffff33');" onmouseout="setBackgroundColor('p1','#cccccc');">Mouseover to make "yellow" and mouseout to make "gray"</a></li>
    <li><a href="#" onkeypress="setBackgroundColor('p1','#ff33ff');">Keypress to make "magenta"</a></li>
    </ul><p id="p1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc lobortis orci a odio. Donec cursus, felis eu pulvinar ornare, sem turpis dapibus elit, eget laoreet eros quam vel dolor. Ut ante mauris, ullamcorper quis, posuere quis, lacinia a, felis. In tincidunt malesuada pede. Donec varius lacus sed nisi. Donec rhoncus est ac erat. Duis lobortis fringilla eros. Donec volutpat ligula eu neque. In hac habitasse platea dictumst. Donec in massa. Aenean lectus ante, gravida et, luctus id, posuere at, pede. Nam risus orci, rhoncus eu, aliquam ut, interdum ut, orci. Suspendisse rutrum, turpis sed molestie gravida, libero risus iaculis ligula, quis tempor ligula enim vel sem.</p>

In `style` element (`<style type="text/css">`) within `head` element:

    body {font-family: Calibri,Tahoma,Verdana,Helvetica,sans-serif;}
    #p1 {
      padding: 1em;
      border: medium solid black;
      width: 75%;
    }

In `script` element within `head` element (`<script type="text/javascript">`):

    function setBackgroundColor(myid,mycolor) {
        mynode = document.getElementById(myid);
        mynode.style.backgroundColor = mycolor;
        return false;
    }

Copyright © David Heitmeyer