Abrufen von Text aus einer Formulareingabe. Javascript

Question

Ich habe viel mehr Code, so dass dies nicht sehr sauber aussehen. Ich versuche, etwas Text aus der E-Mail-Eingabe zu entnehmen und dort einzutragen, wo sich das P-Tag befindet. Es scheint nicht zu funktionieren. Kann jemand helfen?

<form class="modal-content" action="#" style="margin-top:10%;"> 
    <div class="container"> 
    <label><b>Email</b></label> 
    <input id="emailIn" type="email" placeholder=" example@gmail.com" name="email" required> 
    <br/><br/> 
    <div class="clearfix"> 
    <button type="submit" onclick="myFunction()" class="signupbtn">Sign Up</button> 
    </div> 
    </div> 
</form> 

<p id="demo"></p> 

<script> 
function myFunction() { 
    document.getElementById("emailIn").value 
    document.getElementById("demo").innerHTML = text; 
} 
</script> 

Answer 1

Sie nicht erklären text oder auf den Wert des Eingangs gesetzt

function myFunction() { 
    var text = document.getElementById("emailIn").value 
    document.getElementById("demo").innerHTML = text; 
} 

Answer 2

Das Problem ist, dass Sie nur mit text die Daten zu erhalten versuchen, (was nicht überall erklärt wird) statt den Wert des Eingangs.

Sie die Linie gehabt haben könnte:

var text = document.getElementById("emailIn").value; 

Und dann würde der Code gearbeitet haben, aber da Sie werden nur die Informationen zu verwenden, nur ein einziges Mal, eine Variable für die Speicherung der Daten machen doesn Es macht keinen Sinn. Stattdessen können Sie einfach den Wert abrufen und alles in einer Zeile zuweisen.

Verwenden Sie auch keine Inline-HTML-Ereignisattribute (onclick). Bewahren Sie Ihr gesamtes JavaScript vollständig getrennt von Ihrem HTML-Code auf und verwenden Sie moderne Standards zum Einrichten von Event-Handlern. Here's warum.

Schließlich bewirkt .innerHTML, dass die angegebene Datenkette vom HTML-Parser analysiert wird. Da der Wert, mit dem Sie arbeiten, keinen HTML-Code enthält, verwenden Sie besser .textContent, wodurch die Zeichenfolge nicht als HTML verarbeitet wird. Es ist ein bisschen besser auf die Leistung, um die entsprechende zu verwenden.

// Get reference to the submit button 
 
var btn = document.querySelector(".signupbtn"); 
 

 
// Modern DOM standard for setting up event listeners 
 
btn.addEventListener("click", myFunction); 
 

 
function myFunction() { 
 
    // Use textContent instead of innerHTML when there won't be any HTML 
 
    document.getElementById("demo").textContent = document.getElementById("emailIn").value; 
 
}

<form class="modal-content" action="#" style="margin-top:10%;"> 
 
    <div class="container"> 
 
    <label><b>Email</b></label> 
 
    <input id="emailIn" type="email" placeholder=" example@gmail.com" name="email" required> 
 
    <br/><br/> 
 
    <div class="clearfix"> 
 
    <button type="submit" class="signupbtn">Sign Up</button> 
 
    </div> 
 
    </div> 
 
</form> 
 

 
<p id="demo"></p>

Answer 3

Verwendung JQuery hierfür:

<script> 
function myFunction() { 
    var emailIn = $("emailIn").val(); 
    var demo = $("demo").innerHTML; 
    demo = text; 
} 
</script> 

Ich weiß nur, Dies.

Answer 4

Sie hatten es fast! nur definieren Text in Ihrer Funktion

function myFunction() { 
 
    text=document.getElementById("emailIn").value 
 
    document.getElementById("demo").innerHTML = text; 
 
}

<form class="modal-content" action="#" style="margin-top:10%;"> 
 
    <div class="container"> 
 
    <label><b>Email</b></label> 
 
    <input id="emailIn" type="email" placeholder=" example@gmail.com" name="email" required> 
 
    <br/><br/> 
 
    <div class="clearfix"> 
 
    <button type="submit" onclick="myFunction()" class="signupbtn">Sign Up</button> 
 
    </div> 
 
    </div> 
 
</form> 
 

 
<p id="demo">xxxx</p> 
 

 

Answer 5

kleine Änderungen im Code tun,

<script> 
    function myFunction() { 
     document.getElementById("demo").value = document.getElementById("emailIn").value; 
    } 

Answer 6

ich Dinge wie diese thusly tun:

<form class="modal-content" action="#" style="margin-top:10%;"> 
<div class="container"> 
    <label><b>Email</b></label> 
    <input id="emailIn" type="email" placeholder=" example@gmail.com" name="email" required> 
    <br/><br/> 
    <div class="clearfix"> 
    <button type="submit" class="signupbtn" id="button">Sign Up</button> 
    </div> 
    </div> 
</form> 

<p id="demo"></p> 

<script> 
    var button = document.getElementById('button'); 
    var input = document.getElementById('emailIn'); 

    button.addEventListener('click', function(){ 
    var addToP = input.value; 
    document.getElementById('demo').innerHTML = demo.innerHTML + '<p>' + addToP + '</p>'; 
    input.value = ''; 
    }) 
</script>