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

标签 javascript html css button input

我正在尝试制作这个关于学校元素时间管理的网站。我正在尝试创建一个输入(文本框),当单击“添加任务”按钮时,它被放置(其中的文本)在一个段落或 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>

我认为这是有问题的部分

函数添加任务(){

   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

最佳答案

您不能将变量命名为数字。您需要为其命名 - 另请注意,在使用变量时不应使用 var

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

关于javascript - 单击按钮时如何使输入中的文本进入段落,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56519671/

相关文章:

javascript - D3.js 和 NVD3.js,何时使用

javascript - 正则表达式 JavaScript 问题

twitter-bootstrap - 自动填充 Bootstrap 网格

javascript - 有没有办法让div从右到左呈现HTML

javascript - 如何从文件中获取 JSON 数据以显示在 HTML 页面上

javascript - 我无法有选择地在元素上运行我的函数

html - 嵌入数据或不嵌入数据什么是服务/解析动态内容的最佳实践

jquery - dlmenu 滚动不允许访问最后几个元素

javascript - If/else 语句比较数字

javascript - 使用 LESS 的 CSS nth-child 调节?