[英]Using JavaScript to clear array values on buttons onclick?
学习 JS,需要一些帮助。 由于堆栈溢出,我现在有一个 function 显示加载的主题列表。 我希望在单击并替换为第二个 function 数组时清除按钮值。 这是创建一组新按钮,我可以看到问题出在哪里,但不知道如何纠正它。 我尝试了几种方法,但没有运气,这是基本代码。 它被分配给 HTML 文档中的“主题”div。
let subjectArray = ['Maths', 'English', 'Science', 'IT'];
function printSubjects() {
for (let i = 0; i < subjectArray.length; i++) {
let sub = document.createElement('button');
let txt = document.createTextNode(subjectArray[i]);
sub.append(txt);
subjects.appendChild(sub);
sub.className = "btn btn-outline-primary mb-2";
}
}
let testArray = ['Test 1', 'Test 2', 'Test 3', 'Go Back'];
function printTest() {
for (let i = 0; i < testArray.length; i++) {
let test = document.createElement('buttons');
let txt = document.createTextNode(testArray[i]);
test.append(txt);
subjects.append(test);
test.className = "btn btn-outline-secondary mb-2";
}
}
window.onload = printSubjects();
document.body.addEventListener("click", printTest, {
once: true
})
通过清除父Div
的innerHTML
将起作用。
document.getElementById("subject").innerHTML = "";
工作演示:
let subjectArray = ['Maths', 'English', 'Science', 'IT']; let testArray = ['Test 1', 'Test 2', 'Test 3', 'Go Back']; let subjects = document.getElementById("subject"); function printSubjects() { for (let i = 0; i < subjectArray.length; i++) { let sub = document.createElement('button'); let txt = document.createTextNode(subjectArray[i]); sub.append(txt); subjects.appendChild(sub); sub.className = "btn btn-outline-primary mb-2"; } } function printTest() { document.getElementById("subject").innerHTML = ""; for (let i = 0; i < testArray.length; i++) { let test = document.createElement('button'); let txt = document.createTextNode(testArray[i]); test.append(txt); subjects.append(test); test.className = "btn btn-outline-secondary mb-2"; } } window.onload = printSubjects(); document.body.addEventListener("click", printTest, { once: true })
<div id="subject"> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.