使用javascript / html格式查找最长的单词

Question

I tried to run the code but nothing is showing on my page. i'm not sure where the mistakes are. I tried typing javaScript code to find the longest word in a html form/input,then showing the output on the html body.

 function fnLongestWord(string){ var words = str.split(" "); console.log(words); var findlongest=document.forms["Longestword"], var longest = ""; for(let i=0; i < findlongest.length; i++){ console.log(findlongest[i]); } if ( longest.length > findlongest.length) findlongest = longest; } console.log(longest); document.getElementById("showResult1") = "Number of vowels: "+ longest; 

 <div id="LongWord" class="Tab"> <form id="Longestword"> <label>Enter text: <input name="text "></label> <button type="button" onclick="fnLongestWord()"> Find longest word</button> </form> <!--here the output show--> <p id="showResult1"></p> </div> 

Answer 1

Errors ;Here you are calling fnLongestWord but not passing any argument while fnLongestWord expects a value

var words = str.split(" "); str is no where defined inside the function

You need to put this line document.getElementById("showResult1") = "Number of vowels: "+ longest; inside the function and this is an invalid assingment. You need to use innerHTML and assign the value to it

 function fnLongestWord(string) { var str = document.getElementById('input').value || string var words = str.split(" "); var longest = words.sort((a, b) => { return b.length - a.length; }) document.getElementById("showResult1").innerHTML = "Number of vowels: " + longest[0]; } 

 <div id="LongWord" class="Tab"> <form id="Longestword"> <label>Enter text: <input id = 'input' name="text "></label> <button type="button" onclick="fnLongestWord()"> Find longest word</button> </form> <!--here the output show--> <p id="showResult1"></p> </div> 

Answer 2

You've got a few mistakes in your code that need fixing.

Firstly, you call fnLongestWord() when you click the button, thus you are not passing in the string from the form. You need to get the string from the form by using:

var str = document.getElementById('longestWord').value;

This will get the value (the text) of the element with the id longestWord . This will get the text from the textbox (as I've given it the id="longestWord" )

Now you want to loop over your array of words . You can use words.length in the for loop to do this.

Next, you want to fix your if statement. Currently your syntax and logic are incorrect. Instead, you need to make it if(longest.length < words[i].length) longest = words[i]; which reads that if the longest word currently found is smaller than our current word, set the new longest word equal to the current word ( word[i] ).

Lastly, you're not adding the answer to the page correctly. Instead, you should do:

document.getElementById("showResult1").textContent += "Longest word is: " + longest;

To set the longest word into the showResult1 paragraph.

See working example below:

 function fnLongestWord() { var str = document.getElementById('longestWord').value; var words = str.split(" "); var longest = ""; for (let i = 0; i < words.length; i++) { if (longest.length < words[i].length) longest = words[i]; } document.getElementById("showResult1").textContent += "Longest word is: " + longest; } 

 <div id="LongWord" class="Tab"> <form id="Longestword"> <label>Enter text: <input id="longestWord" name="text "></label> <button type="button" onclick="fnLongestWord()"> Find longest word</button> </form> <!--here the output show--> <p id="showResult1"></p> </div>