如何使输入中的文本在按钮单击时进入段落答案

【问题标题】：How do I make text in input go into paragraph on button click如何使输入中的文本在按钮单击时进入段落
【发布时间】：2019-06-10 01:45:29
【问题描述】：

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

我认为这是有问题的部分：抱歉，我已在代码 sn-p 的 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>

我认为这是有问题的部分

函数 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

【问题讨论】：

标签： javascript html css button input

【解决方案1】：

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

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

【讨论】：

谢谢，但我希望它（当单击“添加任务”按钮时）将其放入 p2 中，然后在其下方进行新输入

【解决方案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>

【讨论】：