CODEWITHSUNDEEP
javascripthtml
Kevin O'Neill
Kevin O'Neill

Reputation: 33

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

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.

Upvotes: 0

Views: 892

Answers (2)

Chase
Chase

Reputation: 3126

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>

Upvotes: 0

Barmar
Barmar

Reputation: 781935

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.

Upvotes: 1

Related Questions