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;

这将获得带有value id的元素的longestWord（文本）。这将从文本框中获取文本（正如我给的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>

Answer 3

                function fnLongestWord() {
        //   getting the form by id then getting first input value by tagname then index of input then value
        var entered_txt = document.forms['Longestword'].getElementsByTagName(
          'input'
        )[0].value;

        //   to check enterd text
        // console.log(entered_txt)
        // to split each word on the basis on white space
        var words_array = entered_txt.split(' ');

        // to check each word on console
        //   for(let i=0; i < words_array.length; i++){

        //       console.log(words_array[i]);
        //   }
        var longest = words_array.reduce(function(a, b) {
          return a.length > b.length ? a : b;
        });
        //   to see on console
        //   console.log(longest);
        document.getElementById(
          'showResult1'
        ).innerHTML = `the longest word that you entered is <b>${longest}</b>`;
      }

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

这将帮助您根据您的代码，fnLongestWord期望的字符串，但按钮的onclick不返回任何内容

即使您通过id（LongWord）获取表单，但它也不会返回您必须按元素和值检索输入数据的输入数据

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

3 个答案: