Program that finds the greatest out of 3 numbers

Question

Experiencing an issue with a program that finds the greatest out of three numbers and displays it. I think that I don't link the two files properly. Can somebody point out what I'm doing wrong and why it doesn't work? Thanks in advance. The code is written in two separate files - .html and .js.

The code:

let pressedKey = getElementById("button");
pressedKey.addEventListener("click"function() {

  let num1 = Number(document.getElementById("num1").value);
  let num2 = Number(document.getElementById("num2").value);
  let num3 = Number(document.getElementById("num3").value);

  if (num1 > num2 && num1 > num3) {

    window.alert(num1 + " is the greatest!");

  } else if (num2 > num1 && num2 > num3) {

    window.alert(num2 + " is the greatest!");

  } else {

    window.alert(num3 + " is the greatest!");

  }

});

<html>

<head>
  <meta charset="UTF-8">
  <title>Greatest number of 3.</title>
</head>

<body>
  <h1>Calculate the greatest of three numbers!</h1>
  <hr color="cyan">
  <br> Enter number one: <input type="text" id="num1"></input><br> Enter number two: <input type="text" id="num2"></input><br> Enter number three: <input type="text" id="num3"></input><br>
  <hr color="cyan">
  <button id="button">OK</button>

  <script src="greatestNumber.js"></script>

</body>

</html>

If you open your browser console you'll see a syntax error reported. You're missing a comma in the `.addEventListener()` call. — Pointy, Dec 19 '19 at 15:51
Man, thanks. Just saw that I missed to write document.getElementById.... Thanks a lot! — Lubak, Dec 19 '19 at 15:56

Word Rearranger · Answer 1 · 2019-12-19T16:00:33.867

You are using getElementById alone. You need to call it from document. So: document.getElementById. Also, in your pressedKey.addEventListener you are missing a comma. Finally, in your html, you are closing your input elements with </input>. input is a void element and does not need a closing tag. See this post for more details: https://stackoverflow.com/a/13232170/7919626

You can find these errors yourself using the developer tool(F12) on any browser. I would suggest you learn how to use them to find the errors easily next time.

Here's the final working solution:

let pressedKey = document.getElementById("button");
pressedKey.addEventListener("click", function() {

  let num1 = Number(document.getElementById("num1").value);
  let num2 = Number(document.getElementById("num2").value);
  let num3 = Number(document.getElementById("num3").value);

  if (num1 > num2 && num1 > num3) {

    window.alert(num1 + " is the greatest!");

  } else if (num2 > num1 && num2 > num3) {

    window.alert(num2 + " is the greatest!");

  } else {

    window.alert(num3 + " is the greatest!");

  }

});

<html>

<head>
  <meta charset="UTF-8">
  <title>Greatest number of 3.</title>
</head>

<body>
  <h1>Calculate the greatest of three numbers!</h1>
  <hr color="cyan">
  <br> Enter number one: <input type="text" id="num1" /><br> Enter number two: <input type="text" id="num2" /><br> Enter number three: <input type="text" id="num3" /><br>
  <hr color="cyan">
  <button id="button">OK</button>

  <script src="greatestNumber.js"></script>

</body>

</html>

score -1 · Answer 2 · answered Dec 19 '19 at 16:06

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Greatest number of 3.</title>
        <div id="numberList"></div>
    </head>

    <body>
        <h1>Calculate the greatest of three numbers!</h1>
        <hr color="cyan">
        <br>
        Enter number one: <input class='num' type="text" id="num1"></input><br>
        Enter number two: <input class='num' type="text" id="num2"></input><br>
        Enter number three: <input class='num' type="text" id="num3"></input><br>
        <hr color="cyan">
        <button id="button">OK</button>
    </body>
    <script>
        let pressedKey = document.getElementById("button");
        pressedKey.addEventListener("click", function(){
            let numElements = document.getElementsByClassName('num');
            let nums = [];
            for(var i = 0; i < numElements.length; i++) {
                nums[i] = numElements[i].value;
            }

            console.log(nums.sort(function(a, b){return b-a}));
        });
    </script>
</html>

Doesn't answer the question at all – DavidB Dec 19 '19 at 17:13 — DavidB, Dec 19 '19 at 17:13

Program that finds the greatest out of 3 numbers

2 Answers2