HTML/Javascript help? Why are the alert, dialog, and confirm boxes popping up the same message when it's meant to be different in the code?

Question

a1234 · Answer

<!DOCTYPE html>
<html>
<body>
<h2>Alert box.</h2>
<button onclick="myFunction()">
Box 1
</button>
<script>
function myFunction(){
alert("Hi!");
}
</script>
<button onclick="myFunction()">
Box 2
</button>
<script>
<p id="demo"></p>
function myFunction(){
var x;
if (confirm("Which button?") == true){
x = "K!";
}else{
x = "Ok.";
}
document.getElementById("demo").innerHTML = x;
}
</script>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
function myFunction() {
    var person = prompt("Please enter your name", "Harry Potter");
        if (person != null) {
        document.getElementById("demo").innerHTML =
        "Hello " + person + "! How are you today?";
    }
}
</script>
</body>
</html>

woodrow73 · Answer

Imagine all the javascript you wrote being on the same page.

You have 3 functions with the same name, which doesn't work.  Try naming them differently.

a1234 · Answer

How do I do that?

woodrow73 · Answer

Cleaned it up a bit. https://jsfiddle.net/dnpdw8uh/ ```

Alert box.

```

a1234 · Answer

Thanks for your help! I understand much better now.