Introduction to programming

Doing useful things

In general, to do useful things with programming languages, you need to grab an item you want to do something to, and then use code to do something to it.

In JavaScript, we do this by grabbing a reference to the object we want to have an effect on. We've already done this — we've stored some items in variables. You can store anything in a variable, whether it is a simple string or number value, or something more complicated, like a video, paragraph or other element on a web page. This is done via the document object model.

Making a start

For this section, make a new copy of the template file. Put the following HTML into your HTML area:

<h1 class="myHeading">My heading</h1>

We can grab a reference to this element using the following line — put this in your JavaScript area:

var myH1 = document.querySelector('.myHeading');
// Store a reference to the h1 element inside a variable called myH1

We could then do things to our heading by affecting the variable with more JavaScript. For example, to alter the text inside the heading, you could do this:

myH1.innerHTML = "My updated heading";
// Change the content inside our h1 to equal the specified string

Exercise: improving our game to make things happen in the HTML

Let's improve the user experience of our game. It is pretty bad form to have all your messages appearing in alert dialog boxes. This isn't something you want to see people using in the real world. It'd be better to have the messages appearing inside your web page. The current code looks like this:

var randomNumber = Math.floor(Math.random() * 100) + 1;

for(i = 1; i <= 10 ; i++) {
  var userGuess = prompt("Enter guess " + i);

  if(userGuess === randomNumber) {
    alert("Congratulations. You got it right!");
    break;
  } else {
    alert("wrong");
    if(userGuess < randomNumber) {
      alert("Your guess is too low!");
    } else if(userGuess > randomNumber) {
      alert("Your guess is too high!");
    }
  }
}

At this point, open up the template file copy that you wrote the game code into previously. If you haven't got a copy, just create a new copy of the template and paste the above code into the JavaScript section.

To do this, we need to first create some HTML elements for the previous guesses, result of the last guess, and whether it is too low or too high. Add the following into your HTML area:

<h1>Number guessing game</h1>
<p class="guesses"></p>
<p class="lastResult"></p>
<p class="lowOrHi"></p>

Now we need to store these in variables so we can get at them and do things with them in JavaScript. Add the following lines into the top of your JavaScript area:

var guesses = document.querySelector(".guesses");
var lastResult = document.querySelector(".lastResult");
var lowOrHi = document.querySelector(".lowOrHi");

Next we need to replace the alert() functions with lines to write the results into those paragraphs, not just shout them out in alert boxes. First, find the line var userGuess = prompt("Enter guess " + i);; directly below this line add the following:

guesses.innerHTML += userGuess + " ";

Now replace the line alert("Congratulations. You got it right!"); with

lastResult.innerHTML = "Congratulations! You got it right!";
lowOrHi.innerHTML = "";

Replace alert("wrong"); with

lastResult.innerHTML = "Wrong!";

Replace alert("Your guess is too low!"); with

lowOrHi.innerHTML = "Your guess is too low!";

Replace alert("Your guess is too high!"); with

lowOrHi.innerHTML = "Your guess is too high!";

Your final code should look like this:

var randomNumber = Math.floor(Math.random() * 100) + 1;

for(i = 1; i <= 10 ; i++) {
  var userGuess = prompt("Enter guess " + i);
  guesses.innerHTML += userGuess + " ";

  if(userGuess === randomNumber) {
    lastResult.innerHTML = "Congratulations! You got it right!";
    lowOrHi.innerHTML = "";
    break;
  } else {
    lastResult.innerHTML = "Wrong!";
    if(userGuess < randomNumber) {
      lowOrHi.innerHTML = "Your guess is too low!";
    } else if(userGuess > randomNumber) {
      lowOrHi.innerHTML = "Your guess is too high!";
    }
  }
}

This work is licensed under a Creative Commons Attribution 4.0 International License. Share it, make it better, use it for good.