我真的很困惑如何解决这个问题。
我想做的是，有一个 HTML 表单(不是 <form> )，只是一堆 <input> 。带有 <button> 的标签.
基本上，在 javascript代码中，有一个事件监听器激活 MakeCard()方法，当 <button>被按下。
MakeCard()方法应该将表单(在 HTML 正文中)替换为 <div>它有自己的随机内容。
如何让这个系统发挥作用？请不要JQuery和其他此类库。我只被允许使用DOM 。
这是我到目前为止的代码:
<html>
<head>
<title>Home</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link type="text/css" rel="stylesheet" href="css/style.css"/>
<script>
window.addEventListener("load", function(){
var nameOfRecipient = document.getElementById("nameOfRecipient");
var colorInfo = document.getElementById("colorInformation");
var fontSize = document.getElementById("fontSize");
var resultNameOfRecipient = document.getElementById("resultNameOfRecipient");
var resultColorInfo = document.getElementById("resultColorInformation");
var resultFontSize = document.getElementById("resultFontSize");
function MakeCard(){
// Make the card
// Show the results
ShowResults();
}
function ShowResults(){
// Show the user choices
resultNameOfRecipient.innerHTML = nameOfRecipient.value;
resultColorInfo.innerHTML = colorInfo.value;
resultFontSize.innerHTML = fontSize.value;
}
document.getElementById("submitButton").addEventListener("click", MakeCard);
});
</script>
</head>
<body>
<div id="headerContainer">
Welcome to the Card Maker!
</div>
<div id="formContainer">
<p>Name of recipient<input type="text" id="nameOfRecipient"></p>
<p>Color Information<input type="text" id="colorInformation"></p>
<p>Font Size<input type="number" id="fontSize"></p>
<input type="button" id="submitButton" value="Make Card!">
</div>
<div id="resultContainer">
<p id="resultNameOfRecipient"></p>
<p id="resultColorInformation"></p>
<p id="resultFontSize"></p>
</div>
</body>
请忽略最后一个DIV ID="resultContainer"并忽略所有具有 result 的变量在前。那东西是其他额外的东西。
如果我能知道如何制作一个全新的 div 来替换 ID="formContainer" 的 div，那就太棒了.
最佳答案
首先要做的事情是:当您可以使用 onclick 标记时，为什么还要使用监听器？像这样设置按钮，并将监听器更改为专用函数:
window.addEventListener("load", function(){
变成了
function myfunction() {
并且不要忘记更改脚本的结尾});到}..
此外，从按钮中删除监听器，即这一行。
document.getElementById("submitButton").addEventListener("click", MakeCard);
并为按钮添加一个onclick事件，并将其更改为按钮类型，以确保它不会提交:
<button type="button" id="submitButton" onclick="myfunction()">Make Card!</button>
其次:您已将变量设置为实际的 HTML 元素，这将显示类似以下内容的内容:HTML[buttonElement]...我假设您想要的是在元素中键入的内容，即“value”标签。您可以通过将变量更改为:
var nameOfRecipient = document.getElementById("nameOfRecipient").value;
var colorInfo = document.getElementById("colorInformation").value;
var fontSize = document.getElementById("fontSize").value;
var resultNameOfRecipient = document.getElementById("resultNameOfRecipient").value;
var resultColorInfo = document.getElementById("resultColorInformation").value;
var resultFontSize = document.getElementById("resultFontSize").value;
现在我们已经整理了您的语法和内容，我想继续您所说的要替换 DIV 的部分。这是我的做法:
我会给 DIV 中的每个元素一个 ID(除了按钮，我们已经讨论过)。
<p id="nameofrecipentp">Name of recipient<input type="text" id="nameOfRecipient"></p>
<p id="colorinformationp">Color Information<input type="text" id="colorInformation"></p>
<p id="fontsizep">Font Size<input type="number" id="fontSize"></p>
然后，您可以在调用函数 myfunction() 时调用函数。
function myfunction() {
replacediv()
并定义replacediv()以将表单中的所有元素替换为您想要的任何元素。
function replacediv() {
document.getElementById("nameofrecipentp").innerHTML =
"Enter your data here"
document.getElementById("colorinformationp").innerHTML =
"Enter your data here, for the color information"
document.getElementById("fontsizep").innerHTML =
"enter your data here for font size"
}
我想我几乎涵盖了所有内容。如果您仍然需要帮助，请告诉我。
关于javascript - HTML/Javascript 表单 - 如何制作一个新的 div 元素来覆盖？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36525667/