个人中心
gpt4 book ai didi

javascript - appendChild 函数未在表单上添加标签

转载 作者：行者123 更新时间：2023-12-03 03:03:53 25 4
gpt4 key购买 nike

我正在尝试输入一个问题，并将该问题显示为表单“调查表单”中的一个元素。但是，当我使用 JavaScript 将子节点附加到“调查表单”时，文本会出现半秒然后消失。似乎标签元素被附加但随后被删除。知道如何解决这个问题吗？ 

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>

最佳答案

只需添加: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>

关于javascript - appendChild 函数未在表单上添加标签，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47257313/

25 4 0
文章推荐： javascript - 如何在三元运算符Angularjs中内联调用window.location.pathname
文章推荐： javascript - 我可以将这些数据转换为json并使用表单POST而不是ajax发送吗
文章推荐： javascript - 如何通过 React 使用 Google Map Places API？
文章推荐： javascript - 需要 Node 中的模块
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com