Is there a way to pass two arguments to a JavaScript function through HTML?

Question

I am trying to create an .html page that will allow for two string inputs (arguments) to be passed to the parameters of a .js function that will then return the longer of the 2 input values by comparing the string lengths.

First I wrote a .js that actually works while running it through VS CODE. Here it is:

function twoStrings(stringA, stringB) {
    let longerStr;
    if (stringA.length > stringB.length) {
        return longerStr = stringA;
    } else return longerStr = stringB;
}
console.log(twoStrings("three", "Baseball"))

Then I tried to create an .html file that will create the user interface. But I think there is an issue that at the end of each input line it is calling the function.

<!DOCTYPE html>

<head>

    <title>Return Longest String.html</title>

</head>

<body>

    <p>Please input two words:</p>

    <input type="string" id="myInput1" oninput="twoStrings()">
    <input type="string" id="myInput2" oninput="twoStrings()">

    <p id="longerStr"> is the longer word</p>

    <script type="text/javascript" src="twoStringsV1.js"></script>
</body>

</html>

and here is my .js

// 3. Write a function that takes in two strings and returns the longer of the two

function twoStrings(fval, sval) {
    var fval = document.getElementById("myInput1").value;
    var sval = document.getElementById("myInput2").value;
    let longerStr;
    if (fval.length > sval.length) {
        return longerStr = fval;
    } else return longerStr = sval;
}
document.getElementById("longerStr").innerHTML = longerStr;

One other thing is that at the end of my .html, where I am asking the .js to produce an innerHTML I am getting this line:

[object HTMLParagraphElement]

Thank you for your assistance.

If the function is assigning the variables itself, they don't need to be parameters. — Barmar
– Barmar, Commented Aug 30, 2020 at 17:56

Barmar · Accepted Answer · 2020-08-30 17:59:02Z

1

Get rid of the return statements, and put the assignment to innerHTML inside the function.

The function doesn't need any parameters, it gets the values of the two inputs itself.

function twoStrings() {
  var fval = document.getElementById("myInput1").value;
  var sval = document.getElementById("myInput2").value;
  let longerStr;
  if (fval.length > sval.length) {
    longerStr = fval;
  } else {
    longerStr = sval;
  }
  document.getElementById("longerStr").innerHTML = longerStr;
}

<p>Please input two words:</p>

<input type="string" id="myInput1" oninput="twoStrings()">
<input type="string" id="myInput2" oninput="twoStrings()">

<p id="longerStr"> is the longer word</p>

The reason you were getting [object HTMLParagraphElement] is because outside the function, the global variable longerStr refers to the element <p id="longerStr">; converting an object to a string produces a result like that.

answered Aug 30, 2020 at 17:59

Barmar

789k57 gold badges555 silver badges669 bronze badges

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

1 Comment

Kevin O'Neill Over a year ago

Thank you for that clarification. I also realized I needed to append my innerHTML line to: document.getElementById("longerStr").innerHTML = longerStr + " is the longer word."; to get the string "is the longer word" to print. I know minor but important.

Chase · Accepted Answer · 2020-08-30 18:13:57Z

There are some opportunities to use some more native elements:

<input type="string" is not valid. type="text" is a valid type but is also the default and can be omitted.
<output> would be a good fit for the computed result of a form calculation
It would be simpler to handle the input event at a higher level (the overall form) rather than twice for each input and have the function bound to explicit inputs internally.
You can also rely on the fact that elements specified with id=x are globally available on window as x to simply your inline handlers.

function longerStr(stringA, stringB) {
  return stringA.length > stringB.length
    ? stringA
    : stringB;
}

<!DOCTYPE html>
<html>
  <head>
    <title>Return Longest String.html</title>
  </head>
  <body>
    <p>Please input two words:</p>

    <form oninput="longerStrOut.value=longerStr(myInput1.value, myInput2.value)">
      <input id="myInput1">
      <input id="myInput2">
      <p>
        <output name="longerStrOut"></output>
        is the longer word
      </p>
    </form>
  </body>
</html>

Collectives™ on Stack Overflow

Is there a way to pass two arguments to a JavaScript function through HTML?

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related