Javascript - User input through HTML input tag to set a Javascript variable?
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 (ornullif 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.
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>
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>