我有更多代码,所以这看起来可能不太干净。我试图从电子邮件输入中获取一些文本并放入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>
答案 0 :(得分:2)
对代码进行少量更改
<script>
function myFunction() {
document.getElementById("demo").value = document.getElementById("emailIn").value;
}
答案 1 :(得分:1)
问题是你只是试图用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>
答案 2 :(得分:1)
您没有声明text
或将其设置为输入值
function myFunction() {
var text = document.getElementById("emailIn").value
document.getElementById("demo").innerHTML = text;
}
答案 3 :(得分:0)
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>
答案 4 :(得分:0)
我这样做了这样的事情:
<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>
答案 5 :(得分:-2)
使用Jquery:
<script>
function myFunction() {
var emailIn = $("emailIn").val();
var demo = $("demo").innerHTML;
demo = text;
}
</script>
我只知道这一点。