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

前端未结

关注

 4  1007

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 javascri

相关标签:

4条回答

醉话见心

2021-02-03 14:24

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>

0 讨论(0)

暖寄归人

2021-02-03 14:29

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>

0 讨论(0)

梦毁少年i

2021-02-03 14:31

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>

0 讨论(0)

独厮守ぢ

2021-02-03 14:35
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.
0 讨论(0)
发布评论:

提交评论
- 加载中...