appendChild 函数不在表单上添加标签

Question

我正在尝试输入一个问题并将该问题显示为表单中的一个元素，"survey-form"。但是，当我使用 JavaScript 将子节点附加到 "survey-form" 时，文本会出现半秒钟然后消失。标签元素似乎已附加但随后被删除。关于如何解决这个问题的任何想法？

window.onload = init;

function init() {
  document.getElementById("question-form").addEventListener("submit",
    validateQuestion);
}

function validateQuestion() {
  let questionValue = document.getElementById("question-box").value;
  if (questionValue == "" || questionValue == undefined) {
    alert("Fill the box with information so it can be added to the survey!");
    return;
  } else {
    addQuestion(questionValue);
  }
}

function addQuestion(question) {
  let label = document.createElement("label");
  label.innerHTML = question;

  document.getElementById("survey-form").appendChild(label);
}

<!DOCTYPE html>
<html>

<head>
  <title>Create Your Own Survey</title>
  <link rel="stylesheet" type="text/css" href="index.css">
  <script type="text/javascript" src="index.js"></script>
</head>

<body>
  <div id="model-side">
    <form id="question-form" method="" action="">
      <label>Create a question for the survey:</label>
      <input id="question-box" type="text" size="35" /><br/>
      <input type="submit" value="Submit Question" />
    </form>
  </div>

  <div id="view-side">
    <form id="survey-form" method="" action="">
      <label>Current View</label>
    </form>
  </div>
</body>

</html>

Answer 1

只需添加：event.preventDefault().

The Event interface's preventDefault() method tells the user agent that if the event does not get explicitly handled, its default action should not be taken as it normally would be. The event continues to propagate as usual, unless one of its event listeners calls stopPropagation() or stopImmediatePropagation(), either of which terminates propagation at once.

像这样：

window.onload = init;

function init() {
  document.getElementById("question-form").addEventListener("submit",
    validateQuestion);
}

function validateQuestion(event) { // Add event to get the question-form context.
  event.preventDefault(); // Prevent the default action of the question-form in the form submission.
  let questionValue = document.getElementById("question-box").value;
  if (questionValue == "" || questionValue == undefined) {
    alert("Fill the box with information so it can be added to the survey!");
  } else {
    addQuestion(questionValue);
  }
}

function addQuestion(question) {
  let label = document.createElement("label");
  label.innerHTML = question;

  document.getElementById("survey-form").appendChild(label);
}

<!DOCTYPE html>
<html>

<head>
  <title>Create Your Own Survey</title>
  <link rel="stylesheet" type="text/css" href="index.css">
  <script type="text/javascript" src="index.js"></script>
</head>

<body>
  <div id="model-side">
    <form id="question-form" method="" action="">
      <label>Create a question for the survey:</label>
      <input id="question-box" type="text" size="35" /><br/>
      <input type="submit" value="Submit Question" />
    </form>
  </div>

  <div id="view-side">
    <form id="survey-form" method="" action="">
      <label>Current View</label>
    </form>
  </div>
</body>

</html>

appendChild 函数不在表单上添加标签

appendChild function not adding label onto form

javascript

forms

dom

appendchild