Javascript - User input through HTML input tag to set a Javascript variable?

Asked 9/3, 2013 at 0:9 Answered 15/1, 2019 at 14:28

I want there to be a textbox on my screen(like the one i'm typing in now) that you can type in then click a submit button and it sends whatever you typed in the box to javascript and javascript prints it out.Here is my code This is the part that works.

<html>
<body>
    <input type="text" id="userInput"=>give me input</input>
    <button onclick="test()">Submit</button>
    <script>
        function test()
        {
            var userInput = document.getElementById("userInput").value;
            document.write(userInput);
        }
    </script>
</body>
</html>

OK so that's nice, but lets say I want input from that textbox and button while I'm already in a function and don't want to restart the function?

Thanks, Jake

Ketcham answered 9/3, 2013 at 0:9 Comment(5)

I really don't get what you're talking about in you last sentence. I mean at all. You're already in a function and don't want to restart it. What is that supposed to mean? – Nitin 9/3, 2013 at 0:12

So that code I have works if I want to initiate a function with it, but I want the submit button to essentially work while a function is already running. What attribute would I add to the button to do that? The current start the "test()" function will not work because I don't want to start the function over. – Ketcham 9/3, 2013 at 0:15

do you mean you want a function that loops waiting for input? that doesn't work in javascript. Other than that, you can use document.getElementById("userInput").value whenever and wherever you like. – Heelpost 9/3, 2013 at 0:20

Do not use document.write it is evil google for innerHTML and reformat your code... – Suspicion 9/3, 2013 at 0:26

Learn to attach event handlers rather than using inline "onclick" definitions. – Bevis 9/3, 2013 at 1:40

When your script is running, it blocks the page from doing anything. You can work around this with one of two ways:

Use var foo = prompt("Give me input");, which will give you the string that the user enters into a popup box (or null if they cancel it)
Split your code into two function - run one function to set up the user interface, then provide the second function as a callback that gets run when the user clicks the button.

Chinaware answered 9/3, 2013 at 0:27 Comment(1)

Thanks, I will just split it up into 2 functions – Ketcham 9/3, 2013 at 0:30

This is bad style, but I'll assume you have a good reason for doing something similar.

<html>
<body>
    <input type="text" id="userInput">give me input</input>
    <button id="submitter">Submit</button>
    <div id="output"></div>
    <script>
        var didClickIt = false;
        document.getElementById("submitter").addEventListener("click",function(){
            // same as onclick, keeps the JS and HTML separate
            didClickIt = true;
        });

        setInterval(function(){
            // this is the closest you get to an infinite loop in JavaScript
            if( didClickIt ) {
                didClickIt = false;
                // document.write causes silly problems, do this instead (or better yet, use a library like jQuery to do this stuff for you)
                var o=document.getElementById("output"),v=document.getElementById("userInput").value;
                if(o.textContent!==undefined){
                    o.textContent=v;
                }else{
                    o.innerText=v;
                }
            }
        },500);
    </script>
</body>
</html>

Heelpost answered 9/3, 2013 at 0:26 Comment(1)

Javascript works best when it's event driven, rather than having a monolithic do-all loop. You should only do this if it's absolutely necessary that things happen in a particular order and you have no other way of enforcing that. – Heelpost 9/3, 2013 at 18:26

Late reading this, but.. The way I read your question, you only need to change two lines of code:

Accept user input, function writes back on screen.

<input type="text" id="userInput"=> give me input</input>
<button onclick="test()">Submit</button>

<!-- add this line for function to write into -->
<p id="demo"></p>   

<script type="text/javascript">
function test(){
    var userInput = document.getElementById("userInput").value;
    document.getElementById("demo").innerHTML = userInput;
}
</script>

Lindner answered 24/9, 2014 at 19:36 Comment(0)

I tried to send/add input tag's values into JavaScript variable which worked well for me, here is the code:

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript">
            function changef()
            {
            var ctext=document.getElementById("c").value;

            document.writeln(ctext);
            }

        </script>
    </head>
    <body>
        <input type="text" id="c" onchange="changef"();>

        <button type="button" onclick="changef()">click</button>
    </body> 
</html>

Gadwall answered 15/1, 2019 at 14:28 Comment(0)

Recommended topics

Hot tags