Unsure why my math min function is not working but math max function is in script code

Question

function selectHighestNumber() 
    {
        var valueFirstNumber;
        var valueSecondNumber;
        var valueThirdNumber;
        var selectMaxNumber;

        valueFirstNumber = document.getElementById("txtFirstNumberValue").value;
        valueSecondNumber = document.getElementById("txtSecondNumberValue").value;
        valueThirdNumber = document.getElementById("txtThirdNumberValue").value;
        selectMaxNumber = Math.max(valueFirstNumber, valueSecondNumber, valueThirdNumber);
        document.getElementById("selectRankingNumbersResults").innerHTML = selectMaxNumber;
}
function selectLowestNumber() 
    {
        var valueFirstNumber;
        var valueSecondNumber;
        var valueThirdNumber;
        var selectMinNumber;

        valueFirstNumber = document.getElementById("txtFirstNumberValue").value;
        valueSecondNumber = document.getElementById("txtSecondNumberValue").value;
        valueThirdNumber = document.getElementById("txtThirdNumberValue").value;
        selectMinNumber = Math.min(+valueFirstNumber, +valueSecondNumber, +valueThirdNumber);
        document.getElementById("selectRankingNumbersResults").innerHTML = selectMinNumber;
}

<main class="fancy-border">
    <form id="userNumberEntry">
        <p><label for="txtFirstNumberValue">Enter your first number here:</label>
        <input type="text"  id="txtFirstNumberValue"  maxlength="20"  size="20"></p>
        <p><label for="txtSecondNumberValue">Enter your second number here:</label>
        <input type="text"  id="txtSecondNumberValue"  maxlength="20"  size="20"></p>
        <p><label for="txtThirdNumberValue">Enter your third number here:</label>
        <input type="text"  id="txtThirdNumberValue"  maxlength="20"  size="20"></p>
        <p><input type="button"    
                  value="Find the highest number"  
                  id="btnSubmit"   
                  onclick="selectHighestNumber();">
        </p>
        <p><input type="button"    
                  value="Find the lowest number"  
                  id="btnSubmit"
                  onlick="selectLowestNumber();">
        </p>
        <br>
        <div id="selectRankingNumbersResults">
        </div> <!--end of selectRankingNumberValues div-->
    </form>
</main>

So very recently I came into a problem in my script where I was unsure why my Math min function was not working. I asked about that issue in a previous question and found that a spelling error was causing one of my functions to not work. Essentially, I have two functions, a math min, and a math max, both serving similar purposes. I am working in Html code, and use a script for my functions within my Html document. The purpose of this math min and math max function is that I have three text boxes to input numbers into, there are two buttons that will either serve to show the highest or lowest of these three values. My math max function works fine and shows the highest value, however, my math min function does not. It does not return any value at all. I have cross-checked my code to see if it was misspelled, spacing errors, or other mismatched words with the rest of my code but none of it seems to be the problem. This is how my math max and math min functions in my script look respectively.

function selectHighestNumber() 
  {
    var valueFirstNumber;
    var valueSecondNumber;
    var valueThirdNumber;
    var selectMaxNumber;

    valueFirstNumber = document.getElementById("txtFirstNumberValue") 
    .value;
    valueSecondNumber = document.getElementById("txtSecondNumberValue") 
    .value;
    valueThirdNumber = document.getElementById("txtThirdNumberValue") 
    .value;
    selectMaxNumber = Math.max(valueFirstNumber, valueSecondNumber, 
    valueThirdNumber);
    document.getElementById("selectRankingNumbersResults").innerHTML = 
    selectMaxNumber;
}

function selectLowestNumber() 
   {
    var valueFirstNumber;
    var valueSecondNumber;
    var valueThirdNumber;
    var selectMinNumber;
   
    valueFirstNumber = document.getElementById("txtFirstNumberValue") 
    .value;
    valueSecondNumber = document.getElementById("txtSecondNumberValue") 
    .value;
    valueThirdNumber = document.getElementById("txtThirdNumberValue") 
    .value;
    selectMinNumber = Math.min(valueFirstNumber, valueSecondNumber, 
    valueThirdNumber);
    document.getElementById("selectRankingNumbersResults").innerHTML = 
    selectMinNumber;
}

If anyone could help me understand where I might be going wrong, that would be greatly appreciated! I am very confused about what I could have coded wrong, so any insight/outlook is greatly appreciated!

Answer 1

Math.max and Math.min will return the largest/smallest value (or -Infinity/Infinity if no values are supplied) and then convert to a number if they're not already, this means that strings will first be compared as strings and not numbers ("123" > "3"), so you should first convert each value to a number.

Also I recommend batching up the whole process instead of getting each element separately, reading its value, converting it to a number, checking it's valid, passing it to the function. So try to do the whole thing in a loop of some sort.

document.querySelector("form").addEventListener("submit", function(event) {
  event.preventDefault();
  console.log("Max:" + getEdgeCase(true));
  console.log("Min:" + getEdgeCase(false));
});

function getEdgeCase(flag) {
  // get all the inputs in one go and convert them to an array
  var inputList = [].slice.call(document.querySelectorAll("form input[type=\"number\"]"));
  var inputList = inputList.map(function(input) {
    // convert to number, if it's not a valid number and ends up as NaN then return 0
    return +input.value || 0;
  });
  // get the right function and call apply (spreads an array into arguments)
  return Math[flag ? "max" : "min"].apply(Math, inputList);
}

<form>
  <input type="number" />
  <input type="number" />
  <input type="number" />
  <input type="submit" />
</form>