Question

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

＆＃13;

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);
}

＆＃13;

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

＆＃13;

Answer 1

只需添加：event.preventDefault()。

Event接口的preventDefault()方法告诉用户代理如果事件没有得到明确处理，则默认操作不应该像通常那样采取。事件继续发生像往常一样传播，除非其中一个事件监听器调用 stopPropagation()或stopImmediatePropagation()，其中任何一个立即终止传播。

这样的事情：

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函数不在表单上添加标签

1 个答案: