Как сделать так, чтобы текст при вводе переходил в абзац по нажатию кнопки - PullRequest
Новая
       10

Как сделать так, чтобы текст при вводе переходил в абзац по нажатию кнопки

0 голосов
/ 10 июня 2019

Я пытаюсь сделать этот сайт об управлении временем для проекта в школе.Я пытаюсь создать ввод (текстовое поле), который при нажатии кнопки «добавить задачу» помещается (текст внутри него) в абзац или p2, а затем ввод перемещается вниз.

Это, я думаю, проблемный раздел: Извините, я разместил все html, css и Javascript в разделе html фрагмента кода. Пожалуйста, мне действительно нужна помощь 

<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;


     {

Это изображение, что это такоепохоже.Как вы видите, текстовое поле - это место, куда вы помещаете нужную задачу или другой ввод, а затем, когда вы нажимаете зеленую кнопку, она помещается, она помещается над текущим полем ввода как p2, а затем пользователь может добавитьдругая задача.

Я знаю, что есть много дополнительного кода, однако, я надеюсь, что вы поняли основную идею

Как-то так

Ответы [ 2 ]

0 голосов
/ 10 июня 2019

Вот, пожалуйста.Очевидно, что вы не можете добавлять строки, потому что эта функция еще не создана. Советую вам использовать заполнитель вместо ввода. 

<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>
0 голосов
/ 10 июня 2019

Вы не можете назвать переменную как число. Вам нужно было бы назвать это как-нибудь еще - также заметьте, что у вас не должно быть var, когда вы используете переменную. 

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