个人中心
gpt4 book ai didi

Javascript - 无法将动态按钮添加到表单中

转载 作者：行者123 更新时间：2023-12-02 17:39:38 25 4
gpt4 key购买 nike

我在 javascript 中的函数方面遇到了一些问题。我有一种表单，要求用户输入一个问题和一个整数(我有一个问题的标签和输入，一个整数的标签和输入)。

如果用户有几个问题要问，我有一个按钮可以创建问题。

这是 html 代码:

    <!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
  </head>

  <body>
    <form id="libre"></form>
    <script type="text/javascript" src="jquery-1.11.0.min.js"> </script>
    <script type="text/javascript" src="q_libre.js"> </script>
  </body>
</html>

和js文件:

function create_question(form,nb) {

      var lbl_q=document.createElement("label");
        lbl_q.setAttribute("id","lbl_q"+nb);
        var output_q=document.createTextNode("Enter your question : ");
        lbl_q.appendChild(output_q);

        var input_q = document.createElement("input");
        input_q.setAttribute("id","input_q"+nb);

        var lbl_w = document.createElement("label");
        lbl_w.setAttribute("id","lbl_w"+nb);
        var output_w = document.createTextNode("Maximum of words for the answer : ");
        lbl_w.appendChild(output_w);

        var input_w = document.createElement("input");
        input_w.setAttribute("id","input_w"+nb);


        form.appendChild(lbl_q);
        form.appendChild(input_q);
        form.appendChild(lbl_w);
        form.appendChild(input_w);

    }



    $(document).ready(function () {

        var nb_q = 0;
        var form=document.getElementById("libre");

        var but_create = document.createElement("button");
        but_create.setAttribute("id","create_b");
        var output_c = document.createTextNode("Create exercise");
        but_create.appendChild(output_c);

        var add_question = document.createElement("button");
        var text_add = document.createTextNode("Add questions");
        add_question.setAttribute("id","add_q");
        add_question.appendChild(text_add);
        add_question.onclick = function () { create_question(form,nb_q);};

        create_question(form,nb_q++);
        form.appendChild(add_question);
        form.appendChild(but_create);

    });

问题是标签和输入的创建是在一个函数中，当我单击“添加问题”按钮时，我可以看到新的标签和输入，但它们立即消失!

我是 Javascript 世界的新手，所以有人有保留新标签和输入的想法吗？是不是要在函数中包含这段代码？

谢谢

最佳答案

在没有任何带有 submit 类型的 input 元素的表单内，单击按钮将提交表单。在您的情况下，form 元素没有 action 属性，因此您的页面将重新加载，这会导致新插入的元素“消失” “。

要阻止单击按钮时提交表单，请在 onclick 事件处理程序中返回 false。编辑此行:

add_question.onclick = function () { create_question(form,nb_q);};

至:

add_question.onclick = function () { create_question(form,nb_q); return false;};

但是，您可以使用 jQuery 以更简单的方式创建新元素。只需从其文档中学习即可。

关于Javascript - 无法将动态按钮添加到表单中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22331431/

25 4 0
文章推荐： javascript - 目标转换问题 - var 修改
文章推荐： php - 将 ContainerInterface 作为参数传递时出错
文章推荐： PHP检查是否设置了数组索引并且没有超出范围
文章推荐： javascript - jQuery.Deferred 是如何使用可选的 new 关键字实现的？
行者123
个人简介

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

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