如何使用 Javascript 选择当前 div

Question

我有模仿调查的代码。 基本上有问题和一些选项。 我试图做的是一些“面向对象”的事情，让我们说。

所以我对每个问题进行分组，在每个问题下我可以添加许多选项，但所有选项都应该属于他们的问题。

一个问题将有一个questionName和一个选项列表。 我已经实现了问题的分组，但我不知道如何准确选择当前问题，以便当用户添加选项时，它们将被添加到最后一个问题中。

这是我的代码：

 newQuestion() function newQuestion() { // Create a variable which is basically the questionaire from the html var questionaire = document.getElementById('questionaire'); /* HERE I AM CREATING A DIV WHICH WILL BE REPRESENTING EACH QUESTION */ // Create a variable which is a new div to be the question const question = document.createElement('div'); // add classname and put it as a child of questionaire question.classList.add("question"); questionaire.append(question); /* HERE I AM CREATING A DIV WHICH WILL BE REPRESENTING THE QUESTION NAME */ // Create a variable which is a new div to be the question name const qname = document.createElement('div'); // add a classname, make it editable and set the text to be shown qname.classList.add("qName"); qname.innerHTML = '<div contenteditable="true">Your Question</div>'; // put qName as a child of question question.appendChild(qname); // add a new option and pass as parameter the question newOption(question) } function newOption(father) { /* IF THERE IS AN ARGUMENT, father is the question where this option will belong */ // else you need to get the question from the html if (arguments.length == 0) { // select current question /* PROBLEM IS HERE BUT DON'T KNOW HOW TO FIX*/ var father = document.getElementsByClassName('question')[0]; } // Create a variable which is a new div to be an option const op = document.createElement('div'); // add a classname, make it editable and set the text to be shown op.classList.add("option"); op.innerHTML = '<div> <ul id="optionList"> <li class="optionName" contenteditable="true">Option <li class="box"> <input type="checkbox"> </li> </ul> </div>'; // put option as a child of question father.appendChild(op); }

 body { background-color : #00ffaa; } #myText { margin-top : 15px; font-family : 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; text-align : center; } .question { border : 3px solid black; border-radius : 25px; margin : 30px 200px 20px 200px; } .qName { color : rgb(86, 17, 150); margin-top : 10px; font-size : 25px; text-align : center; } .optionname { margin-left : -50px; } .box { margin-left : 90px; } .option { display : table; margin-left : auto; margin-right : auto; margin-top : 10px; } ul#optionList li { display : inline; } .optionName { font-size : 19px; font-style : oblique; }

 <h1 id="myText" contenteditable="true">Survey Name</h1> <button type="button" id="addQuButton" onclick="newQuestion()"> Add Question </button> <button type="button" id="addOpButton" onclick="newOption()"> Add Option </button> <form> <div id="questionaire"></div> </form>

HTML 代码：（只是调查的基本结构）
JAVASCRIPT 代码：（这是我有 2 个功能来添加问题和选项的大部分工作）
CSS 代码：（这里只是为了样式）

如果有人知道如何帮助处理此代码，或者您认为其他方法会更好，我们将不胜感激。 谢谢你。

Answer 1

我最终改变的比最初预期的要多。 有多个id和深度嵌套的<div><div><ul><li><li> ...结构在许多情况下会导致无效的 html。 出于这个原因，我简化了您的标记和 JavaScript 代码。 我还冒昧地创建了多个“添加选项”按钮（每个问题一个）。 该页面到目前为止还没有准备好，但我希望它可以成为去哪里的指针......

 const questionnaire=document.getElementById('questionaire'); newQuestion(); function newQuestion() { questionnaire.insertAdjacentHTML('beforeend', `<div class="question"> <div contenteditable="true">Your Question</div> <ul></ul> <button type="button">Add Option</button> </div>`); newOption(questionnaire.querySelector("div.question:last-child ul")); } function newOption(q) { q.insertAdjacentHTML('beforeend', `<li class="optionName"> <span contenteditable="true">Option</span> <input type="checkbox"> </li>`); } questionnaire.onclick=ev=>{ if (ev.target.tagName==="BUTTON") newOption( ev.target.closest(".question").querySelector('ul') ) } document.getElementById("addQuButton").onclick=newQuestion

 body { background-color : #ccc; } #myText { margin-top : 15px; font-family : 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; text-align : center; } .question { border : 3px solid black; border-radius : 25px; margin : 30px 200px 20px 200px; text-align : center; } .question ul li { display : block; }

 <h1 id="myText" contenteditable="true">Survey Name</h1> <button type="button" id="addQuButton">Add Question</button> <form> <div id="questionaire"></div> </form>

Answer 2

请检查 newOption(father) 函数中新增行和修改行

 newQuestion() function newQuestion() { // Create a variable which is basically the questionaire from the html var questionaire = document.getElementById('questionaire'); /* HERE I AM CREATING A DIV WHICH WILL BE REPRESENTING EACH QUESTION */ // Create a variable which is a new div to be the question const question = document.createElement('div'); // add classname and put it as a child of questionaire question.classList.add("question"); questionaire.append(question); /* HERE I AM CREATING A DIV WHICH WILL BE REPRESENTING THE QUESTION NAME */ // Create a variable which is a new div to be the question name const qname = document.createElement('div'); // add a classname, make it editable and set the text to be shown qname.classList.add("qName"); qname.innerHTML = '<div contenteditable="true">Your Question</div>'; // put qName as a child of question question.appendChild(qname); // add a new option and pass as parameter the question newOption(question) } function newOption(father) { /* IF THERE IS AN ARGUMENT, father is the question where this option will belong */ // else you need to get the question from the html if (arguments.length == 0) { // select current question /* PROBLEM IS HERE BUT DON'T KNOW HOW TO FIX*/ var fatherlen = document.getElementsByClassName('question').length;//newly added one var father = document.getElementsByClassName('question')[fatherlen-1];//modified } // Create a variable which is a new div to be an option const op = document.createElement('div'); // add a classname, make it editable and set the text to be shown op.classList.add("option"); op.innerHTML = '<div> <ul id="optionList"> <li class="optionName" contenteditable="true">Option <li class="box"> <input type="checkbox"> </li> </ul> </div>'; // put option as a child of question father.appendChild(op); }

 body { background-color : #00ffaa; } #myText { margin-top : 15px; font-family : 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; text-align : center; } .question { border : 3px solid black; border-radius : 25px; margin : 30px 200px 20px 200px; } .qName { color : rgb(86, 17, 150); margin-top : 10px; font-size : 25px; text-align : center; } .optionname { margin-left : -50px; } .box { margin-left : 90px; } .option { display : table; margin-left : auto; margin-right : auto; margin-top : 10px; } ul#optionList li { display : inline; } .optionName { font-size : 19px; font-style : oblique; }

 <h1 id="myText" contenteditable="true">Survey Name</h1> <button type="button" id="addQuButton" onclick="newQuestion()"> Add Question </button> <button type="button" id="addOpButton" onclick="newOption()"> Add Option </button> <form> <div id="questionaire"></div> </form>