Tell me more ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite

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

share|improve this question
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? – kidwon Mar 9 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 Mar 9 at 0:15
1  
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 Mar 9 at 0:20
Do not use document.write it is evil google for innerHTML and reformat your code... – Dušan Radojević Mar 9 at 0:26
Learn to attach event handlers rather than using inline "onclick" definitions. – Stephen P Mar 9 at 1:40

2 Answers

up vote 1 down vote accepted

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.
share|improve this answer
Thanks, I will just split it up into 2 functions – user1836262 Mar 9 at 0:30
up vote 1 down vote

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>
share|improve this answer
Why is it bad style? – user1836262 Mar 9 at 17:58
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. – Dave Mar 9 at 18:26

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.