Incorporating user input into a div element

Question

Incorporating user input into a div element

So, I'm in the process of building my own Task Tracker using JavaScript to enhance my skills, but I've hit a roadblock.

I successfully implemented adding a new div with user-inputted tasks, however, there's no styling involved.

<div class="isDo"> // HTML code
  <p id="newTask">Task 1</p>
  <hr>
</div>

function addTask() { // JavaScript Code
  var div = document.createElement("div");
  var taskAdd = document.getElementById("taskAdd").value;

  div.innerHTML = taskAdd;

  document.getElementsByClassName("isDo")[0].appendChild(div);
}

While when I append a paragraph instead of a div, it works fine with styling. However, I want to include an <hr> tag after each input value.

Is there a way for me to dynamically add an entire div consisting of a paragraph and an <hr> tag in this scenario?

javascript html css

Answer 1

Answer №1

This solution should work perfectly for you :) `

  <!DOCTYPE html>
  <html lang="en">
    <head>
      <meta charset="UTF-8>;
      <title></title>
    </head>
      <body>
        <div class="isDo"> 
          <p id="newTask">Task 1</p> 
          <hr>
      </div>
      <button id="btn" >Add Tag</button>

       <script>
         function addTask() { // JavaScript Function
           var div = document.createElement("div");
           var taskAdd = document.getElementById("newTask").innerHTML; 
           div.innerHTML = `<p>${taskAdd}</p><hr>`; 
           document.getElementsByClassName("isDo")[0].appendChild(div);
         } 
         var btn = document.getElementById("btn")
                           .addEventListener("click", addTask);
      </script>
    </body>
  </html>

`

Answer 2

This solution should work perfectly for you :) `

  <!DOCTYPE html>
  <html lang="en">
    <head>
      <meta charset="UTF-8>;
      <title></title>
    </head>
      <body>
        <div class="isDo"> 
          <p id="newTask">Task 1</p> 
          <hr>
      </div>
      <button id="btn" >Add Tag</button>

       <script>
         function addTask() { // JavaScript Function
           var div = document.createElement("div");
           var taskAdd = document.getElementById("newTask").innerHTML; 
           div.innerHTML = `<p>${taskAdd}</p><hr>`; 
           document.getElementsByClassName("isDo")[0].appendChild(div);
         } 
         var btn = document.getElementById("btn")
                           .addEventListener("click", addTask);
      </script>
    </body>
  </html>

`

Answer 3

Answer №2

Feel free to give this a try:

<!DOCTYPE html>
<html>
<title>Test Code</title>
<head>
<script>
function addNewTask() {
  var div = document.createElement("div");
  var newTask = document.getElementById("newTask").value;
  div.innerHTML = newTask + "<hr>";
  document.getElementsByClassName("tasks")[0].appendChild(div);

}
</script>
</head>
<body>
    <input id="newTask">
    <button onclick="addNewTask()">Add Task</button>
    <div class="tasks">
        <p id="task1">Task 1</p>
        <hr>
    </div>
</body>
</html>

Answer 4

Feel free to give this a try:

<!DOCTYPE html>
<html>
<title>Test Code</title>
<head>
<script>
function addNewTask() {
  var div = document.createElement("div");
  var newTask = document.getElementById("newTask").value;
  div.innerHTML = newTask + "<hr>";
  document.getElementsByClassName("tasks")[0].appendChild(div);

}
</script>
</head>
<body>
    <input id="newTask">
    <button onclick="addNewTask()">Add Task</button>
    <div class="tasks">
        <p id="task1">Task 1</p>
        <hr>
    </div>
</body>
</html>

Incorporating user input into a div element

Answer №1

Answer №2

Similar questions

Styling the content within Template Strings is not supported by VSCode

Ways to include "working hours" if statement a particular holiday dates are specified

What is the best way to create a self-referencing <div> in HTML?

Is there a way to troubleshoot the issue pertaining to using routerLink in Angular version 17.2?

Unable to locate "Gruntfile.js" Node module for task execution

Is it possible to combine margin auto with a transform on the left simultaneously?

Improve the way you manage return statements

Enhancing Bootstrap Slider Range with jQuery/Javascript

To add additional nested data to a JSON object in JavaScript, you can use the push method or update

Leveraging NodeJS to handle server-side tasks and operations

Problem with Bootstrap multiselect: it only opens the first time, and stops working after an ajax call

Updating your Heroku app (Node.js) from a GitHub repository - a step-by-step guide

What is the correct method to sanitize the data obtained from a text area before inserting it back into the same text area?

Modifying the anchor link in a pop-up window according to the clicked link using JQuery

Creating a Form with HTML and CSS

Modifying the initialValues prop on a Formik Form does not reflect changes in the input values

Immersive viewing experience

Learning how to utilize localStorage in conjunction with a color picker to modify the --var of :root

Why does the styling on my <a> tags in the footer only take effect when I apply padding to the form above?

The .ajaxSubmit function in jquery.form.js seems to be malfunctioning when using the data option