Solutions to exercises Exercise textbox <title>greetings</title> Name: <input type="text" id="name"/> <input id="button" type="button" value="greet" /> <div id="result"> var button = document.getelementbyid("button"); button.onclick = clickgreet; function clickgreet() { var namefield = document.getelementbyid("name"); var name = namefield.value; var resultfield = document.getelementbyid("result"); var date = new Date(); var hour = date.gethours(); if (hour < 13) { resultfield.innerhtml = "Good morning, " + name; else { resultfield.innerhtml = "Good afternoon, " + name; Exdomcalculationwithselect.html "use strict"; function calculate() { var n1 = parseint(document.getelementbyid("n1").value); var n2 = parseint(document.getelementbyid("n2").value); var operator = document.getelementbyid("operator").value; var result = document.getelementbyid("result"); switch(operator) { case "+": result.textcontent = n1 + n2; case "/": result.textcontent = n1 / n2; case "*": result.textcontent = n1 * n2; case "-": result.textcontent = n1 - n2; Solutions JavaScript exercises(part 2) 1
<input type="text" id="n1"/> <select id="operator"> <option value="+">+</option> <option value="/">/</option> <option value="*">*</option> <option value="-">-</option> <input type="text" id="n2"/> <input id="btn" type="button" value="=" /> <span id="result"></span> var btn = document.getelementbyid("btn"); btn.onclick = calculate; Exercise Select <title>transfer names</title> <select id="left" size="4" style="float:left;width:70px"> <option value="john">john</option> <option value="paul">paul</option> <option value="ringo">ringo</option> <option value="george">george</option> <div style="float:left"> <input id="toright" type="button" disabled="true" value=">" style="display:block"/> <input id="toleft" type="button" disabled="true" value="<" style="display:block"/> <select id="right" size="4" style="float:left;width:70px"> function moveright() { var option = left.options[left.options.selectedindex]; right.options.add(option); left.options.remove(left.options.selectedindex); leftindexchanged(); rightindexchanged(); function moveleft() { var option = right.options[right.options.selectedindex]; left.options.add(option); right.options.remove(right.options.selectedindex); Solutions JavaScript exercises(part 2) 2
rightindexchanged(); leftindexchanged(); function leftindexchanged() { var toright = document.getelementbyid("toright"); if (left.options.selectedindex > -1){ toright.disabled = false; else { toright.disabled = true; function rightindexchanged() { var toleft = document.getelementbyid("toleft"); if (right.options.selectedindex > -1){ toleft.disabled = false; else { toleft.disabled = true; var toright = document.getelementbyid("toright"); var toleft = document.getelementbyid("toleft"); toright.onclick = moveright; toleft.onclick = moveleft; left.onchange = leftindexchanged; right.onchange = rightindexchanged; Solutions JavaScript exercises(part 2) 3
Exercise Google <title>search google</title> <style>.hideerror{ display:none;.showerror{ display:block; color:red; </style> <form id="frm" action="http://www.google.be/search" method="get"> <div><label for="q">search:</label> <input type="text" name="q" id="q" required/> <div> <label for="lr">language</label> <select name="lr" id="lr"> <option value="">all</option> <option value="lang_fr">french</option> <option value="lang_nl">dutch</option> <div> <label for="cr">country</label> <select name="cr" id="cr"> <option value="">all</option> <option value="countryfr">france</option> <option value="countrybe">belgium</option> <option value="countrynl">netherlands</option> <div id="error" class="hideerror">you cannot search for french pages in the Netherlands <input type="submit" value="submit"/> </form> "use strict"; var frm = document.getelementbyid("frm"); frm.onsubmit= function() { var selectlanguage = this.elements.nameditem("lr"); var selectcountry = this.elements.nameditem("cr"); var errordiv = document.getelementbyid("error"); console.dir(selectlanguage); console.dir(selectcountry); if (selectlanguage.value === "lang_fr" && selectcountry.value === "countrynl") { errordiv.classname = "showerror"; return false; Solutions JavaScript exercises(part 2) 4
return true; ; Solutions JavaScript exercises(part 2) 5