請檢查下面的代碼。我已經(jīng)通過評論提到了更改。Change 1, Change 2 etc。
如果您不熟悉，請參閱querySelectorAll，， 。getAttributeclosest
const 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 function
function 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 top
document.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 form
var btns = document.getElementsByClassName("btn");
// Loop through the buttons and add the active class to the current/clicked button
for (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;">   </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;">   </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;">   </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;">   </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;">   </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>
