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

Question

我有一张包含 6 个问题和 4 个按钮答案的表格。每个按钮都有一个不同的数值，我想总结一下。<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 中插入一些不同的文本。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;};当答案是单选按钮时，我可以使用此功能，但我无法像我想要的那样轻松地设置单选输入的样式，因此转移到了按钮。现在我不确定为什么它停止工作了。奖励积分：每个按钮在单击/“活动”时都保持橙色。帮助？工作示例： https: //jsfiddle.net/bnedale/jp0k18wd/7/

Answer 1

请检查下面的代码。我已经通过评论提到了更改。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;">&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

您需要在表单中使用 type="button" 声明按钮，否则该按钮将默认用作“提交”

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

Answer 3

您的代码中有一些错误

1. 所有具有相同名称的按钮price1（它应该是一个数组或者名称应该不同）

2. 尝试通过 id 获取按钮值

3. 将按钮的类型设置为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>