需要将用户数据附加到数组

Question

我最初的问题得到了回答，但我意识到，每次我尝试将用户数据推送到数组中时，它都不允许我做任何其他事情来将数据附加到数组，或者推送方法是唯一的方法。还是我应该创建一个新数组.......................... .....................

"use strict"

const names = ["Ben", "Joel", "Judy", "Anne"];
const scores = [88, 98, 77, 88];


const $ = selector => document.querySelector(selector);

const addScore = () => {
  //  get user entries
  const name = $("#name").value;
  const score = parseInt($("#score").value);
  let isValid = true;

  // check entries for validity
  if (name == "") {
    $("#name").nextElementSibling.textContent = "This field is required.";
    isValid = false;
  } else {
    $("#name").nextElementSibling.textContent = "";
  }

  if (isNaN(score) || score < 0 || score > 100) {
    $("#score").nextElementSibling.textContent = "You must enter a valid score.";
    isValid = false;
  } else {
    $("#score").nextElementSibling.textContent = "";
  }

  if (isValid) {
    names.push("#name");
    scores.push("#score");
    names[names.length] = name;
    scores[scores.length] = score;
    $("#name").value = "";
    $("#score").value = "";
  }

  $("#name").focus();



};

// display scores
const displayScores = () => {
  for (let i = 0; i < names.length; i++) {
    document.getElementById("scores_display").textContent += names[i] + " = " +
      scores[i] +
      "\n";
  }
};


document.addEventListener("DOMContentLoaded", () => {
  $("#add").addEventListener("click", addScore);
  $("#display_scores").addEventListener("click", displayScores())
  $("#name").focus();
});

<main>
  <h1>Use a Test Score array</h1>

  <div>
    <label for="name">Name:</label>
    <input type="text" id="name">
    <span></span>
  </div>

  <div>
    <label for="score">Score:</label>
    <input type="text" id="score">
    <span></span>
  </div>

  <div>
    <label>&nbsp;</label>
    <input type="button" id="add" value="Add to Array">
    <input type="button" id="display_scores" value="Display Scores">
  </div>

  <div>
    <textarea id="scores_display"></textarea>
  </div>
</main>

Answer 1

我之前的所有笔记都不正确。你的特设$ const 让我失望了！我很抱歉。

问题是您在更新数组后没有调用 displayScores()。另外，我在该函数中添加了一行，以在遍历数据之前清除现有文本。

"use strict"

const names = ["Ben", "Joel", "Judy", "Anne"];
const scores = [88, 98, 77, 88];


const $ = selector => document.querySelector(selector);

const addScore = () => {
  //  get user entries
  const name = $("#name").value;
  const score = parseInt($("#score").value);
  let isValid = true;

  // check entries for validity
  if (name == "") {
    $("#name").nextElementSibling.textContent = "This field is required.";
    isValid = false;
  } else {
    $("#name").nextElementSibling.textContent = "";
  }

  if (isNaN(score) || score < 0 || score > 100) {
    $("#score").nextElementSibling.textContent = "You must enter a valid score.";
    isValid = false;
  } else {
    $("#score").nextElementSibling.textContent = "";
  }

  if (isValid) {
    names.push("#name");
    scores.push("#score");
    names[names.length] = name;
    scores[scores.length] = score;
    $("#name").value = "";
    $("#score").value = "";
    // add to the textarea
    displayScores()
  }

  $("#name").focus();
};

// display scores
const displayScores = () => {
  document.getElementById("scores_display").textContent = "";
  for (let i = 0; i < names.length; i++) {
    document.getElementById("scores_display").textContent += names[i] + " = " +
      scores[i] +
      "\n";
  }
};


document.addEventListener("DOMContentLoaded", () => {
  $("#add").addEventListener("click", addScore);
  $("#display_scores").addEventListener("click", displayScores())
  $("#name").focus();
});

<main>
  <h1>Use a Test Score array</h1>

  <div>
    <label for="name">Name:</label>
    <input type="text" id="name">
    <span></span>
  </div>

  <div>
    <label for="score">Score:</label>
    <input type="text" id="score">
    <span></span>
  </div>

  <div>
    <label>&nbsp;</label>
    <input type="button" id="add" value="Add to Array">
    <input type="button" id="display_scores" value="Display Scores">
  </div>

  <div>
    <textarea rows="6" id="scores_display"></textarea>
  </div>
</main>