如何使用 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>