'Function output of JavaScript function not showing in html

The Javascript code is working but I don't know how I can make it work in HTML. I want to link it to an external Javascript file.

 function find_longest_string(input_array) {

  var large = input_array[0].length;     //storing the length of each word in the variable large
  input_array.map(var_new => large = Math.max(large, var_new.length)); //used map to check the largest word
  answer = input_array.filter(var_new => var_new.length == large);    //storing the words which are larger

  return answer[0]; //displaying the first largest word
}

console.log(find_longest_string(['mystery', 'brother', 'aviator','crocodile','pearl','orchard','crackpott']))

HTML code:

<!DOCTYPE html>
<html>
    <body>
    <script src="findLongestWord.js"></script>
    </body>
</html>
javascripthtml


Solution 1:[1]

I believe you want to print or display the output of that function on the web page.

If that's the case. There are various ways to accomplish this.

Before I go any further, I'd want to point out that you are, in fact, printing something, which is what you intended for your function. But you can't see it since it's printed in the console. You may view this by using the F12 key after loading your website. The console will then appear, and the needed output will be printed.

And here's one method for displaying your output in an HTML page.

You just have to replace your console.log() with the document.write().

 function find_longest_string(input_array) {

  var large = input_array[0].length;     //storing the length of each word in the variable large
  input_array.map(var_new => large = Math.max(large, var_new.length)); //used map to check the largest word
  answer = input_array.filter(var_new => var_new.length == large);    //storing the words which are larger

  return answer[0]; //displaying the first largest word
}

document.write(find_longest_string(['mystery', 'brother', 'aviator','crocodile','pearl','orchard','crackpott']))
<!DOCTYPE html>
<html>
    <body>
    <script src="findLongestWord.js"></script>
    </body>
</html>

Here is another method to achieve this. You can add an html element and change the content of that particular element by using document.getElementById("id name of the element").innerHTML.

Here is the code snippet.

function find_longest_string(input_array) {

  var large = input_array[0].length;     //storing the length of each word in the variable large
  input_array.map(var_new => large = Math.max(large, var_new.length)); //used map to check the largest word
  answer = input_array.filter(var_new => var_new.length == large);    //storing the words which are larger

  return answer[0]; //displaying the first largest word
}
const largest_word = find_longest_string(['mystery', 'brother', 'aviator','crocodile','pearl','orchard','crackpott']);

document.getElementById("demo").innerHTML =largest_word
<!DOCTYPE html>
<html>
    <body>
    <p id="demo"></p>
    <script src="findLongestWord.js"></script>
    </body>
</html>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1

Related Questions