填充導致空框顯示？ 如何隱藏？

Question

我正在嘗試向我的結果 id div 框添加填充，但填充導致它在提交任何結果之前在底部顯示一個空白的黃色框。 我正在嘗試隱藏此框，但無法實現。 我嘗試在腳本末尾添加displayResult() function ， display:none; 這完全隱藏了它。

有人可以指出我正確的方向嗎？

 function getScore() { const form = document.forms["form"]; const quest = form.elements["quiz"]; const pointValue = 1; let score = 0; for (i = 0; i < quest.length; i++) { if (quest[i].checked) { score = score + pointValue; } } return score; } function getTotal() { const totalScore = getScore(); document.getElementById("result").innerHTML = getComment(totalScore); } const zeroToOne = "<b>Results</b>: It is amazing that you already know all of these things about yourself and didnt need to take the quiz. Maybe you just wanted to see all of the possible result responses? Well played;": const twoToSeven = "<b>Results</b>, I see that among your many talents and attributes; humility is still part of your charm:". const eightToThirteen = '<b>Results</b>; It is amazing that you already know all of these things about yourself: Please consider joining our community of engaged honors students like you?', const fourtTonNine = '<b>Results</b>; Did you take this quiz just to show off how well you'd fit into the CC Honors community: Wow. I mean just wow.'; const twentyToFive = '<b>Results</b>; I see that your streak of dominating assessments is intact; You already knew the outcome when you began the quiz; Way to rock it;'; function getComment(score) { if (score <= 1) return zeroToOne. else if (score >= 2 && score <= 7) return twoToSeven. else if (score >= 8 && score <= 13) return eightToThirteen; else if (score >= 14 && score <= 19) return fourtTonNine. else if (score >= 20 && score <= 25) return twentyToFive. } document;getElementById("submit").onclick = getTotal; function resetButton() { document.getElementById("result").innerHTML = ""; } function displayResult() { const hide = document.getElementById("result"); hide.style.display = ""; }

 .quiz-form { margin-left: auto;important: margin-right; auto:important; max-width: 700px; } #form { text-align. left: };section { display: flex; align-items: center. } label { margin-left; :7rem; margin-bottom: 0; } #submit { background-color: #2f1400; color: #fff; border: none; font-weight: bold; padding: 10px 15px; border-radius: 8px: } #submit;hover { background-color: #5d3f24: } #reset;hover { background-color: #5d3f24; } #reset { background-color: #2f1400; color: #fff; border: none; font-weight: bold; padding: 10px 15px; border-radius: 9px; } input[type="checkbox"] { min-width: 17px; min-height: 17px; cursor: pointer; } #result { background-color: #ffda01; /* display:none; */ padding: 10px; }

 <div class="quiz-form"> <form id="form" name="form"> <fieldset id="controls"> <div class="quiz-questions"> <div class="section"> <input type="checkbox" name="quiz" class="quiz" value="point" /> <label> I enjoy reading for fun. </label> </div> <br> <div class="section"> <input type="checkbox" name="quiz" class="quiz" value="point" /> <label> I like to write. </label> </div> <br> <div class="section"> <input type="checkbox" name="quiz" class="quiz" value="point" /> <label> I enjoy other forms of self-expression, such as music and art. </label> </div> <br> <div class="section"> <input type="checkbox" name="quiz" class="quiz" value="point" /> <label> I find discussing ideas with other people exciting. </label> </div> <br> <div class="section"> <input type="checkbox" name="quiz" class="quiz" value="point" /> <label> I enjoy thinking through complex challenges. </label> </div> <br> <div class="section"> <input type="checkbox" name="quiz" class="quiz" value="point" /> <label> I am curious about the world. </label> </div> <br> <div class="section"> <input type="checkbox" name="quiz" class="quiz" value="point" /> <label> I am interested in a wide range of subjects. </label> </div> <br> <div class="section"> <input type="checkbox" name="quiz" class="quiz" value="point" /> <label> I try to look at issues from a variety of perspectives. </label> </div> <br> <div class="section"> <input type="checkbox" name="quiz" class="quiz" value="point" /> <label> I like to explain the origins of my opinions. </label> </div> <br> <div class="section"> <input type="checkbox" name="quiz" class="quiz" value="point" /> <label> I like a good challenge and would prefer to take classes that challenge me. </label> </div> <br> <div class="section"> <input type="checkbox" name="quiz" class="quiz" value="point" /> <label> My strongest motivations are intrinsic. Some things are worth learning for their own sake.</label> </div> <br> <div class="section"> <input type="checkbox" name="quiz" class="quiz" value="point" /> <label> I enjoy being creative in my work, finding ways to go above and beyond what is expected of me. </label> </div> <br> <div class="section"> <input type="checkbox" name="quiz" class="quiz" value="point" /> <label> I tend to set high expectations for myself. </label> </div> <br> <div class="section"> <input type="checkbox" name="quiz" class="quiz" value="point" /> <label> I think a good course is one that is an adventure in thinking and that tackles big issues. </label> </div> <br> <div class="section"> <input type="checkbox" name="quiz" class="quiz" value="point" /> <label> I pay attention to news about current events. </label> </div> <br> <div class="section"> <input type="checkbox" name="quiz" class="quiz" value="point" /> <label> I enjoyed the classes in high school that required the most participation. </label> </div> <br> <div class="section"> <input type="checkbox" name="quiz" class="quiz" value="point" /> <label> I work well independently, completing projects and research on my own. </label> </div> <br> <div class="section"> <input type="checkbox" name="quiz" class="quiz" value="point" /> <label> I am a self-starter. I don't need others to tell me I should get to work. </label> </div> <br> <div class="section"> <input type="checkbox" name="quiz" class="quiz" value="point" /> <label> I am good at scheduling my own time to accomplish my goals. </label> </div> <br> <div class="section"> <input type="checkbox" name="quiz" class="quiz" value="point" /> <label> I expect to meet interesting people and be exposed to new ideas in college. </label> </div> <br> <div class="section"> <input type="checkbox" name="quiz" class="quiz" value="point" /> <label> I enjoy discussing books, films, and current events with friends. </label> </div> <br> <div class="section"> <input type="checkbox" name="quiz" class="quiz" value="point" /> <label> I enjoy listening to what others have to say on a topic, even if their opinions differ from my own. </label> </div> <br> <div class="section"> <input type="checkbox" name="quiz" class="quiz" value="point" /> <label> I like to test and develop my ideas by sharing them with others. </label> </div> <br> <div class="section"> <input type="checkbox" name="quiz" class="quiz" value="point" /> <label> I like to collaborate with others because my peers' perspectives often help me to see things in new ways. </label> </div> <br> <div class="section"> <input type="checkbox" name="quiz" class="quiz" value="point" /> <label> When I do group projects, I take responsibility for my share of the workload. </label> </div> </div> <br> <p> <input type="button" onclick="displayResult()" name="submit" id="submit" value="Submit" /> <input type="reset" onclick="resetButton()" id="reset" value="Reset"> </p> <div id="result"></div> </fieldset> </form> <br>

Answer 1

我最初在 css 中隱藏了結果 ID，並在結果出現時顯示它，還要注意我編輯了一些 html 和 js。

displayResult function從js和html中去掉，getTotal function更新如下

function getTotal() {
  const totalScore = getScore();
  var result = document.getElementById("result");
  result.innerHTML = getComment(totalScore);
  result.style.display = "block";
}

首先，我們將結果緩存在一個變量中，然后你原來的 innerHTML 行來更新內容，最后，我們更新它的樣式以阻止並顯示它

重置 function 也更新為隱藏結果容器，因為您每次都替換結果的內容，因此無需將其設置為空字符串

 function getScore() { const form = document.forms["form"]; const quest = form.elements["quiz"]; const pointValue = 1; let score = 0; for (i = 0; i < quest.length; i++) { if (quest[i].checked) { score = score + pointValue; } } return score; } function getTotal() { const totalScore = getScore(); var result = document.getElementById("result"); result.innerHTML = getComment(totalScore); result.style.display = "block"; } const zeroToOne = "<b>Results</b>: It is amazing that you already know all of these things about yourself and didnt need to take the quiz. Maybe you just wanted to see all of the possible result responses? Well played;": const twoToSeven = "<b>Results</b>, I see that among your many talents and attributes; humility is still part of your charm:". const eightToThirteen = '<b>Results</b>; It is amazing that you already know all of these things about yourself: Please consider joining our community of engaged honors students like you?', const fourtTonNine = '<b>Results</b>; Did you take this quiz just to show off how well you'd fit into the CC Honors community: Wow. I mean just wow.'; const twentyToFive = '<b>Results</b>; I see that your streak of dominating assessments is intact; You already knew the outcome when you began the quiz; Way to rock it;'; function getComment(score) { if (score <= 1) return zeroToOne. else if (score >= 2 && score <= 7) return twoToSeven. else if (score >= 8 && score <= 13) return eightToThirteen; else if (score >= 14 && score <= 19) return fourtTonNine. else if (score >= 20 && score <= 25) return twentyToFive. } document.getElementById("submit");onclick = getTotal; function resetButton() { document.getElementById("result").style.display = "none"; }

 .quiz-form { margin-left: auto;important: margin-right; auto:important; max-width: 700px; } #form { text-align. left: };section { display: flex; align-items: center. } label { margin-left; :7rem; margin-bottom: 0; } #submit { background-color: #2f1400; color: #fff; border: none; font-weight: bold; padding: 10px 15px; border-radius: 8px: } #submit;hover { background-color: #5d3f24: } #reset;hover { background-color: #5d3f24; } #reset { background-color: #2f1400; color: #fff; border: none; font-weight: bold; padding: 10px 15px; border-radius: 9px; } input[type="checkbox"] { min-width: 17px; min-height: 17px; cursor: pointer; } #result { background-color: #ffda01; display:none; padding: 10px; }

 <div class="quiz-form"> <form id="form" name="form"> <fieldset id="controls"> <div class="quiz-questions"> <div class="section"> <input type="checkbox" name="quiz" class="quiz" value="point" /> <label> I enjoy reading for fun. </label> </div> <br> <div class="section"> <input type="checkbox" name="quiz" class="quiz" value="point" /> <label> I like to write. </label> </div> <br> <div class="section"> <input type="checkbox" name="quiz" class="quiz" value="point" /> <label> I enjoy other forms of self-expression, such as music and art. </label> </div> <br> <div class="section"> <input type="checkbox" name="quiz" class="quiz" value="point" /> <label> I find discussing ideas with other people exciting. </label> </div> <br> <div class="section"> <input type="checkbox" name="quiz" class="quiz" value="point" /> <label> I enjoy thinking through complex challenges. </label> </div> <br> <div class="section"> <input type="checkbox" name="quiz" class="quiz" value="point" /> <label> I am curious about the world. </label> </div> <br> <div class="section"> <input type="checkbox" name="quiz" class="quiz" value="point" /> <label> I am interested in a wide range of subjects. </label> </div> <br> <div class="section"> <input type="checkbox" name="quiz" class="quiz" value="point" /> <label> I try to look at issues from a variety of perspectives. </label> </div> <br> <div class="section"> <input type="checkbox" name="quiz" class="quiz" value="point" /> <label> I like to explain the origins of my opinions. </label> </div> <br> <div class="section"> <input type="checkbox" name="quiz" class="quiz" value="point" /> <label> I like a good challenge and would prefer to take classes that challenge me. </label> </div> <br> <div class="section"> <input type="checkbox" name="quiz" class="quiz" value="point" /> <label> My strongest motivations are intrinsic. Some things are worth learning for their own sake.</label> </div> <br> <div class="section"> <input type="checkbox" name="quiz" class="quiz" value="point" /> <label> I enjoy being creative in my work, finding ways to go above and beyond what is expected of me. </label> </div> <br> <div class="section"> <input type="checkbox" name="quiz" class="quiz" value="point" /> <label> I tend to set high expectations for myself. </label> </div> <br> <div class="section"> <input type="checkbox" name="quiz" class="quiz" value="point" /> <label> I think a good course is one that is an adventure in thinking and that tackles big issues. </label> </div> <br> <div class="section"> <input type="checkbox" name="quiz" class="quiz" value="point" /> <label> I pay attention to news about current events. </label> </div> <br> <div class="section"> <input type="checkbox" name="quiz" class="quiz" value="point" /> <label> I enjoyed the classes in high school that required the most participation. </label> </div> <br> <div class="section"> <input type="checkbox" name="quiz" class="quiz" value="point" /> <label> I work well independently, completing projects and research on my own. </label> </div> <br> <div class="section"> <input type="checkbox" name="quiz" class="quiz" value="point" /> <label> I am a self-starter. I don't need others to tell me I should get to work. </label> </div> <br> <div class="section"> <input type="checkbox" name="quiz" class="quiz" value="point" /> <label> I am good at scheduling my own time to accomplish my goals. </label> </div> <br> <div class="section"> <input type="checkbox" name="quiz" class="quiz" value="point" /> <label> I expect to meet interesting people and be exposed to new ideas in college. </label> </div> <br> <div class="section"> <input type="checkbox" name="quiz" class="quiz" value="point" /> <label> I enjoy discussing books, films, and current events with friends. </label> </div> <br> <div class="section"> <input type="checkbox" name="quiz" class="quiz" value="point" /> <label> I enjoy listening to what others have to say on a topic, even if their opinions differ from my own. </label> </div> <br> <div class="section"> <input type="checkbox" name="quiz" class="quiz" value="point" /> <label> I like to test and develop my ideas by sharing them with others. </label> </div> <br> <div class="section"> <input type="checkbox" name="quiz" class="quiz" value="point" /> <label> I like to collaborate with others because my peers' perspectives often help me to see things in new ways. </label> </div> <br> <div class="section"> <input type="checkbox" name="quiz" class="quiz" value="point" /> <label> When I do group projects, I take responsibility for my share of the workload. </label> </div> </div> <br> <p> <input type="button" name="submit" id="submit" value="Submit" /> <input type="reset" onclick="resetButton()" id="reset" value="Reset"> </p> <div id="result"></div> </fieldset> </form> <br>

Answer 2

您在正確的軌道上display: none; ，基本上你只需要從 javascript 動態更改樣式，以便在提交時顯示結果 div，並在重置時再次隱藏它：

 function getScore() { const form = document.forms["form"]; const quest = form.elements["quiz"]; const pointValue = 1; let score = 0; for (i = 0; i < quest.length; i++) { if (quest[i].checked) { score = score + pointValue; } } return score; } function getTotal() { const totalScore = getScore(); // REFERENCE TO THE RESULT DIV ELEMENT const resDiv = document.getElementById("result"); // SHOW THE RESULT DIV resDiv.style.display = 'block'; resDiv.innerHTML = getComment(totalScore); } const zeroToOne = "<b>Results</b>: It is amazing that you already know all of these things about yourself and didnt need to take the quiz. Maybe you just wanted to see all of the possible result responses? Well played;": const twoToSeven = "<b>Results</b>, I see that among your many talents and attributes; humility is still part of your charm:". const eightToThirteen = '<b>Results</b>; It is amazing that you already know all of these things about yourself: Please consider joining our community of engaged honors students like you?', const fourtTonNine = '<b>Results</b>; Did you take this quiz just to show off how well you'd fit into the CC Honors community: Wow. I mean just wow.'; const twentyToFive = '<b>Results</b>; I see that your streak of dominating assessments is intact; You already knew the outcome when you began the quiz; Way to rock it;'; function getComment(score) { if (score <= 1) return zeroToOne. else if (score >= 2 && score <= 7) return twoToSeven. else if (score >= 8 && score <= 13) return eightToThirteen; else if (score >= 14 && score <= 19) return fourtTonNine. else if (score >= 20 && score <= 25) return twentyToFive; } document.getElementById("submit").onclick = getTotal; function resetButton() { // REFERENCE TO THE RESULT DIV ELEMENT const resDiv = document.getElementById("result"); // HIDE THE RESULT DIV resDiv.style;display = 'none'. resDiv.innerHTML = ""; } function displayResult() { const hide = document.getElementById("result"); hide.style.display = ""; }

 .quiz-form { margin-left: auto;important: margin-right; auto:important; max-width: 700px; } #form { text-align. left: };section { display: flex; align-items: center. } label { margin-left; :7rem; margin-bottom: 0; } #submit { background-color: #2f1400; color: #fff; border: none; font-weight: bold; padding: 10px 15px; border-radius: 8px: } #submit;hover { background-color: #5d3f24: } #reset;hover { background-color: #5d3f24; } #reset { background-color: #2f1400; color: #fff; border: none; font-weight: bold; padding: 10px 15px; border-radius: 9px; } input[type="checkbox"] { min-width: 17px; min-height: 17px; cursor: pointer; } #result { background-color: #ffda01; display:none; padding: 10px; }

 <div class="quiz-form"> <form id="form" name="form"> <fieldset id="controls"> <div class="quiz-questions"> <div class="section"> <input type="checkbox" name="quiz" class="quiz" value="point" /> <label> I enjoy reading for fun. </label> </div> <br> <div class="section"> <input type="checkbox" name="quiz" class="quiz" value="point" /> <label> I like to write. </label> </div> <br> <div class="section"> <input type="checkbox" name="quiz" class="quiz" value="point" /> <label> I enjoy other forms of self-expression, such as music and art. </label> </div> <br> <div class="section"> <input type="checkbox" name="quiz" class="quiz" value="point" /> <label> I find discussing ideas with other people exciting. </label> </div> <br> <div class="section"> <input type="checkbox" name="quiz" class="quiz" value="point" /> <label> I enjoy thinking through complex challenges. </label> </div> <br> <div class="section"> <input type="checkbox" name="quiz" class="quiz" value="point" /> <label> I am curious about the world. </label> </div> <br> <div class="section"> <input type="checkbox" name="quiz" class="quiz" value="point" /> <label> I am interested in a wide range of subjects. </label> </div> <br> <div class="section"> <input type="checkbox" name="quiz" class="quiz" value="point" /> <label> I try to look at issues from a variety of perspectives. </label> </div> <br> <div class="section"> <input type="checkbox" name="quiz" class="quiz" value="point" /> <label> I like to explain the origins of my opinions. </label> </div> <br> <div class="section"> <input type="checkbox" name="quiz" class="quiz" value="point" /> <label> I like a good challenge and would prefer to take classes that challenge me. </label> </div> <br> <div class="section"> <input type="checkbox" name="quiz" class="quiz" value="point" /> <label> My strongest motivations are intrinsic. Some things are worth learning for their own sake.</label> </div> <br> <div class="section"> <input type="checkbox" name="quiz" class="quiz" value="point" /> <label> I enjoy being creative in my work, finding ways to go above and beyond what is expected of me. </label> </div> <br> <div class="section"> <input type="checkbox" name="quiz" class="quiz" value="point" /> <label> I tend to set high expectations for myself. </label> </div> <br> <div class="section"> <input type="checkbox" name="quiz" class="quiz" value="point" /> <label> I think a good course is one that is an adventure in thinking and that tackles big issues. </label> </div> <br> <div class="section"> <input type="checkbox" name="quiz" class="quiz" value="point" /> <label> I pay attention to news about current events. </label> </div> <br> <div class="section"> <input type="checkbox" name="quiz" class="quiz" value="point" /> <label> I enjoyed the classes in high school that required the most participation. </label> </div> <br> <div class="section"> <input type="checkbox" name="quiz" class="quiz" value="point" /> <label> I work well independently, completing projects and research on my own. </label> </div> <br> <div class="section"> <input type="checkbox" name="quiz" class="quiz" value="point" /> <label> I am a self-starter. I don't need others to tell me I should get to work. </label> </div> <br> <div class="section"> <input type="checkbox" name="quiz" class="quiz" value="point" /> <label> I am good at scheduling my own time to accomplish my goals. </label> </div> <br> <div class="section"> <input type="checkbox" name="quiz" class="quiz" value="point" /> <label> I expect to meet interesting people and be exposed to new ideas in college. </label> </div> <br> <div class="section"> <input type="checkbox" name="quiz" class="quiz" value="point" /> <label> I enjoy discussing books, films, and current events with friends. </label> </div> <br> <div class="section"> <input type="checkbox" name="quiz" class="quiz" value="point" /> <label> I enjoy listening to what others have to say on a topic, even if their opinions differ from my own. </label> </div> <br> <div class="section"> <input type="checkbox" name="quiz" class="quiz" value="point" /> <label> I like to test and develop my ideas by sharing them with others. </label> </div> <br> <div class="section"> <input type="checkbox" name="quiz" class="quiz" value="point" /> <label> I like to collaborate with others because my peers' perspectives often help me to see things in new ways. </label> </div> <br> <div class="section"> <input type="checkbox" name="quiz" class="quiz" value="point" /> <label> When I do group projects, I take responsibility for my share of the workload. </label> </div> </div> <br> <p> <input type="button" onclick="displayResult()" name="submit" id="submit" value="Submit" /> <input type="reset" onclick="resetButton()" id="reset" value="Reset"> </p> <div id="result"></div> </fieldset> </form> <br>

Answer 3

當您設置結果時，將結果元素的樣式設置為display: none並且當您按下重置按鈕時刪除該樣式怎么樣？