HTML-Eingabe in Javascript-Variable

-2

Ich habe versucht, Texteingabe von HTML zu greifen und zu versuchen, den Text zurück in HTML auszugeben, aber aus irgendeinem Grund scheint es nicht zu funktionieren. Ändert die Eingabe in ein Formular die Interaktion mit getElementById oder ist es möglich, dass die zweite Tastenverwendung von formaction dies unterbricht?HTML-Eingabe in Javascript-Variable

$(document).ready(function(){ 
 
     $("#submit").on("click",function(){ 
 
     var test = document.getElementById("searchInput"); 
 
     $("#text").html(test); 
 
     }) 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form> 
 
      <input type ="text" id ="searchInput"><br> 
 
      <button id = "submit">Search</button> 
 
      <button formaction="https://en.wikipedia.org/wiki/Special:Random" formtarget="_Blank">Random</button> 
 
     </form> 
 
    
 
     <div id = "text"> 
 
     <h1>test</h1> 
 
     </div>

EDIT: Ich habe versucht,

var test = document.getElementById("searchInput");

var test = document.getElementById("searchInput").value;

vorher zu ändern, und es funktioniert immer noch nicht. Gibt es eine fehlende Interaktion, die ich vermisse? Auch ich würde gerne in der Lage sein, die Eingabe als Variable zu speichern, das ist also, warum ich absichtlich es in eine Variable einlege, bevor ich es ausgäbe.

EDIT2: Es gab nichts besonderes über den Code anders als das Abrufen des Wertes. Ich verwende zur Zeit codepen.io zum code und habe jquery nicht in den Stift geladen.

Quelle

2016-11-07 kimpster

'document.getElementById ("searchInput");' diese bekommt die '' und den Wert nicht, stellen Sie sicher, das ist, was Sie wollen. –

Mögliches Duplikat von [JavaScript: Wie bekomme ich den Wert des Texteingabefelds?] (Http://stackoverflow.com/questions/11563638/javascript-how-to-get-value-of-text-input-field) – Roberrrt

-1

Sie müssen den Wert des Elements finden und dann als HTML festlegen.

$("#text").html(test.value);

Quelle

2016-11-07 09:40:38 void

-2

Bearbeiten Sie Ihre JS Code bitte versuchen Sie es: EDIT:

$(document).ready(function(){ 
    $("#submit").on("click",function(){ 
    var test = $("#searchInput").val(); 
    $("#text").html(test); 
    }) 
});

Quelle

2016-11-07 09:42:45

-1

ich Ihre Frage paaren überprüfen Sie dieses aktualisiert haben.

$(document).ready(function(){ 
 
     $("#submit").on("click",function(){ 
 
     var test = document.getElementById("searchInput").value; 
 
     $("#text").html(test); 
 
     }) 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form> 
 
      <input type ="text" id ="searchInput"><br> 
 
      <button id = "submit">Search</button> 
 
      <button formaction="https://en.wikipedia.org/wiki/Special:Random" formtarget="_Blank">Random</button> 
 
     </form> 
 
    
 
     <div id = "text"> 
 
     <h1>test</h1> 
 
     </div>

Quelle

2016-11-07 09:42:58

bitte Sag mir, warum hast du meine Antwort heruntergezählt –

-1

ich denke, das wird für Sie arbeiten.

<! doctype HTML> 
 
<html> 
 

 
<head> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
</head> 
 

 
<body> 
 
    <form> 
 
     <input type="text" id="searchInput"> 
 
     <br> 
 
     <button type="button" id="submit">Search</button> 
 
     <button formaction="https://en.wikipedia.org/wiki/Special:Random" formtarget="_Blank">Random</button> 
 
    </form> 
 

 
    <div id="text"> 
 
     <h1>test</h1> 
 
    </div> 
 
</body> 
 
<script> 
 
    $(document).ready(function() { 
 
     $("#submit").on("click", function() { 
 
      $("#text").html($("#searchInput").val()); 
 
     }) 
 
    }); 
 
</script> 
 

 
</html>

Quelle

2016-11-07 09:47:36 Nitheesh

Down abstimmen diesen Code? Kann ich den Grund wissen? – Nitheesh

Ich würde sagen, der Downvote ist keine Erklärung, warum dieser Code funktionieren sollte. Ich weiß nicht genau, manchmal gibt es Downvoters, nur weil sie es können. – opelhatza

Dies ist kein komplexer Code. Jeder kann hineinschauen und es erklärt sich selbst. Wenn irgendwelche Erklärungen erforderlich sind, können Sie einfach den Kommentar einfügen. Es ist keine große Sache, eine 2-Zeilen-Erklärung für einen 20-Zeilen-Code hinzuzufügen. Auch sind wir bereit, bei Bedarf Erklärungen zu geben. – Nitheesh

Da Sie jQuery verwenden, wird es mehr Sinn machen jQuery zu verwenden, um die Elemente Wert zu erhalten:

Verwenden Sie diese immer #text Element ersetzen Inhalte mit Wert:

$("#text").html($("#searchInput").val());

Mit dieser #searchInput Wert #text Element anhängen:

$("#text").append($("#searchInput").val());

Aber die ganze Logik macht keinen Sinn. Sie ändern den Wert eines Elements so, dass es außerhalb des gesendeten Formulars liegt.Entweder sollten Sie verhindern, dass Absenden des Formulars, oder haben das #text Element in der Form als input, textarea oder hidden Feldschaltfläche klicken Ereignis einreichen:

$(document).ready(function(){ 
    $("#submit").on("click",function(e) { 
    e.preventDefault(); 
    $("#text").html($("#searchInput").val()); 
    }) 
});

oder mit dem #text Element in der Form für die Einreichung:

Quelle

2016-11-07 09:53:32

Ich versuche nicht, einen Teil des Formulars zu ändern, ich versuche, die Zeichenfolge, die eingegeben wird, in eine Variable in JS umzuwandeln, wenn ich auf die Schaltfläche "Senden" klicke. – kimpster

Wenn Sie auf die Senden-Schaltfläche klicken, sendet der Browser das Formular und die Seite wird mit den übermittelten Daten aktualisiert. Das '# Text'-Feld befindet sich außerhalb des Formulars, so dass es nicht an die' POST'/'GET'-Daten zur Anzeige oder Verwendung übergeben wird. Sie sollten entweder das Element '# text' in das Formular verschieben, damit die Daten an die aktualisierte Seite übergeben werden, oder das Ereignis 'submit' abbrechen. –

Sie verwenden Formularelement, wenn Sie also auf die Schaltfläche klicken, wird das Formular neu geladen. Wenn Sie den Textfeldwert für das Element anzeigen möchten, entfernen Sie das Formularelement einmal.

 <input type ="text" id ="searchInput"><br> 
     <button id = "submit">Search</button> 
     <button formaction="https://en.wikipedia.org/wiki/Special:Random" formtarget="_Blank">Random</button> 


    <div id ="text"> 
    <h1 id="welc"></h1> 
    </div> 

    <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.1.min.js" type="text/javascript"></script> 
    <script> 
    $(document).ready(function(){ 
    $("#submit").on("click",function(){  
    var test = $('#searchInput').val(); 
    $("h1").html(test); 
    }); 
}); 
    </script>

Entfernen Sie einfach das Tag, und überprüfen Sie es.

Quelle

2016-11-07 10:15:42 Sathishkumar

HTML-Eingabe in Javascript-Variable

Antwort

Verwandte Themen