将表单上单击的所有按钮的值相加并插入文本

请检查下面的代码。我已经通过评论提到了更改。Change 1, Change 2 etc。如果您不熟悉，请参阅querySelectorAll，，。getAttributeclosestconst myForm = document.forms["my-form"], toleR = document.getElementById("tolerance");myForm.onsubmit = (e) => { e.preventDefault(); // disable form submit // Change 1 // get selected buttons, button with active class inside myForm let activeBtn = myForm.querySelectorAll('.btn.active'); //Count the value of each answer let sum = 0; for (var i = 0; i < activeBtn.length; i++) { // Change 2 // in case of button you can not have .value to get value. // instead we can use button.getAttrinute("value") to get its value sum += Number(activeBtn[i].getAttribute("value")) } // Change 3 // use if then else if for next conditions //insert image and text if (sum < 0) txt = '<div><p>Profile A</p></div>'; else if (sum < 12) txt = '<div><p>Profile B</p></div>'; else if (sum > 11) txt = '<div><p>Profile C</p></div>'; else if (sum > 17) txt = '<div><p>Profile D</p></div>'; else if (sum > 20) txt = '<div><p>Profile E</p></div>'; myForm.totalSum.value = sum; toleR.innerHTML = txt;};//page change functionfunction pagechange(frompage, topage) { var page = document.getElementById("formpage_" + frompage); if (!page) return false; page.style.visibility = "hidden"; page.style.display = "none"; page = document.getElementById("formpage_" + topage); if (!page) return false; page.style.display = "block"; page.style.visibility = "visible"; return true;}//reset the form and scroll to topdocument.getElementById("secondaryButton").onclick = function() { pagechange(7, 1); document.body.scrollTop = 0; // For Safari document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera};//// Get the container element//var btnContainer = document.getElementById("investments");// Change 4// Get all buttons with class="btn" inside the entire formvar btns = document.getElementsByClassName("btn");// Loop through the buttons and add the active class to the current/clicked buttonfor (var i = 0; i < btns.length; i++) { btns[i].addEventListener("click", function() { // Change 5 // get active button in current question div. // this.closest(.question) will find parent with class question for current element // then find button with active class var current = this.closest('.question').getElementsByClassName("active"); // If there's no active class if (current.length > 0) { current[0].className = current[0].className.replace(" active", ""); } // Add the active class to the current/clicked button this.className += " active"; });}.btn { border: 2px solid #ea730b; border-radius: 5px; padding: 10px; width: 20%; display: inline; float: left; margin: 10px; background-color: white;}.active,.btn:hover { color: white; background-color: #ea730b; border: 2px solid #ea730b;}#myDIV { width: 80%; margin: auto !important;}#reset { float: left; clear: both;}.change { display: block; clear: left; padding: 20px 0 0 0; width: 20%; height: auto; margin: auto;}<form name="my-form" id="survey"> <div id="formpage_1" class="question" style="visibility: visible; display: block;"> <h3>1. Question 1</h3> <button class="btn" value="-15" name="price1">Strongly Disagree</button> <button class="btn" value="-10" name="price1">Disagree</button> <button class="btn" value="0" name="price1">Agree</button> <button class="btn" value="0" name="price1">Strongly Agree</button> <br> <div class="change"> <input type="button" value="Next" onclick="pagechange(1,2);"> </div> </div> <div id="formpage_2" class="question" style="visibility: hidden; display: none;"> <h3>2. Question 2 </h3> <button class="btn" value="1" name="price2">Strongly Disagree</button> <button class="btn" value="2" name="price2">Disagree</button> <button class="btn" value="3" name="price2">Agree</button> <button class="btn" value="5" name="price2">Strongly Agree</button> <br> <div class="change"> <input type="button" value="Back" onclick="pagechange(2,1);"> <p style="display: inline;">&nbsp&nbsp&nbsp</p> <input type="button" value="Next" onclick="pagechange(2,3);"> </div> </div> <div id="formpage_3" class="question" style="visibility: hidden; display: none;"> <h3>3. Question 3</h3> <button class="btn" value="5" name="price3">Strongly Disagree</button> <button class="btn" value="3" name="price3">Disagree</button> <button class="btn" value="2" name="price3">Agree</button> <button class="btn" value="1" name="price3">Strongly Agree</button> <br> <div class="change"> <input type="button" value="Back" onclick="pagechange(3,2);"> <p style="display: inline;">&nbsp&nbsp&nbsp</p> <input type="button" value="Next" onclick="pagechange(3,4);"> </div> </div> <div id="formpage_4" class="question" style="visibility: hidden; display: none;"> <h3>4. Question 4</h3> <button class="btn" value="5" name="price4">Strongly Disagree</button> <button class="btn" value="3" name="price4">Disagree</button> <button class="btn" value="2" name="price4">Agree</button> <button class="btn" value="1" name="price4">Strongly Agree</button> <br> <div class="change"> <input type="button" value="Back" onclick="pagechange(4,3);"> <p style="display: inline;">&nbsp&nbsp&nbsp</p> <input type="button" value="Next" onclick="pagechange(4,5);"> </div> </div> <div id="formpage_5" class="question" style="visibility: hidden; display: none;"> <h3>5. Question 5</h3> <button class="btn" value="1" name="price5">Strongly Disagree</button> <button class="btn" value="2" name="price5">Disagree</button> <button class="btn" value="3" name="price5">Agree</button> <button class="btn" value="5" name="price5">Strongly Agree</button> <br> <div class="change"> <input type="button" value="Back" onclick="pagechange(5,4);"> <p style="display: inline;">&nbsp&nbsp&nbsp</p> <input type="button" value="Next" onclick="pagechange(5,6);"> </div> </div> <div id="formpage_6" class="question" style="visibility: hidden; display: none;"> <h3>6. Question 6</h3> <button class="btn" value="5" name="price6">Strongly Disagree</button> <button class="btn" value="3" name="price6">Disagree</button> <button class="btn" value="2" name="price6">Agree</button> <button class="btn" value="1" name="price6">Strongly Agree</button> <br> <div class="change"> <input type="button" value="Back" onclick="pagechange(6,5);"> <p style="display: inline;">&nbsp&nbsp&nbsp</p> <button type="submit" onclick="pagechange(6,7)">Calculate</button> </div> </div> <div id="formpage_7" style="visibility: hidden; display: none;"> <div id="tolerance"></div> <br> <br> <input id="secondaryButton" type="reset" value="Start again"> <input type="text" name="totalSum" value="" size="2" readonly="readonly"> </div></form>

将表单上单击的所有按钮的值相加并插入文本

3回答