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

标签： javascripthtmlforms

Answer 1

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

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

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

这将获得value带有id longestWord. 这将从文本框中获取文本（因为我已经给它了id="longestWord"）

现在你想循环你的words. 您可以words.length在 for 循环中使用来执行此操作。

接下来，您要修正您的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>