how to link html form input to javascript function and showing the output [duplicate]
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}
This question already has an answer here:
Display javascript variable in html body
4 answers
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>
javascript html forms
marked as duplicate by Quentin
StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;
$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');
$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
Nov 16 '18 at 13:20
This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
add a comment |
This question already has an answer here:
Display javascript variable in html body
4 answers
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>
javascript html forms
marked as duplicate by Quentin
StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;
$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');
$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
Nov 16 '18 at 13:20
This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
1
Please lay out your code so that it is readable. Remove the redundant blank lines and make the indents sensible.
– Dragonthoughts
Nov 16 '18 at 12:53
Is there a specific question here beyond “My code doesn’t work, please help”?
– MTCoster
Nov 16 '18 at 13:03
add a comment |
This question already has an answer here:
Display javascript variable in html body
4 answers
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>
javascript html forms
This question already has an answer here:
Display javascript variable in html body
4 answers
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>
This question already has an answer here:
Display javascript variable in html body
4 answers
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>
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>
javascript html forms
javascript html forms
edited Nov 16 '18 at 14:02
Aniruddh Parihar
2,21911129
2,21911129
asked Nov 16 '18 at 12:50
ramady 00ramady 00
102
102
marked as duplicate by Quentin
StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;
$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');
$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
Nov 16 '18 at 13:20
This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
marked as duplicate by Quentin
StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;
$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');
$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
Nov 16 '18 at 13:20
This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
1
Please lay out your code so that it is readable. Remove the redundant blank lines and make the indents sensible.
– Dragonthoughts
Nov 16 '18 at 12:53
Is there a specific question here beyond “My code doesn’t work, please help”?
– MTCoster
Nov 16 '18 at 13:03
add a comment |
1
Please lay out your code so that it is readable. Remove the redundant blank lines and make the indents sensible.
– Dragonthoughts
Nov 16 '18 at 12:53
Is there a specific question here beyond “My code doesn’t work, please help”?
– MTCoster
Nov 16 '18 at 13:03
1
1
Please lay out your code so that it is readable. Remove the redundant blank lines and make the indents sensible.
– Dragonthoughts
Nov 16 '18 at 12:53
Please lay out your code so that it is readable. Remove the redundant blank lines and make the indents sensible.
– Dragonthoughts
Nov 16 '18 at 12:53
Is there a specific question here beyond “My code doesn’t work, please help”?
– MTCoster
Nov 16 '18 at 13:03
Is there a specific question here beyond “My code doesn’t work, please help”?
– MTCoster
Nov 16 '18 at 13:03
add a comment |
2 Answers
2
active
oldest
votes
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>
add a comment |
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>
Notice that usingvar
in a code block (like infor (var i = 0;
...) is a code smell since it suggests that a block-scope variable is declared, which is not the case!
– Gerd Wagner
Nov 16 '18 at 13:34
1
For adding an element to the end of an array, we usepush
. Consequently, you should codevowels.push( chr)
!
– Gerd Wagner
Nov 16 '18 at 13:35
Agree! Just added it the basic way for understanding.. However, modified now!
– mbharanidharan88
Nov 16 '18 at 13:40
add a comment |
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
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>
add a comment |
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>
add a comment |
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>
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>
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>
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 '18 at 13:42
answered Nov 16 '18 at 13:17
Gerd WagnerGerd Wagner
3,17311329
3,17311329
add a comment |
add a comment |
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>
Notice that usingvar
in a code block (like infor (var i = 0;
...) is a code smell since it suggests that a block-scope variable is declared, which is not the case!
– Gerd Wagner
Nov 16 '18 at 13:34
1
For adding an element to the end of an array, we usepush
. Consequently, you should codevowels.push( chr)
!
– Gerd Wagner
Nov 16 '18 at 13:35
Agree! Just added it the basic way for understanding.. However, modified now!
– mbharanidharan88
Nov 16 '18 at 13:40
add a comment |
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>
Notice that usingvar
in a code block (like infor (var i = 0;
...) is a code smell since it suggests that a block-scope variable is declared, which is not the case!
– Gerd Wagner
Nov 16 '18 at 13:34
1
For adding an element to the end of an array, we usepush
. Consequently, you should codevowels.push( chr)
!
– Gerd Wagner
Nov 16 '18 at 13:35
Agree! Just added it the basic way for understanding.. However, modified now!
– mbharanidharan88
Nov 16 '18 at 13:40
add a comment |
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>
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>
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>
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 '18 at 13:39
answered Nov 16 '18 at 13:03
mbharanidharan88mbharanidharan88
4,11542455
4,11542455
Notice that usingvar
in a code block (like infor (var i = 0;
...) is a code smell since it suggests that a block-scope variable is declared, which is not the case!
– Gerd Wagner
Nov 16 '18 at 13:34
1
For adding an element to the end of an array, we usepush
. Consequently, you should codevowels.push( chr)
!
– Gerd Wagner
Nov 16 '18 at 13:35
Agree! Just added it the basic way for understanding.. However, modified now!
– mbharanidharan88
Nov 16 '18 at 13:40
add a comment |
Notice that usingvar
in a code block (like infor (var i = 0;
...) is a code smell since it suggests that a block-scope variable is declared, which is not the case!
– Gerd Wagner
Nov 16 '18 at 13:34
1
For adding an element to the end of an array, we usepush
. Consequently, you should codevowels.push( chr)
!
– Gerd Wagner
Nov 16 '18 at 13:35
Agree! Just added it the basic way for understanding.. However, modified now!
– mbharanidharan88
Nov 16 '18 at 13:40
Notice that using
var
in 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
Nov 16 '18 at 13:34
Notice that using
var
in 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
Nov 16 '18 at 13:34
1
1
For adding an element to the end of an array, we use
push
. Consequently, you should code vowels.push( chr)
!– Gerd Wagner
Nov 16 '18 at 13:35
For adding an element to the end of an array, we use
push
. Consequently, you should code vowels.push( chr)
!– Gerd Wagner
Nov 16 '18 at 13:35
Agree! Just added it the basic way for understanding.. However, modified now!
– mbharanidharan88
Nov 16 '18 at 13:40
Agree! Just added it the basic way for understanding.. However, modified now!
– mbharanidharan88
Nov 16 '18 at 13:40
add a comment |
1
Please lay out your code so that it is readable. Remove the redundant blank lines and make the indents sensible.
– Dragonthoughts
Nov 16 '18 at 12:53
Is there a specific question here beyond “My code doesn’t work, please help”?
– MTCoster
Nov 16 '18 at 13:03