Beginner question, I am currently learning JS and I'm trying to write a function that will take a text input from a simple html form. I can't figure out how to pass the text input into the function. This is what I am currently trying:
<html>
<body>
<script type = "text/javascript">
<!--
var myColor = document.getElementById("textbox").value;
function findColor(){
switch(myColor){
case "Blue":
document.write("just like the sky!");
break
case "Red":
document.write("Just like wine!");
break
default:
document.write("Suit yourself then...");
}
}
//-->
</script>
<form>
Colour <input type="text" name="inputform" id="textbox" value="">
<input type="submit" value="Submit" onclick="findColor();">
</form>
</body>
</html>
Thanks, any help appreciated.
Beginner question, I am currently learning JS and I'm trying to write a function that will take a text input from a simple html form. I can't figure out how to pass the text input into the function. This is what I am currently trying:
<html>
<body>
<script type = "text/javascript">
<!--
var myColor = document.getElementById("textbox").value;
function findColor(){
switch(myColor){
case "Blue":
document.write("just like the sky!");
break
case "Red":
document.write("Just like wine!");
break
default:
document.write("Suit yourself then...");
}
}
//-->
</script>
<form>
Colour <input type="text" name="inputform" id="textbox" value="">
<input type="submit" value="Submit" onclick="findColor();">
</form>
</body>
</html>
Thanks, any help appreciated.
Share Improve this question asked Aug 14, 2013 at 12:31 XochiXochi 591 gold badge1 silver badge9 bronze badges4 Answers
Reset to default 4Put this line:
var myColor = document.getElementById("textbox").value;
Inside the findColor function:
function findColor(){
var myColor = document.getElementById("textbox").value;
switch(myColor){ //...
I'm with David's answer. You are using a form and you need to prevent default submission event like below by pasing a event parameter to the function as shown in the below code.
function findColor(e){ // e is a event parameter passed
e.preventDefault();
var myColor = document.getElementById("textbox").value;
switch(myColor){
case "Blue":
document.write("just like the sky!");
break
case "Red":
document.write("Just like wine!");
break
default:
document.write("Suit yourself then...");
}
return false;
}
and in html,
<input type="submit" value="Submit" onclick="findColor(event);">
As you can see I'm passing event like this findColor(event) in html
And a suggestion :
read about the document.write here and see a demo here the author explained it very neatly as
The use of document.write where native DOM alternatives such as document.createElement are more appropriate. document.write has been grossly misused over the years and has quite a few disadvantages including that if it's executed after the page has been loaded it can actually overwrite the page we're on, whilst document.createElement does not. We can see here for a live example of this in action. It also doesn't work with XHTML which is another reason opting for more DOM-friendly methods such as document.createElement is favorable.
Or to pass it to the function do this:
<input type="submit" value="Submit" onclick="findColor('Blue');">
function findColor(myColor){
switch(myColor){
case "Blue":
document.write("just like the sky!");
break
case "Red":
document.write("Just like wine!");
break
default:
document.write("Suit yourself then...");
}
}
when the browser reads your html page it interprets the javascript section thus defining your findColor function and executing the line
var myColor = document.getElementById("textbox").value;
Therefor myColor receives the initial value of your textbox element. By the time the page is fully loaded and you enter a value in the textbox the myColor assignment is already done. To make sure that the assignment is done at the right time, after clicking submit, aka when the findColor functiom is called, you have the two options mentioned above: Make the assignemt the first statement in your findColor function OR make it a parameter to the findColor function
There is a second flaw in this example. A form's submit triggers reloading of an HTML page. Therefore you never see the result of your findColor function. A better way to play with Javascript is to tie functions to buttons. See the revised html below.
I trust you have seen the w3school JavaScript tutorials http://www.w3schools./js/. Have a look at http://wwwmagazine./tutorials/javascript-debugging-beginners.
<html>
<body>
<script type = "text/javascript">
function findColor(myColor){
output = document.getElementById('output');
switch(myColor){
case "Blue":
output.innerHTML = "Just like the sky";
break
case "Red":
output.innerHTML = "Just like the wine";
break
default:
output.innerHTML ="Suit yourself then...";
}
}
</script>
<form>
Colour <input type="text" name="inputform" id="textbox" value="">
</form>
<button type="button" onclick="findColor(document.getElementById('textbox').value);"> FindColor </button>
</form>
<div id="output"> what I think of this color </div>
</body>
</html>