Problems with javascript html dom

MarNavuu 0
Viewed 46

let tasks = []

function addV() {
  let x = document.getElementById("bara")
  tasks.push(x.value)
  document.getElementById("t").textContent = " "

  for (let i = 0; i < tasks.length; i++) {
    const p = document.createElement("p");

    p.innerText += tasks[i]
    document.body.append(p)
    console.log(tasks)
  }
}
<!DOCTYPE html>
<html>

<head>
  <title>To Do</title>
</head>

<body>
  <script src="motor.js"></script>
  <p>Task</p>
  <input type="search" placeholder="task" id="bara">
  <button onclick="addV()">ADD</button>
  <hr>
  <h1>TO DO TASKS</h1>
  <p id="t"></p>
</body>

</html>

Basically i have this problem when i hit my add button second time it add again the first element from the array butt how do i manage to show only the last element without the first one in the next p elements when i hit add button

dom javascript html
3 Answers

If I understand your need correctly, you do not want to "repeat" displaying "task" entered previously (which will result in displaying previous input tasks multiple times) when you perform entering new task(s).

In that case, please clear the element "t" before you update it.

So the HTML is

<!DOCTYPE html>
<html>
    <head>
        <title>To Do</title>
    </head>
<body>
<script src="motor.js"></script>
<p>Task</p>
<input type="search" placeholder="enter the task" id="bara">
<button onclick="addV()">ADD</button>
<hr>
<h1>TO DO TASKS</h1>
<div id="t"></div>
</body>
</html>

and the JS (motor.js) is

let tasks = []

function addV(){
  if (document.getElementById("bara").value !=""){
    let x = document.getElementById("bara")
    tasks.push(x.value)
    document.getElementById("t").textContent = " " 

    var tempstring=""
     for(let i = 0;i<tasks.length;i++){

      tempstring=tempstring +"<br>"+ tasks[i];
    
      //const p = document.createElement("p");
      //    p.innerText += tasks[i]
      //    document.body.append(p)  
      }

    document.getElementById("t").innerHTML=tempstring;
    document.getElementById("bara").value="";
  }
}
user43KN0

If you need list of p

let tasks = []

  function addV() {
    let x = document.getElementById("bara")
    tasks.push(x.value)
    const instance = document.getElementById("t")
    instance.innerHTML = '';
    for (let i = 0; i < tasks.length; i++) {
      const p = document.createElement("p");

      p.innerText += tasks[i];
      instance.appendChild(p);
    }

  }
SwaD0

Your DOM p tag was inside the loop thus out of scope. I also created a new taskArray to hold the new tasks. This can be seen in the console log and the innerHTML is now displaying each new task just the one time.

let tasks = []

function addV() {
  let x = document.getElementById("bara")
  tasks.push(x.value)
  document.getElementById("t").textContent = " "

  let taskArray = [];
  const p = document.createElement("p");

  for (let i = 0; i < tasks.length; i++) {
    p.innerText = tasks[i]
    document.body.append(p)
    taskArray.push(tasks[i]);
  }
  console.log(taskArray);
}
<!DOCTYPE html>
<html>

<head>
  <title>To Do</title>
</head>

<body>
  <script src="motor.js"></script>
  <p>Task</p>
  <input type="search" placeholder="task" id="bara">
  <button onclick="addV()">ADD</button>
  <hr>
  <h1>TO DO TASKS</h1>
  <p id="t"></p>
</body>

</html>

Dzeimsas Zvirblis0
Related