how to link html form input to javascript function and showing the output [duplicate]

Question

I really lost and don't know what to do. I tried to link the html form in put to a java-script function.

but the problem is I do not know my steps are correct or not. the other thing is how I can show the output on the page.

function fnCountVowels(string) {
  var getinput = document.getElementsbyid("Vowel1");
  console.log(Vowel1.value);

  for (i = 0 < getinput.length; i++) {
    chr = getinput.charat(i);

    if (Chr == "a" || (chr == "e") || (chr == "i") || (chr == "o") || (chr == "u")) {
      getinput = getinput + 1;
    }
  }

  return getinput;
}

<div id="Vowel" class="Tab">
  <form action=""  id="form" onsubmit="fnCountVowels(string)">
    Enter String: <br>
    <input id="Vowel1" type="text" name="Enter the string "><br><br>
    <button type="submit" onclick"fnCountVowels(string)">Click</button>
  </form>

Please lay out your code so that it is readable. Remove the redundant blank lines and make the indents sensible. — Dragonthoughts
– Dragonthoughts, Commented Nov 16, 2018 at 12:53
Is there a specific question here beyond “My code doesn’t work, please help”? — MTCoster
– MTCoster, Commented Nov 16, 2018 at 13:03

Gerd Wagner · Accepted Answer · 2018-11-16 13:42:19Z

-1

Here is a solution based on your code, but simplifying and "modernizing" it a bit:

function countVowels() {
  var text = document.forms["CountVowels"].text.value,
  nmrOfVowels = 0;
  console.log( text);
  for (let i=0; i < text.length; i++) {
let char = text.charAt(i);
if ("aeiou".includes( char)) {
  nmrOfVowels = nmrOfVowels + 1;
}
  }
  console.log("Number of vowels: ", nmrOfVowels);
  document.getElementById("showResult").textContent = "Number of vowels: "+ nmrOfVowels;
}

<form id="CountVowels">	
  <label>Enter text: <input name="text"/></label>
  <button type="button" onclick="countVowels()">Count vowels</button>
</form>
<p id="showResult"></p>

edited Nov 16, 2018 at 13:42

answered Nov 16, 2018 at 13:17

Gerd Wagner

5,6931 gold badge25 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Hary · Accepted Answer · 2018-11-16 13:39:43Z

-1

Try this below,

function fnCountVowels()
{
  var vowelCount = 0;
  var vowels = [];
  var getinput = document.getElementById("Vowel1").value;
 
  for (var i = 0; i < getinput.length; i++) 
  {
	  chr = getinput.charAt(i);
    
    if (chr == "a" || (chr == "e") || (chr == "i") || (chr == "o") || (chr == "u"))
    {
        vowelCount += 1;
        vowels.push(chr);
    }
  }

console.log("Input: " + getinput);
console.log("Vowels Count: " + vowelCount);
console.log("Vowels: " + vowels);
}

<div id="Vowel" class="Tab">

<form>
	
Enter String: <br>
<input id="Vowel1" type="text" name="Enter the string "> <br><br>

	<button type="button" onclick="fnCountVowels()"> Click </button>
	

</form>

</div>

edited Nov 16, 2018 at 13:39

answered Nov 16, 2018 at 13:03

Hary

5,8368 gold badges49 silver badges91 bronze badges

3 Comments

Gerd Wagner Over a year ago

Notice that using varin a code block (like in for (var i = 0;...) is a code smell since it suggests that a block-scope variable is declared, which is not the case!

Gerd Wagner Over a year ago

For adding an element to the end of an array, we use push. Consequently, you should code vowels.push( chr)!

Hary Over a year ago

Agree! Just added it the basic way for understanding.. However, modified now!

Collectives™ on Stack Overflow

how to link html form input to javascript function and showing the output [duplicate]

2 Answers 2

Comments

3 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Linked

Related