Mam dużo więcej kodu, więc może to nie wyglądać bardzo czysto. Próbuję złapać tekst z wejścia e-mail i umieścić w miejscu, w którym jest znacznik P. Wydaje się, że nie działa. Czy ktoś może pomóc?

 <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>
0
I'm just a coder for fun 27 czerwiec 2017, 20:01

6 odpowiedzi

Najlepsza odpowiedź

Nie zadeklarowałeś text ani nie ustawisz go na wartość wejścia

 function myFunction() {
   var text = document.getElementById("emailIn").value
   document.getElementById("demo").innerHTML = text;
 }
1
Musa 27 czerwiec 2017, 17:07

Użyj jQuery dla tego:

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

Wiem to tylko.

-2
Berkay Çubuk 27 czerwiec 2017, 17:08

Robię takie rzeczy podobne:

<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>
0
Alan Tweedie 27 czerwiec 2017, 17:23

Prawie miałeś to! Wystarczy zdefiniować tekst w swojej funkcji

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>

 
0
DCR 27 czerwiec 2017, 17:17

Problem polega na tym, że po prostu próbujesz uzyskać dane za pomocą text (która nie została zadeklarowana w dowolnym miejscu) zamiast wartości wejścia.

Możesz mieć linię być:

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

A potem twój kod będzie pracował, ale ponieważ zamierzasz korzystać z tych informacji tylko raz, dokonując zmiennej do przechowywania danych, nie ma sensu. Zamiast tego możesz uzyskać wartość i przypisać wszystko w jednej linii.

Nie używaj również atrybutów zdarzeń Inline HTML (onclick). Zachowaj cały swój JavaScript całkowicie oddzielony od HTML i wykorzystaj nowoczesne standardy do konfigurowania obsługi imprez. Oto dlaczego.

Wreszcie .innerHTML powoduje, że ciąg danych przewidziano przez parsera HTML. Ponieważ wartość, z którą pracujesz, nie zawiera żadnego HTML, lepiej jest użyć .textContent, który nie przetwarza ciągu jako HTML. Jest trochę lepszy od wydajności, aby użyć odpowiedniego.

// 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>
1
Scott Marcus 27 czerwiec 2017, 17:11

Czy małe zmiany w twoim kodzie,

<script>
    function myFunction() {
        document.getElementById("demo").value = document.getElementById("emailIn").value;
    }
2
Mohideen bin Mohammed 27 czerwiec 2017, 17:19