Hi there,
Ok, let’s start over 
Let’s take a skeleton HTML document:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style></style>
</head>
<body>
<script>
</script>
</body>
</html>
Notice the correct position of the <script> tags, just before the closing </body> tag.
The first thing you are trying to do is have a button and make it do something when you click it.
You shouldn’t do this with inline JavaScript, rather by using the addEventListener method.
element.addEventListener(<event-name>, <callback>, <use-capture>);
You should name your callback something useful. “myFunction” is not a good name, as it gives no indication as to what the function is doing.
This gives us this:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style></style>
</head>
<body>
<button id="myButton">Try it</button>
<script>
function addTwoNumbers(){
// Do your arithmetic here
}
var button = document.getElementById("myButton");
button.addEventListener('click', addTwoNumbers, false);
</script>
</body>
</html>
So, it seems you want to have the user input two numbers and do something with them.
As felgall rightly points out, the use of the prompt method is a little dated, but let’s stick with it anyway.
var nr1 = prompt("Please enter number","first number"),
nr2 = prompt("Please enter a second number","second number");
Note you only need to use the var keyword once. You separate consecutive assignments with a comma.
Now, let’s calculate the result and give it a sensible name (not x).
Also, use the Number() method to convert string values to an integer.
var result = Number(nr1) + Number(nr2);
Okay, now we have that, let’s add a container for our results to the page, then get a reference to it:
<div id="result"></div>
var resultDiv = document.getElementById("result");
Now we can do what we want with the calculation.
Let’s make number one blue, number two red, the result green and display everything on a seperate line:
We can do this in a number of ways, for example:
var nr1Div = "<div class='blue'>First number: " + nr1 + "</div>",
nr2Div = "<div class='red'>Second number: " + nr2 + "</div>",
resDiv = "<div class='green'>Result: " + result + "</div>";
resultDiv.innerHTML = nr1Div + nr2Div + resDiv;
By using a block level element (divs), we can ensure that each is rendered on a new line.
You could also have added <br> tags manually.
resultDiv.innerHTML = "This is some text" + "<br />" + "with a line break";
Then we just have to add the CSS:
.blue{ color: blue;}
.red{ color: red;}
.green{ color: green;}
And that’s it
Here’s the code:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Add two numbers</title>
<style>
.blue{ color: blue;}
.red{ color: red;}
.green{ color: green;}
</style>
</head>
<body>
<button id="myButton">Try it</button>
<div id="result"></div>
<script>
function addTwoNumbers(){
var nr1 = prompt("Please enter number","first number"),
nr2 = prompt("Please enter a second number","second number"),
result = Number(nr1) + Number(nr2),
nr1Div = "<div class='blue'>First number: " + nr1 + "</div>",
nr2Div = "<div class='red'>Second number: " + nr2 + "</div>",
resDiv = "<div class='green'>Result: " + result + "</div>";
resultDiv.innerHTML = nr1Div + nr2Div + resDiv;
}
var button = document.getElementById("myButton"),
resultDiv = document.getElementById("result");
button.addEventListener('click', addTwoNumbers, false);
</script>
</body>
</html>