Question

我正在尝试编写一个JavaScript代码，当您单击“添加”按钮时，该代码会再次打印body-tag中显示的内容。基本思想是添加作者。例如，假设只有1位作者，则用户不会单击“添加”按钮，而只会选择他是学生还是教师。现在假设特定实例有3位作者，然后他选择是作为学生还是作者1的教师，然后单击“添加”按钮。现在，对于作者2再次出现上述问题集，现在用户可以选择是否第二作者是学生或老师。对于第三作者，用户需要再次点击第二作者下方的“添加”，允许用户点击第三作者是学生还是教师。实际上，这可以针对多个作者进行。基本上，作者应该依次出现。我只能为第一位用户提供

json

我是JavaScript的新手。虽然代码部分工作，但我知道代码效率低，但我不知道如何做。如果有人知道更好或更有效的方法或算法，请建议我。

This is where I am going wrong for author 3 and till author n

Answer 1

正在进行的是您正在重写#next html元素而不是连接到它。您可以连接到HTML元素。您还需要将按钮移动到要附加到DOM的逻辑之外。我在需要附加的元素周围放了一个名为person-container的包装器：

<强> HTML

 <div id="person-container">
    <div>1</div>
    <p>Whom do you want to add ? </p>
    <label><input type="radio" name="add" value="student" onchange="showForm()">Student</label>
    <label><input type="radio" name="add" value="teacher" onchange="showForm()">Teacher</label>
 </div>
 <p id="next">
     <button id="addauth" onclick="addauthor()" value="1">Add</button>
 </p>

<强> JS

var no = 1;
function addauthor()
    {
        console.log('function is working');
        but = document.getElementById("addauth");
        no++;
        var newEle = document.createElement('div');
        newEle.classList.add = "person";
        newEle.innerHTML ='<br><div>'+no+'</div>   \
        <p>Whom do you want to add ? </p>    \
        <label><input type="radio" name="add" value="student" onchange="showForm()">Student</label>     \
        <label><input type="radio" name="add" value="teacher" onchange="showForm()">Teacher</label>     \
        <div id=""></div><br>';
        document.getElementById('person-container').appendChild(newEle);
    }

请参阅小提琴：https://jsfiddle.net/gt4c6zpL/4/

Javascript不能一个接一个地打印数据

1 个答案: