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

Question

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

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? — kidwon
– kidwon, Commented Mar 9, 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. — user1836262
– user1836262, Commented Mar 9, 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. — Dave
– Dave, Commented Mar 9, 2013 at 0:20
Do not use document.write it is evil google for innerHTML and reformat your code... — Develoger
– Develoger, Commented Mar 9, 2013 at 0:26
Learn to attach event handlers rather than using inline "onclick" definitions. — Stephen P
– Stephen P, Commented Mar 9, 2013 at 1:40

Dennis · Accepted Answer · 2013-03-09 00:27:50Z

11

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.

answered Mar 9, 2013 at 0:27

Dennis

32.7k12 gold badges66 silver badges79 bronze badges

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

1 Comment

user1836262 Over a year ago

Thanks, I will just split it up into 2 functions

Dave · Accepted Answer · 2013-03-09 00:26:39Z

5

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>

answered Mar 9, 2013 at 0:26

Dave

46.8k12 gold badges70 silver badges109 bronze badges

1 Comment

Dave Over a year ago

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.

new2 · Accepted Answer · 2014-09-24 19:36:38Z

3

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>

answered Sep 24, 2014 at 19:36

new2

312 bronze badges

Comments

Sampat Aheer · Accepted Answer · 2019-01-15 14:28:07Z

1

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>

answered Jan 15, 2019 at 14:28

Sampat Aheer

732 silver badges10 bronze badges

Collectives™ on Stack Overflow

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

4 Answers 4

1 Comment

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related