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

Increase the size of a centered image within a table

New to AppleScript: Encountered an unexpected identifier instead of the expected end of line

What is the best way to create a function that will return a Promise within an Express Route?

Attempting to use express and nodemailer to send an email, but there is absolutely no output appearing in either the console or the terminal

Utilizing ReactJS and TypeScript to retrieve a random value from an array

Problem with exporting default class in Babel/Jest conflict

Accessing elements within a ReactJS map structure using the material-ui Selectable List component is not supported

What is the process of specifying that an Angular directive must act as a child directive within a particular directive in Angular?

Error in Node.js: Attempting to modify headers after they have already been sent to the client

Character count in textarea does not work properly when the page is first loaded

Mean stack authentication issue: missing token

The Data from Req.Body Doesn't Appear After Adding Form Fields

Several queries for directions on Google Maps are resulting in the same response being returned for all requests

Is it possible in ReactJS to return JSX from a callback function?

The PhpStorm/JavaScript expression statement doesn't involve assignment or function call

Determine whether the color is a string ('white' === color? // true, 'bright white gold' === color? // false)

Executing the executeScript method in Microsoft Edge using Java and WebDriverWould you like a different version?

What could be hindering the activation of my button click event?

How can you efficiently transfer the expression utilized in v-for from the template to the component code?

Using prevState in setState is not allowed by TypeScript