Javascript - Wprowadzanie danych przez znacznik wejściowy HTML w celu ustawienia zmiennej Javascript?

Chcę, aby na moim ekranie znajdował się pole tekstowe (na przykład ten, który teraz piszę), który można wpisać, a następnie kliknąć przycisk przesyłania i wysyła wszystko, co wpisano w polu do javascript, a javascript go wypisze. Oto mój kod. To jest część, która działa.Javascript - Wprowadzanie danych przez znacznik wejściowy HTML w celu ustawienia zmiennej 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 więc to miłe, ale powiedzmy, że chcę wejście z tego pola tekstowego i przycisk, gdy jestem już w funkcji i nie chcą, aby ponownie uruchomić funkcję?

Dzięki Jake

Źródło

2013-03-09 user1836262

I naprawdę nie rozumiem, co mówisz w ostatniego zdania. Mam na myśli w ogóle. Jesteś ** już w funkcji ** i ** nie chcesz restartować ** go. Co to miało znaczyć? – kidwon

Tak więc kod, który mam działa, jeśli chcę zainicjować funkcję z nim, ale chcę przycisk przesyłania do zasadniczo pracy, gdy funkcja jest już uruchomiona. Jaki atrybut powinienem dodać do przycisku, aby to zrobić? Bieżąca funkcja "test()" nie działa, ponieważ nie chcę uruchomić tej funkcji. – user1836262

masz na myśli, że chcesz funkcji, która pętle czeka na wejście? to nie działa w javascript. Poza tym możesz użyć 'document.getElementById (" userInput "). Wartość' zawsze i wszędzie tam, gdzie chcesz. – Dave

Po uruchomieniu skryptu blokuje on wykonanie strony. Można obejść to z jednego z dwóch sposobów:

Zastosowanie var foo = prompt("Give me input");, które daje ciąg, że użytkownik wpisze w polu podręcznego (lub null jeśli anulować)
Dzielenie kodu na dwie części funkcja - uruchom jedną funkcję, aby skonfigurować interfejs użytkownika, a następnie podaj drugą funkcję jako wywołanie zwrotne, które zostanie uruchomione, gdy użytkownik kliknie przycisk.

Źródło

2013-03-09 00:27:50 Dennis

Dzięki, po prostu podzielę go na dwie funkcje – user1836262

To jest zły styl, ale będę zakładać, że masz dobry powód do zrobienia czegoś podobnego.

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

Źródło

2013-03-09 00:26:39 Dave

Dlaczego jest to zły styl? – user1836262

Javascript działa najlepiej, gdy jest sterowany zdarzeniami, zamiast monolitycznej pętli typu "do-wszystkiego". Powinieneś to robić tylko wtedy, gdy absolutnie konieczne jest, aby rzeczy dzieją się w określonej kolejności i nie masz innego sposobu na ich egzekwowanie. – Dave

późniejsze czytanie, ale .. Sposób czytam to pytanie, trzeba tylko zmienić dwa wiersze kodu:

Accept wprowadzania danych przez użytkownika, funkcja zapisuje z powrotem na ekranie.

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

Źródło

2014-09-24 19:36:38 new2

Javascript - Wprowadzanie danych przez znacznik wejściowy HTML w celu ustawienia zmiennej Javascript?

Odpowiedz

Powiązane problemy