Question

我对Java语言还很陌生，所以请原谅我犯的简单错误。我需要制作任务板页面。用户输入一个值（任务和日期），然后JS将其保存到对象中。该对象被推入阵列并保存到本地存储。之后，它会淡入一个注释中（此注释带有图像和CSS效果）并在其顶部打印该值。为此，我尝试使用For循环从本地存储取回数组时遍历该数组，但它只会继续打印用户输入的第一个值。

这是我的代码：

var taskArray = [];
var imgs = document.getElementsByTagName("img");
$(document).ready(function hideImages() {
  $("img").hide();
})

function saveToLocalStorage() {
  //debugger;
  var taskName = document.getElementById("task").value;
  var taskDate = document.getElementById("date").value;

  var task = {
    name: taskName,
    date: taskDate
  }


  taskArray.push(task);
  var arrayToString = JSON.stringify(taskArray);
  localStorage.setItem("user tasks", arrayToString);
  var mainDiv = document.getElementById("maindiv");
  var arrayFromStorage = localStorage.getItem('user tasks');
  arrayFromStorage = JSON.parse(arrayFromStorage);
  for (let index = 0; index < arrayFromStorage.length; index++) {
    mainDiv.innerHTML += `
         <span class="relative">
         <img src="../assets/images/notebg.png" class="fade-in start imgSpacing" alt="">
         <span class="centerOnNote" id="textspan">
         Your task = ${arrayFromStorage[x].name}
         Complete by = ${arrayFromStorage[x].date}
         </span>
         `
    x++
    addText();
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
  <link rel="stylesheet" href="styles.css">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
  <title></title>
</head>

<body class="background-image">
  <h1 class="pageheader">My Task Board</h1>
  <form class="" action="index.html" method="post">
    <div class="container">
      <div class="row">
        <input type="text" class="form-control col-sm centerInput" id="task" placeholder="Enter a Task">
        <input type="date" class="form-control col-sm centerInput" id="date" value="">
      </div>
      <div class="form-group">
        <input type="button" class="form-control btn btn-success" id="submit" value="Submit Task" onclick="saveToLocalStorage()">
      </div>
      <div class="form-group">
        <input type="reset" class="form-control btn btn-success " id="reset" value="Reset Form">
      </div>
    </div>
  </form>
  <div class="imgContainer" id="maindiv">
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    <script type="text/javascript" src="scripts.js"></script>
    <!-- load the script at the end of body tag -->
</body>

</html>

任何帮助将不胜感激，欢呼！

Answer 1

尝试将index而不是x放入循环中。

for (let index = 0; index < arrayFromStorage.length; index++) {
   mainDiv.innerHTML +=
    `
   <span class="relative">
   <img src="../assets/images/notebg.png" class="fade-in start imgSpacing" alt="">
   <span class="centerOnNote" id="textspan">
   Your task = ${arrayFromStorage[index].name}
   Complete by = ${arrayFromStorage[index].date}
   </span>
   `
}

如何使此循环打印所需的值？

1 个答案: