Question

我正在尝试建立有关学校项目时间管理的网站。我试图创建一个输入（文本框），当单击“添加任务”按钮时，将其放置在段落或p2中（其中的文本），然后将输入下移。

我认为这是有问题的部分：抱歉，我在代码段的html部分中发布了所有html，css和Javascript 请我真的需要帮助

<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>
                </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">
 <button onclick ="appendRow()" value="Add Row">Add Row</button>
 </div>
                    <div>
                        <p><input type="button" value="Add" onclick="generateRow()"/></p>

                    </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;
                 
             }
             
         
    
    
             
    </style>

</div>
    
    <script>
        
        
     function addtask() {
        
       var 1 = document.getElementById("first").value;
         document.getElementById("p1").innerHTML = var 1;
        
         
         {
        
        
     function generateRow() {
   var d = document.getEleme    ntById('div');
d.innerHTML+="<p><input type='text' name='food'>";
}
       
    </script>
</body>
</html>

我认为这是有问题的部分

function addtask（）{

   var 1 = document.getElementById("first").value;
     document.getElementById("p1").innerHTML = var 1;


     {

This image is what it looks like. As you can see the text box is where you put in the task you want or other input and then when you click the green button it will place it will place it above the current input box as a p2 and then the user is able to add another task.

我知道还有很多额外的代码，希望您有基本的想法

Something like this

Answer 1

您不能将变量命名为数字。您需要将其命名为其他名称-另外请注意，使用变量时，您不应该使用var。

var val = document.getElementById("first").value;
document.getElementById("p1").innerHTML = val;

Answer 2

您在这里。显然，您无法添加行，因为该函数尚未创建作为建议，我建议您在输入中使用占位符，而不要使用值。

<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>
                </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">
 <button onclick ="appendRow()" value="Add Row">Add Row</button>
 </div>
                    <div>
                        <p><input type="button" value="Add" onclick="generateRow()"/></p>

                    </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;
                 
             }
             
         
    
    
             
    </style>

</div>
    
    <script>
        
        
     function addtask() {
        
       var first = document.getElementById("first").value;
       document.getElementById("p1").innerHTML = first;
        
      
         }
        
        
     function generateRow() {
   var d = document.getElementById('div');
d.innerHTML+="<p><input type='text' name='food'>";
}
       
    </script>
</body>
</html>

我如何使输入中的文本进入按钮单击的段落

2 个答案: