Javascript - 用戶通過HTML輸入標籤輸入來設置一個Javascript變量？

我想在那裏有一個我的屏幕上的文本框（就像我現在輸入的那個），你可以輸入，然後點擊一個提交按鈕，它會發送你在框中鍵入的任何內容到javascript和JavaScript打印出來。這是我的代碼這是工作的部分。Javascript - 用戶通過HTML輸入標籤輸入來設置一個Javascript變量？

<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所以這是很好的，但可以說，我想從文本框和按鈕輸入，同時我在一個功能就是已經不希望重新啓動功能？

感謝，傑克

來源

2013-03-09 user1836262

我真的不明白你在談論你最後一句話是什麼。我的意思是。你**已經在一個功能**和**不想重新啓動**。這是什麼意思？ – kidwon 2013-03-09 00:12:31

因此，如果我想用它啓動一個函數，那麼我的代碼就可以工作，但是我希望提交按鈕在一個函數已經運行的時候實質上工作。我會添加到按鈕來做到這一點的屬性？當前啓動「test（）」函數將不起作用，因爲我不想啓動該功能。 – user1836262 2013-03-09 00:15:14

你的意思是你想要一個循環等待輸入的函數嗎？這不能在JavaScript中工作。除此之外，您可以隨時隨地使用'document.getElementById（「userInput」）.value'。 – Dave 2013-03-09 00:20:16

腳本運行時，它會阻止頁面執行任何操作。您可以解決這兩種方法之一：

使用var foo = prompt("Give me input");，這將給你的字符串，用戶進入一個彈出框（或null如果他們取消）
拆分代碼爲兩個函數 - 運行一個函數來設置用戶界面，然後提供第二個函數作爲當用戶單擊按鈕時運行的回調函數。

來源

2013-03-09 00:27:50 Dennis

謝謝，我會把它分成2個功能 – user1836262 2013-03-09 00:30:04

這是壞的風格，但我會假設你有一個很好的理由這樣做類似的東西。

<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>

來源

2013-03-09 00:26:39 Dave

爲什麼它的風格不好？ – user1836262 2013-03-09 17:58:55

當它是事件驅動的時候，Javascript的效果最好，而不是一個單一的全部循環。如果事情按特定順序發生並且您沒有其他方式執行該操作，那麼您只應該這樣做。 – Dave 2013-03-09 18:26:57

晚讀這篇文章，但.. 我看了你的問題的樣子，你只需要改變兩行代碼：

接受用戶的輸入，功能回寫在屏幕上。

<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>

來源

2014-09-24 19:36:38 new2

Javascript - 用戶通過HTML輸入標籤輸入來設置一個Javascript變量？

回答

相關問題