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

Question

我试图运行代码，但是页面上没有任何显示。 我不确定错误在哪里。 我尝试键入javaScript代码以在html表单/输入中找到最长的单词，然后在html正文上显示输出。

 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

错误；在这里您正在调用fnLongestWord ，但未传递任何参数，而fnLongestWord需要一个值

var words = str.split(" "); str在函数内部没有定义的地方

您需要把这一行document.getElementById("showResult1") = "Number of vowels: "+ longest; 在函数内部，这是无效的提示。 您需要使用innerHTML并为其分配值

 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

您的代码中有一些错误需要修复。

首先，您在单击按钮时调用fnLongestWord() ，因此您没有从表单中传递字符串。 您需要使用以下方法从表单中获取字符串：

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

这将获取id longestWord的元素的value （文本）。 这将从文本框中获取文本（因为我给了它id="longestWord" ）

现在，您要遍历words数组。 您可以在for循环中使用words.length来执行此操作。

接下来，您要修复if语句。 当前，您的语法和逻辑不正确。 相反，您需要使其成为if(longest.length < words[i].length) longest = words[i]; 读取结果是，如果当前找到的最长单词小于当前单词，则将新的最长单词设置为等于当前单词（ word[i] ）。

最后，您没有将答案正确添加到页面中。 相反，您应该执行以下操作：

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

在showResult1段落中设置最长的单词。

请参见下面的工作示例：

 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>