Input text form value from HTML into Javascript function
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:
4 Answers 4
var myColor = document.getElementById("textbox").value; Inside the findColor function:
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; > As you can see I’m passing event like this findColor(event) in html
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:
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. "); >> This would work, its an example of how to pass something to a function, which was the question. Its an alternative to the other answers with the intention of helping a JavaScript beginner.
not trying to ruffle your feathers 🙂 I changed it from would to could work as I wasnt sure about hardcoding the onclick value. If I was going to post this sample I would do it as onclick=»findColor(document.getElementById(‘textbox’).value);» so it worked based on the input. But also I wouldn’t use onclick at all . But also I would use jquery so that will probably upset people anyway haha
No worries, your way is better, and Andrews is even better, it was just a simply example of how to pass data to a function. Jquery is deffo better
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.
what I think of this color