choices.html
<!DOCTYPE html> <html> <head> <title>Choices</title> <link rel="stylesheet" type="text/css" href="choices.css"> </head> <body> <p><h3>Listbox:</h3> <select id="feeling"> <option value="happy">I was happy with the customer service</option> <option value="ok">The customer service I received was OK</option> <option value="unhappy">I was unhappy with the level of service</option> </select><br> <hr> <p><h3>Checkboxes:</h3> <input type="checkbox" id="contact" checked> <label for="contact">I would like to be contacted about my experience</label><br> <input type="checkbox" id="marketing" checked> <label for="marketing">I would like to receive marketing material</label><br> <hr> <p><h3>Radio buttons:</h3> <input type="radio" name="time" id="AM" value="Morning" /> <label for="AM">contact me in the morning</label><br> <input type="radio" name="time" id="PM" value="Evening" checked /> <label for="PM">contact me in the evening</label><br> <hr> <p><h3>Range slider:</h3> <input type="range" id="rating" min="0" max="10" step="1" list="tickmarks"> <datalist id="tickmarks"> <option value="2"> <option value="5"> <option value="8"> </datalist> <br><hr><br> <input type="button" onclick="getChoices()" value="Completed"> <script src="choices.js"></script> </body> </html>
body{ background-color: azure; }
function getChoices(){ feeling = document.getElementById("feeling").value; contact = document.getElementById("contact").checked; marketing = document.getElementById("marketing").checked; var times = document.getElementsByName("time"); for (var when = 0; when < times.length; when++){ if (times[when].checked){ time = (times[when].value); break; } } rating = document.getElementById("rating").value; alert("Feeling? " + feeling); alert("Contact? " + contact); alert("Marketing? " + marketing); alert("Time? " + time); alert("Rating? " + rating); }