Question

我有更多代码，所以这看起来可能不太干净。我试图从电子邮件输入中获取一些文本并放入p标记所在的位置。它似乎没有起作用。有人可以帮忙吗？

 <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

对代码进行少量更改

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

Answer 2

问题是你只是试图用text（未在任何地方声明）而不是输入值来获取数据。

你可能有这样的行：

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

然后你的代码就可以工作了，但由于你只打算一次使用那些信息，所以制作一个存储数据的变量并没有多大意义。相反，您只需获取值并将其全部分配到一行。

此外，请勿使用内联HTML事件属性（onclick）。保持所有JavaScript与HTML完全分离，并使用现代标准设置事件处理程序。 Here's 为什么。

最后，.innerHTML会导致您提供的数据字符串被HTML解析器解析。由于您使用的值不包含任何HTML，因此最好使用.textContent，它不会将字符串作为HTML处理。使用合适的一个在性能方面要好一点。

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

您没有声明text或将其设置为输入值

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

Answer 4

你几乎拥有它！只需在函数中定义文本

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

我这样做了这样的事情：

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

Answer 6

使用Jquery：

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

我只知道这一点。

从表单输入中获取文本。 JavaScript的

6 个答案: