Super Basic Intro to Using HTML and JavaScript Together
Tags: javascript, html, beginners, tutorial
Published: 2023-11-07 03:12:53

One of the biggest problems I, and I think a lot of new developers have come across while learning web development is a disjointed understanding of how HTML and JavaScript work together. Many tutorials focus on one or the other and it can lead to some confusion around how to actually use HTML and JavaScript together to create apps and web pages. This tutorial will go in depth to break down a very simple project. We'll make a small Rock, Paper, Scissors game that takes user input, determines the outcome of the selections, and prints the result to the user.

## Prerequisites for this Tutorial
While the point of this is to be as beginner friendly as possible, the focus is much more on using HTML and JavaScript together, and less on HTML and JavaScript basics. I think an extremely introductory level of skill should be had beforehand. Doing the HTML and JavaScript courses someplace like Codecademy would be ideal and would provide enough knowledge to follow along without much issue. You should also have something to write code in. An IDE like VSCode is best, but something like Notepad will be fine. If you're reading this, then you probably already have a web browser, so no concerns there. Or you are a Technomancer, in which case you can probably disregard this tutorial.

Throughout I’ll be including example images where relevant. If you're coding along with this tutorial, you should be seeing similar results to the images, though they will be few and far between once we reach the JavaScript portion of the tutorial.

## With that, Let's Begin with HTML
We'll start with the most basic of basic things, an empty HTML page. Open your code writing app of choice and let's create a new file and call it **rps.html**. This will be what holds all of our HTML for our Rock, Paper, Scissors game. Inside we'll be adding `<html>`, `<head>` and `<body>` tags to get started.

Our `<html>` tags will encase everything we need for our game. `<head>` is where you'd normally be adding a title, and little more info about our game. We're going to forgo adding things to the `<head>` in the interested of simplicity in this tutorial. `<body>` will house our game inputs and results.

```
<html>
<head>

</head>

<body>

</body>
</html>
```

You can open this page by navigating to where you've saved your **.html** file and double clicking it. If it doesn't open in your default web browser, try right clicking and selecting an **Open With** option or dragging and dropping it into your browser. We'll be looking at this page a lot as we go so it's worthwhile to keep it open in your browser.

## Let's Jump Right In to Making a Game
Now, this isn't going to get too fancy. We want to keep it simple and easy to understand. Rock, Paper, Scissors doesn't require a complex set up. We need a way for two players to make a selection and not much else. Because of that, we're opting for a way to make that selection easy, a `<form>` with two `<select>` fields. Our `<select>` fields will have three options (Rock, Paper, Scissors) each and there's 2 of them for the typical player count of Rock, Paper, Scissors.

Inside our `<body>` tags, let's create a form with opening and closing <form> tags. Our form tags are going to create a nice organizational element to hold our **select** fields, their labels and our button input we'll eventually add.

```
<form>
</form>
```

In-between our `<form>` tags, we are going to add our `<select>` fields. These are going to be made up of three elements: a `<label>` to show what the **select** field is for, a <select> to create the drop down list portions of our **select** field, and some `<option>` tags to give us something to select in the field.

We'll start by creating our first **select** field for **Player 1**. Let's make opening and closing `<label>` tags.

```
<label></label>
```

Since we want this label to be for player one, let's slap that in-between the two tags so we know who's selecting what. Of course, feel free to call your players or selections whatever you want. We'll be keeping it pretty generic here to make it easy to follow.

```
<label>Player 1: </label>
```

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zcyypfz2cqyewkvnm0vl.png)

Next, let's start our **select** field proper with some opening and closing select tags. We're going to stack anything we'll need to add more elements to for some easy formatting.

```
<select>
</select>
```

Our **select** field is pretty barren, and we're going to need something to reference when we get to the JavaScript portion of things, so let's add an **id** attribute to it. Your **id** attribute can be anything, but we want it to be descriptive so we know what we're looking at, so let's call it **player1**.

```
<select id="player1">
</select>
```

Now that we have an **id** on our **select** field, we need to go back and amend our `<label>`. We're going to add a **for** attribute to the label. The **for** attribute lets us say what element the label is for by referencing that element's **id**. Since this is for our element with the id of **player1**, we'll add the for attribute as such.

```
<label for="player1">Player 1: </label>
```

Now we can finish off our **select** field with some options. Inside the `<select>` tags, we're going to add three options. Each option uses its own `<option>` opening and closing tags. These tags will have a **value** attribute attached to them, and inside the tags, we'll put some text to say what we want them to say. Let's make an example with Rock.

```
<option value="Rock">Rock</select>
```

You can see we made the value and the display text the same. The value could be anything you want to represent someone picking Rock (a number, letter, different words), but we are going to stick with Rock in order to make use of the value later in our JavaScript.

We can now add the options for Paper and Scissors in the same way. At the end, we'll have a little **select** field snippet that looks something like this:

```
<label for="player1">Player 1: </label>
  <select id="player1">
    <option value="Rock">Rock</option>
    <option value="Paper">Paper</option>
    <option value="Scissors">Scissors</option>
  </select>
```

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/je9ttn5l61v6ytnyyus1.png)

We've created a first player, but we still need a second. After all, playing Rock, Paper, Scissors with only one person is about as fun as simulating it on a computer with two drop down menus. We're going to do what developers have been trying to do for decades and make our lives easier by just copying and pasting Player 1, and changing a few things so that we have a Player 2.

Almost everything is identical, but we need to update our **for**, **id**, and **label** text to reference 2 instead of 1.

```
<label for="player2">Player 2: </label>
  <select id="player2">
    <option value="Rock">Rock</option>
    <option value="Paper">Paper</option>
    <option value="Scissors">Scissors</option>
  </select>
```

Well, we did it! We have two players to play the game. But we need one more thing before we can move on to our JavaScript and be done with our <form> We're going to need to create a button to submit our choices in order to determine who will come out as victorious in our high stakes Rock, Paper, Scissors simulator.

## Time to Make Our Form Capable of Doing Work

Forms are special in that we could assign an **action** attribute to our form and create an `<input>` to submit our form to that action, but we're going to keep it a little simpler than that. Instead we are going to create an `<input>` with a few attributes. We'll need a **type**, a **value**, and also an event called **onclick**.

Let's start with the small stuff, the attributes. `<input>` is a little unique in that we can give it a **type** and depending on that type it can be and do different things. We could make text fields and number fields or checkboxes or a vast assortment of things and they all have different properties to them. However, we want to submit a form and for that, we're going to want to click a button. So, big shock, we're going to give our `<input>` a **type** of **button**.

```
<input type="button">
```

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ofzs6w1n868jh61vm5ws.png)

We also want our `<input>` to say something so the user knows clicking it is required to play. A **value** attribute will let us add some text to our button and spruce it up a bit. Since this is Rock, Paper, Scissors, I think it's appropriate to call that **value** "Shoot!". Feel free to put whatever you like as your **value**. It is strictly visual in this case and won't impact how the game functions. I will be referring to it as the "Shoot!" button throughout this tutorial. Afterwards you'll end up with something like this:

```
<input type="button" value="Shoot!">
```

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eneh2i5zoy8as6fadqqb.png)

Now I mentioned one other thing we need and that's an **event** known as **onclick**. But what is an **onclick** event? It's kind of exactly what it sounds like. It's an event that triggers when you click on an element. In this case, our button is what's being clicked on and the event we're going to be firing is the JavaScript code we'll write. An onclick event can execute code in a variety of ways, but what we'll be focusing on is probably the most common, calling a **function**.

We haven't written any JavaScript code just yet, so we don't even know what we're going to be calling our **function**. Well, we're going to cheat a little. We know we're playing a game, so we're going to continue to keep it simple and call it **playGame()**.

```
<input type="button" value="Shoot!" onclick="playGame()">
```

Now, if you look at your form in a web browser, you'll notice things are looking a little cramped. Let's space it out a bit with a few break tags (`<br>`) after each closing `</select>` tag. It'll add a new line between our elements and make things look a bit nicer

```
</select>
<!--- here for break tags --->
<br>
<br>
```

With all said and done, we should have our full form complete. That means we have everything we need to start playing with JavaScript and making our game do something. You're full HTML file should look something like this at this point

```
<html>
<head>
</head>

<body>
  <form>
    <label for="player1">Player 1: </label>
      <select id="player1">
        <option value="Rock">Rock</option>
        <option value="Paper">Paper</option>
        <option value="Scissors">Scissors</option>
      </select>
    <br>
    <br>
    <label for="player2">Player 2: </label>
      <select id="player2">
        <option value="Rock">Rock</option>
        <option value="Paper">Paper</option>
        <option value="Scissors">Scissors</option>
       </select>
    <br>
    <br>
    <input type="button" value="Shoot!" onclick="playGame();">
  </form>
</body>
</html>
```

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rjjii1a29zfukr89oyso.png)

## Time to Make a Game Playable with JavaScript
First things first, we're going to need a new JavaScript file. Let's make a new file in the same directory as our HTML file and call it **rps.js**. Go ahead and open it up if it's not already open and we'll add our first bit of JavaScript.

We're going to start by creating a new **function**. A **function** is just a snippet of code that lets us set up some repeatable steps for our application to execute. In our situation, we are writing the steps that allow our game to be playable, but functions are a very powerful tool and let us repeat actions without the need to rewrite them over and over again. Each time we want to perform an action, we can just **call** our **function**. In our HTML file, we already set up what the name of our function should be in our **onclick** event so we can go ahead add that **function** to our JS file using the function keyword like so:

```
function playGame(){
}
```

Great! We have some JavaScript. Now what? Well, we're going to do something that's not always necessary, but for the purposes of learning, let's just test our **onclick** event and see if it works.

For some basic testing, let's add a **console.log()** to our function so we can print some text to our console and see the **onclick** event in action.

```
function playGame(){
  console.log('testing our game');
}
```

So, what does a **console.log()** do? Well, it prints out information. In our current situation, we just want to make sure the function is working when we click our button. To do so, we just added a bit of text as a string to the function call. When we click our Shoot! button, we should see that text print out in the browsers development console.

Oh, and what is a development console? It's just part of the development tool kit that's available on virtually every browser. To open it (at least on a keyboard with function keys), you can just simply press the **F12** key and select the **Console** tab if it's not already selected. If you don't have an F12 key, you can usually right click on the page and select **Inspect** and then select the **Console** tab. Alternatively, you may have to check the options available on your browser and look for something along the lines of **Development Tools** or **Dev Tools**. 
 
If you haven't already, open your **rps.html** file in your default browser, open the development console, and let's try running the game by making two selections and clicking the Shoot! button.

And… oh noooo! It didn't work. So, what happened? I expect that you got something along the lines of:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wz9iws1bw9qs8o9i8egg.png)

No problem! Nothing to worry about. We got this error because we did not link our JavaScript file to our HTML file. Let's take care of that now and then talk about errors and how we can decipher them.

Let's go back to our **rps.html** file and add a `<script>` tag. We can add this in a couple locations, the `<head>`, or the `<body>`. While adding to the `<head>` works and in our case isn't going to cause any issues, best practice is to add JavaScript `<script>` tags at the bottom of the `<body>`, just before the closing `</body>` tag.

```
<script></script>
</body>
```

We're going to add two attributes to our `<script>` tag. We want to specify a **type**, which in this case will be **text/javascript**, and we want to add a **source** attribute (**src**) to point to the JavaScript file we created based on the path from the **HTML** file. In our case, we will link directly to **rps.js** because it should be in the same directory as **rps.html**.

```
<script type="text/javascript" src="rps.js"></script>
```

Now let's go back to the web browser, refresh, and try clicking the **Shoot!** button again. This time we should see the text from our **console.log()** in the console.

Success! You should now see something along the lines of this:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xwhs3wvl4l4ubyujppnz.png)

Let's take a slight detour and do a quick breakdown on the error we received.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fn0w7t2peqx0wm5rm3ms.png)

This first part is letting us know what's wrong. We got an error and that error is that **playGame** is not defined. It's not defined because according to our HTML page, that **function** doesn't exist.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3l1khsllvovtthowi0y6.png)

We know that the HTML page is looking for that **function** and can't find it because we specifically told it to use a **function** called **playGame** in our **onclick** event. We know the error is happening as a result of that **onclick** event because **HTMLInputElement.onclick** is saying the error happens on this html element, on it's **onclick** event. **(rps.html:23:75)** is saying, "Hey, the error is in your **rps.html** file at **line 23**, **75 spaces** from the start of that line. Sometimes, the spaces into the line aren't super important to troubleshooting, but the line number is almost always helpful for tracking down a problem.

How do we know that, based on this error, we need to add a **<script>** tag for our JavaScript file? Really, it's something that will come with experience. If you get that error, and you use what we just discussed to determine where it's happening, it'll be easy to search for what the cause is online. For us, we could determine that our **onclick** event is looking for our **function** and saying it's undefined. With that knowledge, we could search the world wide web for something like, "**onclick event throws error function is not defined**", and we'll likely come across a post on **stackoverflow** or somewhere where someone has asked a similar or the same question and we can go through answers and try to determine what we are missing and what's wrong.

It's a bit frustrating and it's not ideal, but it's also a big part of current development and utilizing resources like this to resolve issues is something you'll be doing throughout your development career.

## Now, Back To Our Show
That was a big ol' side quest from our tutorial, but it's an important thing to understand and utilize. You'll be seeing a lot of errors and some of them aren't going to be very helpful at all. The more you experience and resolve the more likely you are to spend less time on them in the future.

Let's get this show back on the road. We have some **select** fields in our HTML file, and those fields have values that we want. Not only do we want them, but we want them at the ready to be used as much as we need, and that means we need them set to a variable. Let's create our first variable, assign it a value, then talk through what it is exactly that we're doing.

```
let player1 = document.getElementById('player1').value;
```

You're probably at least familiar with variables and variable keywords, but we'll do a deep dive on this one and break out each piece.

- **let** is our keyword for defining a variable that we plan to potentially overwrite or we expect the value of it to change at some point.
- **player1** is the name of our **variable**. We've called it **player1** to match with our first select field for **Player 1**.
- **=** to say we are setting player1 equal to something.
- **document** is generally the page that the JavaScript is running on. In this case, our HTML page is the document.
- **.getElementById('player1')** is a built-in function for **document** that allows us to search our HTML page for an element based on its **id** attribute. In this case, the element we are looking for is our first **select** field for **Player 1**. We gave that field an **id** attribute of **player1**. So, we are referencing that **id** and using it to get us the element so that way we can retrieve information from it.
- **.value** gives us the **value** of the element. In this case, **value** is the value of the **option** we selected in the **select** field.
- **;** to close out the JS line. While potentially not necessary, it is still good practice to include.

Now that we've broken down how we plan to get a value from our **select** field, try doing the same for **Player 2**.

At this point, our JavaScript file should look something like this:

```
function playGame(){
  let player1 = document.getElementById('player1').value;
  let player2 = document.getElementById('player2').value;

  console.log('testing our game');
}
```

## Looking Pretty Good
We're off to a good start here. Now we have access to the **values** from our **select** fields. That means we can do something with them, right? It suuuure does. Now, we can work out our win conditions and add a little text to say who comes out on top.

First, let's add one more **variable**. We'll call it **result** and we'll set it equal to an empty string using two single quotes ('').

```
let result = '';
```

## Adding Some Conditional Logic
OK, let's get deep into this and figure out how to figure out who wins in a game of rock, paper, scissors. If you don't know the rules, no worries. It's pretty simple. Rock beats scissors, scissors beats paper, paper beats rock. That's it. Not a whole lot to the game really.

So how do we choose the best way to determine our win conditions?

## MENTAL EXERCISE TIME!!!!!! 
Yep, this is a tutorial about using JavaScript with HTML, but maybe we can expand the JavaScript part a bit more. No need to write any code or anything. But, before continuing, maybe take a minute to consider how you would approach this problem programmatically. Think of the possible win/lose combinations for rock, paper, scissors and consider how you would approach logically figuring out who wins each game. The important thing is that even if your solution is different than below, it can still be correct. Lots of problems have multiple solutions and you may come up with a good way to solve this on your own. You can also consider that not every solution would work for each situation. Don't worry if you're not sure. No harm in not coming up with anything and no harm in not having a full solution. You can always come back to this step and try out other solutions when we're done, or even expand on what we write in the tutorial.

## For Now…
We're going to go with my favorite solution, the short and easy route. We'll just use a few **if/else if/else** conditional statements and try to keep things nice and clean. We really only care about two types of conditions: a **tie**, and **player1** winning. If our game doesn't result in either of those conditions, then we can assume **player2** is the winner. With that logic, we don't need to overcomplicate our comparisons.

Let's start with our first condition. We'll start with an **if** statement which lets us make some comparison and determine if the logic makes sense. We can use some really simple logic that says if the value of **player1 equals** (represented by two equals signs ==) the value of **player2** then the game is a tie.

This is where we'll first get to use our **result** variable as well. When we defined result, we created it as a placeholder with the value of an empty string. We can now assign it a new value that we would like to use to display the results of the game. We'll do this similarly to how we initially defined it, but without the let keyword. And now we'll also set it to a string value that will mean something to our player, like **'Tie!'**.

We should come up with something like this:

```
if (player1 == player2) {
  result = 'Tie!';
}
```

## A Quick Test
Before we continue on with our logical steps, let's reutilize some existing code and test that our conditional statement is working as expected. In the **console.log()** we already have in our function, remove the text **'testing our game'** and replace it with our **result** variable.

Now, refresh your browser, make sure your console is open, and select the same value for **player1** and **player2** and press the **Shoot!** button. You should see **Tie!** in your console window if your **if** conditional statement is working properly.

## But What Else
Let's continue on our journey to logical conclusion by skipping a bunch of steps in favor of pairing up the **if** conditions best partner in crime, an **else** condition. With an **else** condition we're basically saying that any logic not caught by the if **must** make the **else** statement the true statement. In our case, and temporarily to the benefit of **player2**, our **else** condition is going to say that **player2**, for a few brief fleeting moments (unless you decide to skip testing this code change), wins if the game isn't a tie.

An important side note, an **if** can exist without an **else** but, not the other way around.

To append an **else** to our **if** we just simply write else after our closing curly brace (**}**) for the **if** conditional, and add a new opening and closing curly brace for the contents of the **else** to reside in.

We'll also add some new text for our **result** variable to be set to. Seems fitting we say that **result** is equal to **'Player 2 Wins!'**.

When we're done we'll have something like this:

```
if (player1 == player2) {
  result = 'Tie!';
} else {
  result = 'Player 2 Wins!';
}
```

## Continuing Logic
Now we can finish off our little logic block here with a fancy bit of **else if** conditional statements. There's work like adding another **if** condition into the mix before our final **else** condition and we can use them to check if **player1** should be the winner given a certain selection from each player.

In our **else if** statements we need to know a bit more information than we did in our **if** statement. We need to know what **player1** and **player2** selected, and more importantly, we need to know if **player1** selected something that will beat **player2**. Luckily, we know the rules to rock, paper, scissors, so we can simply check if each player selected a specific **value** that would result in **player1** being the winner.

We'll do this by checking two statements and determining if they are both **true**. If both are **true** then we'll be able to conclude that **player1** is the winner. Let's walk through the win condition for if **player1** picks **Rock**.

We'll start similar to our **else** condition by appending **else if** after the closing curly brace (**}**) of our **if** conditional. Now we'll need to add opening and closing parentheses after **else if**, just like with our **if** conditional. Inside those parentheses is where we'll write our conditional logic.

In this instance, we know that we want to check if **player1** picked **Rock**. we can do so by checking that our value for **player1** equals the string **'Rock'**. If it does, then that means our first statement is **true**, which is what we want.

Now we need to add an additional condition into the mix. To do so we're going to use a conditional operator for **AND**. It looks like **&&** and says that an entire statement is **true** if each of the statements separated by the **&&** operator are **true**.

Next, we need to know that **player2** would need to pick something that would lose to **Rock**, so they would have picked **Scissors**. We'll essentially be doing the same check we did for **player1**, but for **player2** and making sure they selected **'Scissors'**.

Now outside of the parentheses, we can add our open and closing curly braces to house our **result** which will be us similarly setting the **result** variable to something like **'Player 1 Wins!'**.

In the end you'll have something that looks a bit like this:

```
else if (player1 == 'Rock' && player2 == 'Scissors') {
  result = 'Player 1 Wins!';
}
```

## And The Logical Conclusion
We're moving ever so close to being done with the logic portion of this. Now we just need to write two more **else if** conditions to follow up our first one. One where **player1** picks **Paper** and **player2** picks **Rock** and one for when **player1** picks **Scissors** and **player2** picks **Paper**. I'll let you write these two out on your own, but below will be what your **function** should look like so far. When you're done, go ahead and try a few games with the console window open. Since we still have our **console.log(result);** code at the bottom of our **function**, you should be able to see the game in action.

```
function playGame(){
  let player1 = document.getElementById('player1').value;
  let player2 = document.getElementById('player2').value;
  let result = '';

  if (player1 == player2) {
    result = 'Tie!';
  } else if (player1 == 'Rock' && player2 == 'Scissors') {
    result = 'Player 1 Wins!';
  } else if (player1 == 'Paper' && player2 == 'Rock') {
    result = 'Player 1 Wins!';
  } else if (player1 == 'Scissors' && player2 == 'Paper') {
    result = 'Player 1 Wins!';
  } else {
    result = 'Player 2 Wins!';
  }

  console.log(result);
}
```

## Displaying a Win to Players
Now we have a functioning game. You're making selections in **HTML** and then using **JavaScript** to figure out some logic and print out who's the game winner in the console. But, people don't tend to go to the console window looking for information. They want to see results up on the screen, so that's what we're going to make our code do.

## Back to HTML
We're going to start by going back to our **HTML** page. We want to add a little placeholder element where we can display our **result**.

Under the closing tag for **form** (`</form>`), put a space for us to add our new tag to hold our result value. For simplicity, we're going to use an `<h2>` tag. We want our result to be large and visible. We could do this in a variety of other ways, but in the interest of keeping it simple, we'll let that tag handle all that for us.

Inside our `<h2>` tag we'll need to include an **id** attribute just like we did with our `<select>` fields. We'll set our **id** to **resultEl** since it's the element we want to use to display our result.

In the end, your HTML should just have this one additional line between the closing `<form>` tag and the `<script>` tag, like this:

```
</form>
<h2 id="result"></h2>
<script type="text/javascript" src="tmp.js"></script>
```

## And Back to the JavaScript
Yep, that's it. That's all the **HTML** we'll need to add. Now things are going to get a bit more tricky and we're going to actually be manipulating our **HTML** with **JavaScript**.

First things first, we no longer need **console.log(result);** in our code. We can go ahead and remove that, since soon we’ll be seeing our results printed on the screen and won’t need the console for displaying them.

We're going to start with adding two additional variables. We need a variable to get our result element from our **HTML**, the same way we got the elements for **player1** and **player2**. We'll just need to get that element by its **id** attribute, **resultEl**.

Next we need an element to hold an **HTML** element we're going to let **JavaScript** create for us using a function similar to how we used **document.getElementById()**. For now we can just call it **resultTextNode** and we don't need to assign it a value.

Your two new variables should be fairly similar to this:

```
let resultEl = document.getElementById('resultEl');
let resultTextNode;
```

## Creating a TextNode
Now that we have our variables we can use Javascript to create some things, display some things, and also, remove some things. We'll start by making a new text node. We'll need this in order to display the text we've been assigning to **result**. To do so, we're going to just set our new variable, **resultTextNode**, equal to **document.createTextNode(result)**.

That should result in a bit of code like this at the bottom of your JavaScript file:

```
resultTextNode = document.createTextNode(result);
```

## Displaying Our Text Node
This is the moment we've been leading up to. The reason we previously spent all those minutes creating a placeholder. It's time to display our **result** to the player. This part gets a little complicated and I'm going to be keeping it relatively simple for the sake of this tutorial, but know that attributes of DOM elements can also have **child** elements and they can nest relatively deep. We're just going to scratch the surface here, but it's something you'll definitely be encountering going forward and something you'll slowly learn to manage, understand, and manipulate.

To display our **result** value, we are going to take our **resultEl** element and append our **resultTextNode** to it as a **child**. In our case, this is going to be really simple and smooth. JavaScript has us covered with an **appendChild()** function for our element.

We should end up with a tiny snippet like so at the bottom of the JavaScript file under everything else:

```
resultEl.appendChild(resultTextNode);
```

Go ahead and test it out, then we'll have one final hurdle to tackle.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fog0yx666ug461omr8bc.png)

## One Last Problem to Solve
So, if your testing went as good as I expect, you've noticed that the results don't go away and in fact, they keep getting added onto each other. Not to worry, We have a semi-simple solution that will clear this up no problem.

Our issue is that we are not removing the old text node before appending a new one. So we just keep on appending new children to our little placeholder and making a sloppy mess for our player.

Well just like how we can append a child, we can also remove a child. This is another one of those problems that may have multiple solutions. Ours is not going to be the most sophisticated, but it will work for our scenario. More complex sites will likely require more complex solutions. Just something to keep in mind as we wrap up.

Our **resultEl** element has a fancy attribute on it called **firstChild**. That **firstChild** in our case will be our **resultTextNode** if we've appended it to **resultEl** already. Otherwise, **firstChild** is nothing. We want to do two things, check if there's a **firstChild**, then, if there is, remove it before we try to append a new child to our **resultEl** element.

The first part is a simple **if** condition where we just want to know if **resultEl.firstChild** contains anything. Checking **if (resultEl.firstChild) {}** will return **true** if there is a child, and **false** if there is not.

If we get a **true** result, then we want to remove that child. We can do so similarly to how we appended a child with a function called **removeChild()**. This gets a little awkward though. We can't just do **removeChild(resultTextNode)** because **resultTextNode** is now a different value.

We have a few options. We can save the old value to another variable that we set at some point so that way we can reference it when the time comes. However, we can also simply reference the old value as **resultEl.firstChild** since that's what we want to remove.

We end up with a funky little snippet of code that looks about like this:

```
resultTextNode = document.createTextNode(result);

if (resultEl.firstChild) {
  resultEl.removeChild(resultEl.firstChild);
}

resultEl.appendChild(resultTextNode);
```

Now you should be able to go back and test again and see that the result is successfully cleared each round.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9s5douenqsiijid29pnp.png)

## That's It
And that's it. That's the whole tutorial. It's a lot of words for just a little bit of code, but that's what programming is all about. Taking something complicated and making something simple with it. Hopefully this gives a bit of understanding on how **HTML** and **JavaScript** work together to make web pages and applications function, and how the two can work together to create interesting experiences for a user, or in our case, player.

Below I'll include the full **HTML** and **JavaScript** code in case you missed anything or something about your code just isn't working right and you need to compare it with the finished product. Now that you have something functional, why not improve it. Change the inputs, add some CSS to the mix, add new options, anything you want to do. The best way to learn is to explore and try to find what's possible!

## HTML
```
<html>
<head>
</head>

<body>
  <form>
    <label for="player1">Player 1: </label>
  		<select id="player1">
        <option value="Rock">Rock</option>
        <option value="Paper">Paper</option>
        <option value="Scissors">Scissors</option>
  	  </select>
      <br>
      <br>
    <label for="player2">Player 2: </label>
  		<select id="player2">
        <option value="Rock">Rock</option>
        <option value="Paper">Paper</option>
        <option value="Scissors">Scissors</option>
  	  </select>
      <br>
      <br>
  	<input type="button" value="Shoot!" onclick="playGame();">
  </form>
  <h2 id="resultEl"></h2>
	<script type="text/javascript" src="tmp.js"></script>
</body>
</html>
```

## JavaScript
```
function playGame(){
  let player1 = document.getElementById('player1').value;
  let player2 = document.getElementById('player2').value;
  let resultEl = document.getElementById('resultEl');
  let resultTextNode;
  let result = '';

  if (player1 == player2) {
    result = 'Tie!';
  } else if (player1 == 'Rock' && player2 == 'Scissors') {
    result = 'Player 1 Wins!';
  } else if (player1 == 'Paper' && player2 == 'Rock') {
    result = 'Player 1 Wins!';
  } else if (player1 == 'Scissors' && player2 == 'Paper') {
    result = 'Player 1 Wins!';
  } else {
    result = 'Player 2 Wins!';
  }

  resultTextNode = document.createTextNode(result);

  if (resultEl.firstChild) {
    resultEl.removeChild(resultEl.firstChild);
  }

  resultEl.appendChild(resultTextNode);
}
```