使用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>