events and elements

index.html
--------------------------------
<!doctype html>
<html>

    <head>

        <script src="javascript.js"></script>


    </head>

    <body bgColor="mediumaquamarine">
        <ul id="myul" oncontextmenu="return false;">
            <li>the list item</li>
            <li>the second item</li>
        </ul>

        <input type="button" onclick="buttonClicked()" value="click me"/>

        <div class="divclass" id="mydiv" onmouseover="mouseOverDiv()" onmouseout="mouseOutOfDiv()"></div>

        <select id="mySelect" onchange="colorSelected(this.value)">
            <option value="" selected="true">----</option>
            <option value="#0094ff">Light Blue</option>
            <option value="#f78c09">Dark Orange</option>
            <option value="#b200ff">Purple</option>
        </select>
        <br/>
        <select id="lstcountries" onchange="SetSelectedValue()">
           <option>-- Select Country --</option>
           <option value="US">United State</option>
           <option value="UK">United Kingdom</option>
           <option value="IL">Israel</option>
        </select>
        <input type="text" id="txtCountry" disabled="disabled" />

        <br/>

         <input type="radio" name="rColors" value="Red" /> Red <br />
         <input type="radio" name="rColors" value="Yellow" /> Yellow <br />
         <input type="radio" name="rColors" value="Green" /> Green <br />

         <input type="button" value="ShowColor" onclick="ShowSelectedColor()" />


    </body>

</html>
--------------------------------


javascript.js
----------------------------------

document.onload = loaded();
var initialBg;
var hasChanged = false;

function loaded(){
    console.log("document has been loaded");
}


function buttonClicked(){
    console.log("clicked");
    var ulElem = document.getElementById("myul");
    console.log(ulElem);
    ulElem.style = "background-color:red; list-style-type: none;";

    var liElems = document.getElementsByTagName("li");
    console.log(liElems);

    for(var i=0; i<liElems.length; i+=1){
        liElems[i].style = "padding-left: 100px";
    }


    var divElem = document.getElementsByClassName("divclass");
    console.log(divElem);
    divElem = divElem[0];// reassigning divElem to the first element in the collection
    console.log(divElem);

    //divElem.innerText="<h1>My Dynamic H1</h1> <br/> <h1>My Dynamic H1 2</h1>"; // innerText does NOT parse the content
    divElem.innerHTML="<h1>My Dynamic H1</h1> <br/> <h1>My Dynamic H1 2</h1>"; // innerText does  parse the content

}

function mouseOverDiv(){

    var divElem = document.getElementById("mydiv");
    divElem.style.backgroundColor = "blue";

}

function mouseOutOfDiv(){
    var divElem = document.getElementById("mydiv");
    divElem.style.backgroundColor = "";
}

function colorSelected(color){
    if(hasChanged==false){
        initialBg = document.body.bgColor;
        hasChanged = true;
    }
    if(color == ""){
        color = initialBg;
    }
    document.body.bgColor = color;
}

 function SetSelectedValue() {
       var countries = document.getElementById("lstcountries");
       for (var i = 0; i < countries.options.length; i++) {
        if (countries.options[i].selected){
            document.getElementById("txtCountry").value = countries.options[i].value;
            break;
        }
     }
 }

  function ShowSelectedColor(){
  var rb = document.getElementsByName("rColors");
  var val="";
  for (var i = 0; i < rb.length; i++){
      if (rb[i].checked){
         val = rb[i].value;
         break;
      }

    }
    if(val != ""){
        alert("Selected color is " + val);
    }
}

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