Question

我在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);

    });

问题在于标签和输入的创建是在一个功能中，当我点击按钮＆＃34;添加问题＆＃34;时，我可以看到新的标签和输入，但它们会立即消失！

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

感谢＆＃39; S

Answer 1

在没有任何input元素且submit类型的表单中，单击按钮将提交表单。在您的情况下，form元素没有action属性，因此您的网页将重新加载，这会导致新插入的元素＆＃34;消失＆＃34;

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

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

为：

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

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

Answer 2

你应该返回false

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

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

2 个答案: