Having issues with passing arguments through function (Javascript)

Question

I'm creating a function using Javascript where the user puts in two integers, and the function will output the smaller of the two integers:

function minimum(num1, num2) {
    var num1 = document.getElementById('input1').value;
    var num2 = document.getElementById('input2').value;

    if(num1 < num2){
        document.getElementById('para').innerHTML = num1;
    }

    else if (num2 < num1){
        document.getElementById('para').innerHTML = num2;
    }

    else {
        document.getElementById('para').innerHTML = "There was something weird about your numbers. Please try again.";
    }

}

body{
    background-color: #A9927D ;
    max-width: 900px;
    min-width: 600px;
}

h1{
    color: #F2F4F3;
    text-align: center;
    font-size: 45px;
}

h3 {
    font-size: 20px;
    color: #F2F4F3;
}

.container{
    text-align: center;
}

.button-container {
    padding: 50px;
}

.bttn{
    height: 50px;
    border-radius: 40px;
    font-size: 20px;
    font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    padding: 30px;
    background-color: #5E503F;
    box-shadow: 2px 2px 2px 2px #312A21;
    color: #F2F4F3;
}

.bttn:hover {


    background-color: #251F18;
}

.bttn:active {
    box-shadow: 0 1px 0px #251F18;

}

.npt {
    height: 40px;
    width: 100px;
}

#para{
    text-align: center;
    margin: auto;
    width: 40%;
    height: 100px;
    border: 1px solid #6E5E49;
    background-color: #9C8568;
    font-size: 20px;
    color:#F2F4F3;
}

    <div class="container">
        <h1>Find the Minimum</h1>
        <h3>by Solange Wright</h2>
        <div class = "button-container">
            <input class = "npt" type="number" id = "input1"><br><br>
            <input class = "npt" type="number" id = "input2"><br><br><br><br>
            <span class = bttn onclick = "minimum(num1, num2)">Find</span>
        </div>

        <p id="para"></p>
    </div>

For some reason, I'm getting an error like this:

How do I define num1? Is it an issue with data types? Does the .value method in Javascript do type coercion, or is there another additional step to make sure the two values are integers?

sbolel · Accepted Answer · 2021-02-20 08:36:24Z

1

You need to pass the id of the input.

Replace

<span class="bttn" onclick="minimum(num1, num2)">Find</span>

with

<span class"bttn" onclick="minimum('input1', 'input2')">Find</span>

edited Feb 20, 2021 at 8:36

sbolel

3,52230 silver badges45 bronze badges

answered Feb 20, 2021 at 8:18

brk

50.3k10 gold badges59 silver badges85 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

KooiInc · Accepted Answer · 2021-02-20 12:52:34Z

It's generally not a good idea to use inline event handlers. You can use one handler for the document and use a generic handler (event delegation). Doing so gives you the possibility to use everything you need within the handler function.

Furthermore, the submitted values have to be checked (do both input have values?) and converted to Number (retrieved input values are always strings).

Finally you can use Math to determine the smallest number in an array of numbers.

This brings us to (removed stuff to present a minimum reproducable example):

document.addEventListener("click", getMinimalValue);
//       ^ add a click listener method document wide

function getMinimalValue(evt) {
  if (evt.target.id === "findSmallest") {
    const numbers = [
        document.querySelector("#input1").value || NaN,
        document.querySelector("#input2").value || NaN
      ]
      // ^ aggregate values into array (assign NaN if no value)
      .map(Number)
      // ^ convert values to Number (NaN will remain NaN)
      .filter(n => !isNaN(n));
      // ^ filter numbers only
    document.querySelector("#para").textContent =
      numbers.length < 2 ?
      //      ^ if not both entered values are numbers
      //        [numbers] array length is < 2
      "You did not enter two numeric values" :
      `Minimum of ${numbers.join(' and ')}: ${Math.min.apply(null, numbers)}`;
  }
}

.npt {
  width: 50px;
  margin-bottom: 5px;
}

<input class="npt" type="number" id="input1">
<input class="npt" type="number" id="input2">
<span id="para"></span>
<br><button id="findSmallest">Find Minimum</button>

4b0 · Accepted Answer · 2021-03-01 04:48:08Z

Remove the minimum parameters in the JS code (and also check if num1 and num2 are numbers)

 function minimum() {
   var num1 = document.getElementById('input1').value;
   var num2 = document.getElementById('input2').value;
   if (Number.isNaN(num1) || Number.isNaN(num2)){
      document.getElementById('para').innerHTML = "please insert valid numbers";
      return;
   }
   if(num1 < num2){
        document.getElementById('para').innerHTML = num1;
    }

    else if (num2 < num1){
        document.getElementById('para').innerHTML = num2;
    } 

    else {
        document.getElementById('para').innerHTML = "There was something weird about your numbers. Please try again.";
    }
 }

Refactor the button onclick not to pass paramters.

 <div class="container">
     <h1>Find the Minimum</h1>
     <h3>by Solange Wright</h2>
     <div class = "button-container">
         <input class = "npt" type="number" id = "input1"><br><br>
         <input class = "npt" type="number" id = "input2"><br><br><br><br>
         <span class = "bttn" onclick = "minimum()">Find</span>
     </div>
     <p id="para"></p>
 </div>

Collectives™ on Stack Overflow

Having issues with passing arguments through function (Javascript)

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related