Javascript：在提交时将表单输入追加到表中_Javascript_Html_Input

Javascript：在提交时将表单输入追加到表中

javascript html input

Javascript：在提交时将表单输入追加到表中,javascript,html,input,Javascript,Html,Input,我对Javascript和HTML非常陌生我试图让用户在输入表单中输入一些信息并单击提交按钮后，所述信息显示在表单上方或下方的表格中。没有JQuery我怎么做这是我的密码： <!DOCTYPE html> <html> <head> <script> document.getElementById("myBtn").onclick = myFunction; function myFunction() { var x = document.

我对Javascript和HTML非常陌生

我试图让用户在输入表单中输入一些信息并单击提交按钮后，所述信息显示在表单上方或下方的表格中。没有JQuery我怎么做

这是我的密码：

<!DOCTYPE html>
<html>
<head>
<script>

document.getElementById("myBtn").onclick = myFunction;

function myFunction() {
var x = document.getElementById("fname");
everything.innerHTML = x.value + y.value + z.value;

}

</script>
</head>
<body>
<div class="everything">everything goes here

</div>
<p></p>

Enter your name: <input type="text" id="fname" >
<p></p>
Enter your age: <input type="number" id="fage" >
<p></p>
Enter your city: <input type="text" id="fcity" >
<p></p>
<button id="myBtn">Try it</button>



</body>
</html>


document.getElementById（“myBtn”）.onclick=myFunction；
函数myFunction（）{
var x=document.getElementById（“fname”）；
everythings.innerHTML=x.value+y.value+z.value；
}
一切都在这里

输入您的姓名：

输入您的年龄：

输入您的城市：

试试看

您的代码中有一些问题。首先是因为您试图访问当前不存在的元素。其次，你需要得到你的元素

沃特你有两个主要的解决方案。 1.在关闭主体标记之前加载脚本。因为dom将首先加载，所以您可以访问脚本中的所有dom元素

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="everything">everything goes here

</div>
<p></p>

Enter your name: <input type="text" id="fname" >
<p></p>
Enter your age: <input type="number" id="fage" >
<p></p>
Enter your city: <input type="text" id="fcity" >
<p></p>
<button id="myBtn">Try it</button>


<script>

document.getElementById("myBtn").onclick = myFunction;

function myFunction() {
var x = document.getElementById("fname");
var y = document.getElementById("fage");
var z = document.getElementById("fcity");
var everythingClass = document.getElementsByClassName('everything')[0];
everythingClass.innerHTML = x.value + y.value + z.value;

}

</script>
</body>
</html>


一切都在这里

输入您的姓名：

输入您的年龄：

输入您的城市：

试试看
document.getElementById（“myBtn”）.onclick=myFunction；
函数myFunction（）{
var x=document.getElementById（“fname”）；
变量y=document.getElementById（“fage”）；
var z=document.getElementById（“fcity”）；
var everythingClass=document.getElementsByClassName（'everythingClass'）[0]；
everythingClass.innerHTML=x.value+y.value+z.value；
}

2.是在加载内容后运行脚本。您将事件处理程序附加到加载事件，thah将仅在dom加载后运行

<!DOCTYPE html>
<html>
<head>
<script>

window.onload = eventHandler;
function eventHandler() {
document.getElementById("myBtn").onclick = myFunction;
}

function myFunction() {
var x = document.getElementById("fname");
var y = document.getElementById("fage");
var z = document.getElementById("fcity");
var everythingClass = document.getElementsByClassName('everything')[0];
everythingClass.innerHTML = x.value + y.value + z.value;

}

</script>
</head>
<body>
<div class="everything">everything goes here

</div>
<p></p>

Enter your name: <input type="text" id="fname" >
<p></p>
Enter your age: <input type="number" id="fage" >
<p></p>
Enter your city: <input type="text" id="fcity" >
<p></p>
<button id="myBtn">Try it</button>



</body>
</html>


window.onload=eventHandler；
函数eventHandler（）{
document.getElementById（“myBtn”）.onclick=myFunction；
}
函数myFunction（）{
var x=document.getElementById（“fname”）；
变量y=document.getElementById（“fage”）；
var z=document.getElementById（“fcity”）；
var everythingClass=document.getElementsByClassName（'everythingClass'）[0]；
everythingClass.innerHTML=x.value+y.value+z.value；
}
一切都在这里

输入您的姓名：

输入您的年龄：

输入您的城市：

试试看

您通常希望将所有JS代码放在

标记之前

此外，在当前代码中，y和z没有定义，因此

x.value+y.value+z.value没有任何意义
Havevar y=getElementById（“fage”）；var z=getElementById（“fcity”）
此外，您不能仅通过说everything.innerHTML
来引用类为“everything”的div。只需使用Id（就像您为其他人所做的那样）或按以下方式执行：
var everything = document.getElementsByClassName("everything");
everything[0].innerHTML = x.value + y.value + z.value;

希望这有帮助：）
脚本在元素可用之前运行。将脚本移到
之前的右侧，或者您可以添加事件侦听器以加载页面，如此窗口。onload=eventHandler；函数eventHandler（）{document.getElementById（“myBtn”）.onclick=myFunction；}我建议将代码包装在一个on-ready函数中：document.addEventListener（“DOMContentLoaded”，函数（事件）{//do-work}）好的，是的，谢谢你，你完全正确，所以我按照你说的做了一切，现在“一切都在这里”文本变成了NaN。你知道为什么吗？是的，你完全正确。抱歉问了个愚蠢的问题。无论如何，非常感谢！