javascripthtmldom的問題-有解無憂

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>

基本上，當我第二次點擊我的添加按鈕時，我遇到了這個問題，它再次添??加了陣列中的第一個元素

uj5u.com熱心網友回復：

如果您需要 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);
    }

  }

uj5u.com熱心網友回復：

如果我正確理解您的需求，您不希望在執行輸入新任務時“重復”顯示先前輸入的“任務”（這將導致多次顯示以前的輸入任務）。

在這種情況下，請在更新之前清除元素“t”。

所以HTML是

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

JS（motor.js）是

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="";
  }
}

uj5u.com熱心網友回復：

您的 DOMp標記在回圈內，因此超出了范圍。我還創建了一個新taskArray的來容納新任務。這可以在控制臺日志中看到，innerHTML 現在只一次顯示每個新任務。

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>

轉載請註明出處，本文鏈接：https://www.uj5u.com/net/510242.html

標籤：javascripthtmldom

上一篇：您的應用程式中不應有多個路由器

下一篇：為什么在瀏覽器控制臺中使用JavaScript調整此輸入字??段值的行為與手動插入值不同？