Javascript - L'input dell'utente tramite tag di input HTML per impostare una variabile Javascript?

Voglio che ci sia una casella di testo sul mio schermo (come quella che sto digitando ora) che puoi digitare, quindi fare clic su un pulsante di invio e invia tutto ciò che hai digitato nella casella in javascript e javascript lo stampa. Ecco il mio codice Questa è la parte che funziona.Javascript - L'input dell'utente tramite tag di input HTML per impostare una variabile 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 così che è bello, ma Diciamo che voglio input da quella casella di testo e pulsante mentre io sono già in una funzione e non voglio per riavviare la funzione?

Grazie, Jake

fonte

2013-03-09 user1836262

Io davvero non capisco che cosa si sta parlando in voi ultima frase. Intendo per niente. Sei ** già in una funzione ** e ** non vuoi riavviarlo **. Cosa dovrebbe significare? – kidwon

Quindi, quel codice che ho funziona se voglio iniziare una funzione con esso, ma voglio che il pulsante di invio funzioni essenzialmente mentre una funzione è già in esecuzione. Quale attributo dovrei aggiungere al pulsante per farlo? L'attuale avvio della funzione "test()" non funzionerà perché non voglio avviare la funzione. – user1836262

vuoi dire che vuoi una funzione che cicli in attesa di input? che non funziona in javascript. Oltre a questo, puoi usare 'document.getElementById (" userInput "). Value' quando e dove vuoi. – Dave

Quando lo script è in esecuzione, impedisce alla pagina di fare qualsiasi cosa. È possibile aggirare questo con uno dei due modi:

Usa var foo = prompt("Give me input");, che vi darà la stringa che l'utente inserisce in una scatola pop-up (o null se annullano esso)
dividere il codice in due function: esegue una funzione per configurare l'interfaccia utente, quindi fornisce la seconda funzione come callback che viene eseguita quando l'utente fa clic sul pulsante.

fonte

2013-03-09 00:27:50 Dennis

Grazie, lo dividerò in 2 funzioni – user1836262

Questo è cattivo stile, ma io suppone che si abbia una buona ragione per fare qualcosa di simile.

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

fonte

2013-03-09 00:26:39 Dave

Perché è cattivo stile? – user1836262

JavaScript funziona al meglio quando è gestito da un evento, piuttosto che con un loop tutto-monolitico. Dovresti farlo solo se è assolutamente necessario che le cose accadano in un ordine particolare e non hai altro modo di farlo rispettare. – Dave

tardi lettura di questo, ma .. Il modo in cui ho letto la tua domanda, avete solo bisogno di cambiare due righe di codice:

accettare l'input dell'utente, funzione scrive di nuovo sullo schermo.

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

fonte

2014-09-24 19:36:38 new2

Javascript - L'input dell'utente tramite tag di input HTML per impostare una variabile Javascript?

risposta

Problemi correlati