为什么单击按钮后所有 HTML 元素都会消失？

问题描述 投票：0回答：1

我有一个网站，我可以在其中添加问题以及每个问题的许多选项。

当我尝试为任何问题添加第二个选项时，整个网页都会刷新，所有元素都会消失。

我尝试过调试，并且该选项已正确且成功地创建，但退出该方法后页面就消失了。

这是我的代码：

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 class="counters" id="numberOfOptionsQuestions"></p>

javascript html css
1个回答
7
投票

如果您在 

<button>
元素内单击 
<form>
，则表单将提交。看这个例子：

document.forms[0].addEventListener('submit', e => alert('get submitted!'));
<form>
<button>click me</button>
</form>

因此，如果您想阻止这种情况发生，您可以从 

<button>
更改为 
<input type="button">
:

document.forms[0].addEventListener('submit', e => alert('get submitted!'));
<form>
<input type="button" value="click me">
</form>

或者您可以将 

e.preventDefault();
添加到按钮的 
onclick
处理程序。

document.forms[0].addEventListener('submit', e => alert('get submitted!'));
document.getElementsByTagName('button')[0].addEventListener('click', e => e.preventDefault());
<form>
<button>click me</button>
</form>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.