JavaScript DHTML Playground

This page contains what should be the now-familiar text area for JavaScript code plus its accompanying Run button, plus additional web elements and components for practicing user input and web display. View the HTML source of this page to see the IDs that have been assigned to each element.

As before, type your script into the text area, then click the Run button to try it. You'll need a browser with some form of JavaScript debugging tool (such as the JavaScript Consoles in Firefox or Chrome) to see if there were problems with your script.

Input 1: Input 2: Check me

Eenie Meenie Mynie Moe Password:

Category: Wonder:

All systems are go.

// Set up some objects that everyone will want to see. var xmlHttp; var status = document.getElementById("status"); /* * This function handles changes to a request's state. */ var stateChanged = function() { var state = xmlHttp.readyState; switch (state) { case 0: status.innerHTML += "Not initialized."; break; case 1: status.innerHTML += "Setup"; break; case 2: status.innerHTML += "...Sent"; break; case 3: status.innerHTML += "...In Process"; break; case 4: status.innerHTML += "...Complete"; // Deal with the data here. break; } }; // This is the main script sequence. status.innerHTML = ""; if (XMLHttpRequest) { xmlHttp = new XMLHttpRequest(); xmlHttp.onreadystatechange = stateChanged; // We expect a URL in Input 1. xmlHttp.open("GET", document.getElementById("input1").value, true); xmlHttp.send(null); } else { status.innerHTML = "Sorry, no Ajax!"; }