Function output of JavaScript function not showing in html-CodePudding

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>

CodePudding user response：

From what I understand is that you want to display the output of the JavaScript function inside an HTML element so that it is displayed in the browser? If so, then the following is what you can do.

Keep in mind that the JavaScript can exist both (either) in the head and the body element. Just know how the browser builds up the page and what that means for your code.

JavaScript

function someFunction() {
    return 'Hello from some.js';
}
console.log(someFunction()); // output in console

const outputElement = document.getElementById('output');
outputElement.innerText = someFunction(); // output in HTML

HTML

<!DOCTYPE html>
<html>
    <body>
        <div id="output"></div>
        <script src="some.js"></script>
    </body>
</html>

CodePudding user response：

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>