gpt4 book ai didi

JavaScript 无法逐个打印数据

转载 作者:行者123 更新时间:2023-11-28 05:58:25 24 4
gpt4 key购买 nike

我正在尝试编写一段 JavaScript 代码,当您单击“添加”按钮时,它会再次打印正文标记中存在的任何内容。基本思想是添加作者。例如,假设只有 1 位作者,那么用户不会单击添加按钮,而仅选择他是学生还是教师。现在假设某个特定实例有 3 位作者,然后他选择作者 1 的学生还是老师,然后单击“添加”按钮。现在,作者 2 再次出现上述一组问题,现在用户可以选择是否第二作者是学生或老师。对于第三作者,用户需要再次单击出现在第二作者下方的“添加”,允许用户单击第三作者是学生还是教师。事实上,这可以对n位作者进行。基本上,作者应该按顺序一个接一个地出现。我只能为第一个用户实现它

<html>
<head>
<title>Authors</title>
<script>
function addauthor()
{
console.log('function is working');
var no;
but = document.getElementById("addauth");
no = Number(but.value)+1;
document.getElementById('next').innerHTML='<p><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> \
</p> \
<p id="next"> \
<button id="addauth" onclick="addauthor()" value="'+no+'">Add</button> \
</p>';
}
</script>
</head>
<body>
<p><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></div>
</p>
<p id="next">
<button id="addauth" onclick="addauthor()" value="1">Add</button>
</p>
</body>
</html>

我是 JavaScript 新手。虽然代码部分有效,但我知道代码效率低下,但我不确定如何执行。如果有人知道更好或有效的方法或算法,请建议我。

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

最佳答案

发生的事情是您正在重写 #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);
}

参见 fiddle :https://jsfiddle.net/gt4c6zpL/4/

关于JavaScript 无法逐个打印数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37469447/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com