如何进行此输入，以便在添加超过1个文本时在p2中添加更多文本
如何进行此输入，以便在添加超过1个文本时在p2中添加更多文本
提问于 2019-06-10 11:49:16
我正在尝试制作一个时间管理网站，我正在努力。我想有它，所以当你在输入中添加一个任务并按下“添加任务”按钮时，它会将它添加到它上面的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日”的文本具有较浅的不透明度。然而，我不明白为什么它们的颜色与上面的不同。我就是不知道。谢谢你的帮助。我是编程新手:)
Stack Overflow用户
发布于 2019-06-10 11:57:37
您的addtask()总是为p1增加价值，而您需要以bonus div为目标，然后将p附加到其中。
addtask方法-
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上应用了不透明度，使它变得模糊。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56520292
复制相关文章
相似问题
腾讯云开发者
