我正在尝试制作一个时间管理网站，但我很挣扎。我想要它，所以当你在输入中添加一个任务并按下“添加任务”按钮时，它将它添加到它上面的 p2 并使它成为这样用户能够添加多个任务。我也试图让它具有优先级。通过这种方式，您可以单击新添加任务旁边的按钮，然后将颜色从红色、绿色和橙色更改。如果你也可以添加这个，那就太好了，但是，如果你不想我完全理解。我真的很感激你的帮助:)
<html>
<style>
.title {
text-align: center;
font-size: 45px;
color: #b72121;
}
</style>
<header>
<title>ManageMe</title>
</header>
<body>
<div>
<h1 class= "title"> ManageMe </h1>
<font face = "Times New Roman" size = "7">Next 7 Day Outlook</font><br />
<div>
<h2> Today <span class= "june13">June 13</span></h2>
<div class="line1">
<div> <br>
<div id= "bonus">
<p id= "p1"> </p>
<p id= "p2"> </p>
<p id= "p3"> </p>
<p id= "p4"> </p>
</div>
<input id= "first" type="text" name="firstname" value="Enter Task Here">
<br>
<div>
<button class="button" onclick ="addtask()"> Add Task </button>
<div id="div">
<div>
<h2 class= "tom"> Tomorrow <span class= "june14">June 14</span></h2>
<div class="line2">
</div>
</div>
</div>
<div>
</div>
</div>
</div>
</div>
</div>
<style>
.title {
text-align: center;
font-size: 45px;
color: #b72121;
}
.june13 {
font-family: "Times New Roman", Times, serif;
font-size: 14px;
color: #989da5;
margin: 0px;
padding: 0px;
}
.line1 {
width: 30%;
height: 2px;
background-color: #666;
opacity: 0.50;
margin-bottom: 10px;
}
.button {
font-size: 10px;
cursor: pointer;
outline: none;
color: #fff;
background-color: #4CAF50;
border: none;
border-radius: 15px;
box-shadow: 0 9px #999;
height: 25px;
width: 70px;
}
.button:hover {
background-color: #3e8e41
}
.button:active {
background-color: #3e8e41;
box-shadow: 0 5px #666;
transform: translateY(4px);
}
input {
margin-bottom: 10px;
}
.june14 {
font-family: "Times New Roman", Times, serif;
font-size: 14px;
color: #989da5;
margin: 0px;
padding: 0px;
}
.line2 {
width: 100%;
height: 2px;
background-color: #666;
opacity: 10.300;
margin-bottom: 10px;
}
.tom {
color: #111111;
}
</style>
</div>
<script>
function addtask() {
var first = document.getElementById("first").value;
document.getElementById("p1").innerHTML = first;
}
function addtask1() {
var first = document.getElementById("first").value;
document.getElementById("p2").innerHTML = first;
}
</script>
</body>
</html>如您所见，当您添加第二个任务时，它会更改第一个任务。这不是我想要的。我只是想让它在第一个下面添加另一个。我还遇到了一个问题，即“明天”和“6 月 14 日”的文本具有较轻的不透明度。但是，我不明白为什么它们的颜色与顶部颜色不同。我只是不知道。 谢谢你的帮助。我是编码新手:)
最佳答案
您的 addtask() 总是为 p1 添加值(value)，您需要定位 bonus div，然后附加 p 进入其中。
添加任务方法-
function addtask() {
var first = document.getElementById("first").value;
document.getElementById("bonus").innerHTML += "<p>"+first+"</p>";
}
工作示例 -
<html>
<style>
.title {
text-align: center;
font-size: 45px;
color: #b72121;
}
</style>
<header>
<title>ManageMe</title>
</header>
<body>
<div>
<h1 class= "title"> ManageMe </h1>
<font face = "Times New Roman" size = "7">Next 7 Day Outlook</font><br />
<div>
<h2> Today <span class= "june13">June 13</span></h2>
<div class="line1">
<div> <br>
<div id= "bonus">
</div>
<input id= "first" type="text" name="firstname" value="Enter Task Here">
<br>
<div>
<button class="button" onclick ="addtask()"> Add Task </button>
<div id="div">
<div>
<h2 class= "tom"> Tomorrow <span class= "june14">June 14</span></h2>
<div class="line2">
</div>
</div>
</div>
<div>
</div>
</div>
</div>
</div>
</div>
<style>
.title {
text-align: center;
font-size: 45px;
color: #b72121;
}
.june13 {
font-family: "Times New Roman", Times, serif;
font-size: 14px;
color: #989da5;
margin: 0px;
padding: 0px;
}
.line1 {
width: 30%;
height: 2px;
background-color: #666;
opacity: 0.50;
margin-bottom: 10px;
}
.button {
font-size: 10px;
cursor: pointer;
outline: none;
color: #fff;
background-color: #4CAF50;
border: none;
border-radius: 15px;
box-shadow: 0 9px #999;
height: 25px;
width: 70px;
}
.button:hover {
background-color: #3e8e41
}
.button:active {
background-color: #3e8e41;
box-shadow: 0 5px #666;
transform: translateY(4px);
}
input {
margin-bottom: 10px;
}
.june14 {
font-family: "Times New Roman", Times, serif;
font-size: 14px;
color: #989da5;
margin: 0px;
padding: 0px;
}
.line2 {
width: 100%;
height: 2px;
background-color: #666;
opacity: 10.300;
margin-bottom: 10px;
}
.tom {
color: #111111;
}
</style>
</div>
<script>
function addtask() {
var first = document.getElementById("first").value;
document.getElementById("bonus").innerHTML += "<p>"+first+"</p>";
}
function addtask1() {
var first = document.getElementById("first").value;
document.getElementById("p2").innerHTML = first;
}
</script>
</body>
</html>对于不透明度问题，您在包含内部 h2 的 line1 应用了不透明度，使其变得模糊。
关于javascript - 如何进行此输入，以便在向其中添加超过 1 个文本时，它会在 p2 中添加更多文本，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56520292/