如何解决如何将表单信息输入到 info 数组中,并将该数组打印到一个段落中?
我正在尝试获取表单信息,将它们输入到一个 info 数组中,然后将该数组打印到字符串连接中的一个段落中。
这是我的 HTML:
<body>
<input type="text" id="name" placeholder="Enter first name">
<input type="text" id="lName" placeholder="Enter last name">
<input type="text" id="age" placeholder="Enter age">
<input type="text" id="email" placeholder="Enter email address">
<button>Add Info</button>
<article>
<div>
<p>8</p>
</div>
</article>
<p id="future"></p>
<main>
</body>
这是我的 Javascript:
const btn = document.querySelector('button');
const paras = document.querySelectorAll('p');
btn.addEventListener("click",function(){
const name = document.getElementById("#name");
const lName = document.querySelector("#lname");
const age = document.querySelector("#age");
const email = document.querySelector("#email");
let info = [name + " " + lName + ",you are " + age + "!" + " But by your next birthday,you will
inherit $10 million dollars! We will email you your fortune to: " + email + "."];
document.querySelector("#future").innerHTML = info;})
我明白了:
null [object HTMLInputElement] ,你是 [object HTMLInputElement]!但是到您下一个生日时,您将继承 1000 万美元!我们会将您的财富通过电子邮件发送至:null。
解决方法
有几个问题:
-
getElementById
只需要 id 作为参数,没有#
。 (querySelector
需要这个,因为它需要一个 css-selector 作为参数)。 - 此选择器中有一个拼写错误:
const lName = document.querySelector("#lname")
:#lName
而不是#lname
。 - 您打印的是输入元素,而不是它们的值。为此使用
.value
。
const btn = document.querySelector('button');
const paras = document.querySelectorAll('p');
btn.addEventListener("click",function() {
const name = document.getElementById("name");
const lName = document.querySelector("#lName");
const age = document.querySelector("#age");
const email = document.querySelector("#email");
let info = [name.value + " " + lName.value + ",you are " + age.value + "!" + " But by your next birthday,you will inherit $10 million dollars!We will email you your fortune to: " + email.value + "."];
document.querySelector("#future").innerHTML = info;
})
<body>
<input type="text" id="name" placeholder="Enter first name">
<input type="text" id="lName" placeholder="Enter last name">
<input type="text" id="age" placeholder="Enter age">
<input type="text" id="email" placeholder="Enter email address">
<button>Add Info</button>
<article>
<div>
<p>8</p>
</div>
</article>
<p id="future"></p>
</body>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。