从表单输入获取文本。Javascript

我有更多的代码，所以这看起来可能不是很干净。我试图从电子邮件输入中提取一些文本，并将其放入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>

电子邮件



注册

函数myFunction（）{
document.getElementById（“emailIn”）.value
document.getElementById（“demo”）.innerHTML=text；
}

问题在于，您只是尝试使用

文本（未在任何地方声明）而不是输入值获取数据

你可以说：

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

然后，您的代码就可以工作了，但由于您只需要使用一次该信息，所以创建一个用于存储数据的变量并没有什么意义。相反，您可以只获取值并在一行中全部赋值

另外，不要使用内联HTML事件属性（
onclick
）。将所有JavaScript与HTML完全分开，并使用现代标准设置事件处理程序为什么

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


//获取对提交按钮的引用
var btn=document.querySelector（“.signupbtn”）；
//用于设置事件侦听器的现代DOM标准
btn.addEventListener（“单击”，myFunction）；
函数myFunction（）{
//如果没有任何HTML，请使用textContent而不是innerHTML
document.getElementById（“demo”）.textContent=document.getElementById（“emailIn”）.value；
}

电子邮件



注册
问题在于，您只是试图用
文本（未在任何地方声明）而不是输入值来获取数据

你可以说：

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

然后，您的代码就可以工作了，但由于您只需要使用一次该信息，所以创建一个用于存储数据的变量并没有什么意义。相反，您可以只获取值并在一行中全部赋值

另外，不要使用内联HTML事件属性（
onclick
）。将所有JavaScript与HTML完全分开，并使用现代标准设置事件处理程序为什么

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


//获取对提交按钮的引用
var btn=document.querySelector（“.signupbtn”）；
//用于设置事件侦听器的现代DOM标准
btn.addEventListener（“单击”，myFunction）；
函数myFunction（）{
//如果没有任何HTML，请使用textContent而不是innerHTML
document.getElementById（“demo”）.textContent=document.getElementById（“emailIn”）.value；
}

电子邮件



注册
您没有声明
文本或将其设置为输入值

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

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

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

你差点就成功了！只需在函数中定义文本即可


函数myFunction（）{
text=document.getElementById（“emailIn”）.value
document.getElementById（“demo”）.innerHTML=text；
}

电子邮件



注册
xxxx

你差点就成功了！只需在函数中定义文本即可


函数myFunction（）{
text=document.getElementById（“emailIn”）.value
document.getElementById（“demo”）.innerHTML=text；
}

电子邮件



注册
xxxx

对代码做一些小改动

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


函数myFunction（）{
document.getElementById（“demo”）.value=document.getElementById（“emailIn”）.value；
}
对代码做一些小改动

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


函数myFunction（）{
document.getElementById（“demo”）.value=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" 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>


电子邮件



注册

var button=document.getElementById（'button'）；
var input=document.getElementById（'emailIn'）；
addEventListener（'click'，function（）{
var addToP=input.value；
document.getElementById（'demo'）.innerHTML=demo.innerHTML+''+addToP+'
'；
input.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" 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>


电子邮件



注册

var button=document.getElementById（'button'）；
var input=document.getElementById（'emailIn'）；
addEventListener（'click'，function（）{
var addToP=input.value；
document.getElementById（'demo'）.innerHTML=demo.innerHTML+''+addToP+'
'；
input.value=''；
})
var text=document.getElementById（“emailIn”）.value；哇！我讨厌那些纸条。谢谢大家！“var text”是罪魁祸首。var text=document.getElementById（“emailIn”）.value；哇！我讨厌那些纸条。谢谢大家！“var text”是罪魁祸首。您的代码导致
text
成为一个全局变量！哎哟它是在函数内部定义的，那么它将如何变为全局的？它没有在函数中定义<代码>变量
或
让
声明变量。您只是引用了
文本
，因为它没有在其他任何地方正式声明，所以它变成了全局的。即使我做了更改。我想你