onclick Event Handler

EasyProgramming.net Tutorial on the onclick event handler

by superj80820

HTML

<form>
    <input type="radio" name="radio1" value="111" />
    <input type="radio" name="radio1" value="222" />
    <input type="radio" name="raido1" value="333" />
    <input type="button" name="submit2" value="" />
     
     
    <input type="checkbox" name="checkbox1" value="111" />
    <input type="checkbox" name="checkbox1" value="222" />
    <input type="checkbox" name="checkbox1" value="333" />
    <input type="button" name="submit" vlaue="按钮" />
     
     
    <select name="select" id="select1">
        <option value="111">第一项</option>
        <option value="222">第二项</option>
        <option value="333">第三项</option>
    </select>
    <input type="button:" name="submit3" value="按钮" />
     
     
</form>

CSS

#outputName, #outputCity{
  color: red;
}

JavaScript

document.getElementById("name").onclick = function(){
	var name = prompt("Enter your name");
  document.getElementById("outputName").innerText = name;
}

document.getElementById("city").onclick = function(){
	var city = prompt("Enter your city");
  document.getElementById("outputCity").innerText = city;
}

document.getElementById("changeGreen").onclick = function(){
	document.getElementById("outputName").style.color = 'green';
  document.getElementById("outputCity").style.color = 'green';
}

document.getElementById("changeRed").onclick = function(){
	document.getElementById("outputName").style.color = 'red';
  document.getElementById("outputCity").style.color = 'red';
}