I have a website where I can add questions, I can add many questions and many options to every question.
My problem is that when I try to add a 2nd option to any question, the whole webpage refreshes and all my elements are disappearing.
I have no idea why, I have tried debugging and the option is being created correctly and successfully and just after it exits the method it just disappears.
If anyone knows what the problem may be or has seen something similar I would appreciate the help.
My code is:
const questionnaire = document.getElementById('questionaire');
var optionsCounter = 0, optionsVector = [], questionsArray = [], optionsQN = 0;
questionnaire.onclick = ev => {
if (ev.target.tagName === "BUTTON") {
switch (ev.target.className) {
case "remove-qu":
switch (ev.target.parentNode.className) {
case "opQuestion":
optionsQN--;
document.getElementById('numberOfOptionsQuestions').innerHTML = "Option Questions = " optionsQN;
break;
}
ev.target.parentNode.remove();
break;
case "add-li":
newOption(ev.target.closest(".opQuestion").querySelector('ul'), true)
break;
}
}
else {
switch (ev.target.className) {
case "remove-li":
optionsCounter--;
optionsVector.pop(ev.target);
ev.target.parentNode.remove();
break;
case "save-li":
saveEdits(ev.target);
break;
}
}
}
function saveEdits(caller) {
var callerType = caller.className;
switch (callerType) {
case "save-li":
var editElem = caller.previousElementSibling.previousElementSibling.previousElementSibling.innerHTML;
var numberOfSubquestion = caller.previousElementSibling.previousElementSibling.previousElementSibling.id;
var id = numberOfSubquestion.substr(5, (numberOfSubquestion.length - 1)); // Gets the first part
var questionNumber = id[0];
var optionNumber = id[1];
document.getElementById("question" questionNumber).childNodes[1].childNodes[optionNumber].childNodes[0].innerHTML = editElem;
break;
}
}
function newOpQuestion(questionNumber) {
optionsQN ;
document.getElementById('numberOfOptionsQuestions').innerHTML = "Option Questions = " optionsQN;
// Create: questionDiv -> nameDiv, ul
var question = document.createElement('div');
var nameDiv = document.createElement('div');
var removeButton = document.createElement('button');
var saveButton = document.createElement('button');
var unorderedList = document.createElement('ul');
var addOptionButton = document.createElement('button');
// Create: div id's
var questionId = "question" "" questionNumber;
var nameDivId = "label" "" questionNumber;
var removeButtonId = "removeButton" "" questionNumber;
var saveButtonId = "saveButton" "" questionNumber;
var addOptionButtonId = "addOptionButton" "" questionNumber;
question.id = questionId;
nameDiv.id = nameDivId;
removeButton.id = removeButtonId;
saveButton.id = saveButtonId;
addOptionButton.id = addOptionButtonId;
removeButton.className = "remove-qu";
saveButton.className = "save-qu";
nameDiv.className = "questionName";
question.className = "opQuestion";
addOptionButton.className = "add-li";
nameDiv.appendChild(document.createTextNode('Your Question'));
removeButton.appendChild(document.createTextNode('Remove Question'));
saveButton.appendChild(document.createTextNode('Save Question'));
addOptionButton.appendChild(document.createTextNode('Add Option'));
question.append(nameDiv);
question.append(removeButton);
question.append(saveButton);
question.append(unorderedList) // Add optionDiv as child of li
question.append(addOptionButton);
questionnaire.append(question);
newOption(unorderedList);
}
function newOption(q) {
optionsCounter ;
optionsVector.push(q);
// Create: li -> span(label), input(checkbox), span(remove-li), span(save-li)
var option = document.createElement('li');
var checkbox = document.createElement('input');
var label = document.createElement('span');
var removeButton = document.createElement('span');
var saveButton = document.createElement('span');
// createId for all
var optionId = "option" "" (optionsQN - 1) (optionsCounter - 1);
var checkBoxId = "checkbox" "" (optionsQN - 1) (optionsCounter - 1);
var labelId = "label" "" (optionsQN - 1) (optionsCounter - 1);
var removeButtonId = "remove-li" "" (optionsQN - 1) (optionsCounter - 1);
var saveButtonId = "save-li" "" (optionsQN - 1) (optionsCounter - 1);
// set id's for all
checkbox.type = "checkbox";
label.id = labelId;
label.contentEditable = "true";
option.id = optionId;
checkbox.id = checkBoxId;
removeButton.id = removeButtonId;
saveButton.id = saveButtonId;
// set class names for all
option.className = "optionName";
removeButton.className = "remove-li";
saveButton.className = "save-li";
checkBoxId.htmlFor = option;
label.appendChild(document.createTextNode('Option'));
saveButton.appendChild(document.createTextNode('Save Option'));
removeButton.appendChild(document.createTextNode('Remove Option'));
option.appendChild(label); //add `label` to `li`
option.appendChild(checkbox); //add `checkbox` to `li`
option.appendChild(removeButton);
option.appendChild(saveButton);
q.appendChild(option)
}
document.getElementById("addOpQuButton").onclick = function () { newOpQuestion(optionsQN); };
body {
background-color: #1D2228;
}
#myText {
color:white;
margin: 20px;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
text-align: center;
font-size: 40px;
}
.opQuestion {
border: 3px solid white;
border-radius: 25px;
color:white;
margin: 30px 200px 20px 200px;
text-align: center;
}
#addOpQuButton {
font-size: 15px;
padding-top: 2px;
padding-bottom: 2px;
padding-left: 15px;
padding-right: 15px;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
background-color: #FB8122;
border: 2px solid white;
border-radius: 25px;
color: white;
margin-bottom: 10px;
cursor: pointer;
}
.questionName {
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
font-size: 25px;
font-weight: 600;
font-style: italic;
margin-top: 10px;
text-align: center;
}
.opQuestion ul li {
display: block;
}
.optionName{
font-size: 21px;
padding: 5px;
font-style: oblique;
}
.remove-li, .save-li {
font-size: 15px;
margin-left: 10px;
padding-top: 2px;
padding-bottom: 2px;
padding-left: 15px;
padding-right: 15px;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
font-style: normal;
background-color:#FB8122;
border: 2px solid white;
border-radius: 25px;
color: white;
cursor: pointer;
}
.remove-qu, .save-qu {
font-size: 18px;
margin-top: 10px;
margin-bottom: 15px;
margin-left: 10px;
padding-top: 2px;
padding-bottom: 2px;
padding-left: 15px;
padding-right: 15px;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
font-style: normal;
background-color: #FB8122;
border: 2px solid white;
border-radius: 25px;
color: white;
cursor: pointer;
}
.add-li{
font-size: 15px;
margin-top: 5px;
padding-top: 2px;
padding-bottom: 2px;
padding-left: 15px;
padding-right: 15px;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
background-color: lightseagreen;
border: 2px solid white;
border-radius: 25px;
color: white;
margin-bottom: 10px;
text-align: center;
cursor: pointer;
}
<h1 id="myText" contenteditable="true">Survey Name</h1>
<div id="buttons">
<button type="button" id="addOpQuButton">Options</button>
</div>
<form>
<div id="questionaire"></div>
</form>
<p id="numberOfOptionsQuestions"></p>CodePudding user response：
If you click a <button> when inside a <form> element then the form will submit. See this example:
document.forms[0].addEventListener('submit', e => alert('get submitted!'));<form>
<button>click me</button>
</form>So if you want to stop that from happening, you can either change from <button> to <input type="button">:
document.forms[0].addEventListener('submit', e => alert('get submitted!'));<form>
<input type="button" value="click me">
</form>or you can add e.preventDefault(); to the onclick handler for the button.
document.forms[0].addEventListener('submit', e => alert('get submitted!'));
document.getElementsByTagName('button')[0].addEventListener('click', e => e.preventDefault());<form>
<button>click me</button>
</form>