Sum the value of all buttons clicked on form and insert text

Question

I've got a form with 6 questions and 4 button answers. Each button has a different numeric value that I'd like to sum up.

<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>

Depending on that sum, I'll insert some different text into a div.

const myForm = document.forms["my-form"],
toleR = document.getElementById("tolerance");

myForm.onsubmit = (e) => {
  e.preventDefault(); // disable form submit

  //Count the value of each answer
  let sum =
    Number(myForm.price1.value) +
    Number(myForm.price2.value) +
    Number(myForm.price3.value) +
    Number(myForm.price4.value) +
    Number(myForm.price5.value) +
    Number(myForm.price6.value);

  //insert image and text
  if (sum < 0)
    txt = '<div><p>Profile A</p></div>';
  if (sum < 12)
    txt = '<div><p>Profile B</p></div>';
  if (sum > 11)
    txt = '<div><p>Profile C</p></div>';
  if (sum > 17)
    txt = '<div><p>Profile D</p></div>';
  if (sum > 20)
    txt = '<div><p>Profile E</p></div>';

  myForm.totalSum.value = sum;

  toleR.innerHTML = txt;
};

I had this working when the answers were radio buttons, but I couldn't style the radio input as easily as I wanted so moved to buttons. Now I'm not sure why this has stopped working.

Bonus Points: Each button is meant to stay orange when clicked/"active". Help?

Working example: https://jsfiddle.net/bnedale/jp0k18wd/7/

Thanks

Answer 1

Please check below code. I have mentioned changes with comments. Change 1, Change 2 etc.

Please refer querySelectorAll, getAttribute, closest if you are not familiar with it.

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;">&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>

Answer 2

You've some errors in your code

1. All your buttons having same name price1 (it should be an array or the name should be different)
2. Try getting the buttons value by id
3. Set the type of the buttons as button(type="button")

function pagechange(elem1,elem2){

const myForm = document.forms["my-form"],
  toleR = document.getElementById("tolerance");

myForm.onsubmit = (e) => {
  e.preventDefault(); // disable form submit

  //Count the value of each answer
  let sum =
    Number(document.getElementById("price1").value) +
    Number(document.getElementById("price2").value) +
    Number(document.getElementById("price3").value) +
    Number(document.getElementById("price4").value);

  //insert image and text
  
  if (sum < 0)
    txt = '<div><p>Profile A</p></div>';
  if (sum < 12)
    txt = '<div><p>Profile B</p></div>';
  if (sum > 11)
    txt = '<div><p>Profile C</p></div>';
  if (sum > 17)
    txt = '<div><p>Profile D</p></div>';
  if (sum > 20)
    txt = '<div><p>Profile E</p></div>';
alert(sum);
  myForm.totalSum.value = sum;

  toleR.innerHTML = txt;
};
}

 <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" type="button" value="-15" name="price1" id="price1">Strongly Disagree</button>
      <button class="btn" type="button" value="-10" name="price1" id="price2">Disagree</button>
      <button class="btn" type="button" value="0" name="price1" id="price3">Agree</button>
      <button class="btn" type="button" value="0" name="price1" id="price4">Strongly Agree</button>
      <br>
      <div class="change">
        <input type="submit" value="Next" onclick="pagechange(1,2);">
      </div>

    </div>
    </form>

Answer 3

You need to declare the buttons inside a form with type="button", otherwise this buttons will work as 'submit' by default

<button type="button" class="btn" value="-15" name="price1">Strongly Disagree</button>
      <button type="button" class="btn" value="-10" name="price1">Disagree</button>
      <button type="button" class="btn" value="0" name="price1">Agree</button>
      <button type="button" class="btn" value="0" name="price1">Strongly Agree</button>