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

最佳答案

你的代码有问题。首先是因为您试图访问当前不存在的元素。第二,你需要得到你的元素。
demo
你有两个主要的解决方案。
一。在关闭正文标记之前加载脚本。因为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>

2.是否在加载内容后运行脚本。将事件处理程序附加到加载事件,它将在仅加载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>

07-24 09:37
查看更多