найти самое длинное слово, используя форму 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(), когда нажимаете кнопку, поэтому вы не передаете строку из формы.Вам нужно получить строку из формы, используя:

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>

Answer 2

                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 кнопки ничего не возвращают

даже если вы получаете форму по идентификатору (LongWord), но она не вернет входные данные, которые вы должны извлечь, по элементу и значению

Answer 3

Ошибки ; Здесь вы вызываете 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>