Javascript 对窗体上单击的所有按钮的值求和，然后插入文本

我有一张有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>

1.问题1
强烈反对
不同意
同意
强烈同意

根据该总和，我将在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;
};

const myForm=document.forms[“我的表单”]，
toleR=document.getElementById（“公差”）；
myForm.onsubmit=（e）=>{
e、 preventDefault（）；//禁用表单提交
//计算每个答案的值
求和=
编号（myForm.price1.value）+
编号（myForm.price2.value）+
编号（myForm.price3.value）+
编号（myForm.price4.value）+
编号（myForm.price5.value）+
编号（myForm.price6.value）；
//插入图像和文本
如果（总和<0）
txt=“剖面图A
”；
如果（总和<12）
txt='Profile B
'；
如果（总和>11）
txt=“剖面图C
”；
如果（总和>17）
txt=“剖面图D
”；
如果（总和>20）
txt='Profile E
'；
myForm.totalSum.value=总和；
toleR.innerHTML=txt；
};

当答案是单选按钮时，我就有了这个功能，但是我不能像我想的那样轻松地设置单选输入的样式，所以我移动到了按钮。现在我不知道为什么它停止工作了

奖励积分：单击/激活时，每个按钮都将保持橙色。帮忙

工作示例：

---

谢谢

您需要使用type=“button”声明表单中的按钮，否则默认情况下此按钮将作为“submit”使用

强烈反对
不同意
同意
强烈同意

您的代码中有一些错误

所有具有相同名称的按钮price1（应为数组或名称不同）

尝试按id获取按钮值

将按钮类型设置为按钮（type=“button”）

功能页面更改（elem1、elem2）{
const myForm=document.forms[“我的表单”]，
toleR=document.getElementById（“公差”）；
myForm.onsubmit=（e）=>{
e、 preventDefault（）；//禁用表单提交
//计算每个答案的值
求和=
编号（document.getElementById（“price1”）.value）+
编号（document.getElementById（“price2”）.value）+
编号（document.getElementById（“price3”）.value）+
编号（document.getElementById（“price4”）.value）；
//插入图像和文本
如果（总和<0）
txt=“剖面图A
”；
如果（总和<12）
txt='Profile B
'；
如果（总和>11）
txt=“剖面图C
”；
如果（总和>17）
txt=“剖面图D
”；
如果（总和>20）
txt='Profile E
'；
警报（总和）；
myForm.totalSum.value=总和；
toleR.innerHTML=txt；
};
}

1.问题1
强烈反对
不同意
同意
强烈同意

请检查下面的代码。我在评论中提到了变化<代码>更改1、更改2等

如果您不熟悉，请参阅

const myForm=document.forms[“我的表单”]，
toleR=document.getElementById（“公差”）；
myForm.onsubmit=（e）=>{
e、 preventDefault（）；//禁用表单提交
//变化1
//获取所选按钮，myForm中具有活动类的按钮
让activeBtn=myForm.querySelectorAll（'.btn.active'）；
//计算每个答案的值
设和=0；
对于（变量i=0；i”；
否则，如果（总和<12）
txt='Profile B
'；
否则，如果（总和>11）
txt=“剖面图C
”；
否则，如果（总和>17）
txt=“剖面图D
”；
否则，如果（总和>20）
txt='Profile E
'；
myForm.totalSum.value=总和；
toleR.innerHTML=txt；
};
//换页功能
功能页面更改（起始页面，顶部页面）{
var page=document.getElementById（“formpage_u2;”+frompage）；
如果（！page）返回false；
page.style.visibility=“隐藏”；
page.style.display=“无”；
page=document.getElementById（“formpage_u3;”+topage）；
如果（！page）返回false；
page.style.display=“block”；
page.style.visibility=“可见”；
返回true；
}
//重置表单并滚动至顶部
document.getElementById（“secondaryButton”）.onclick=function（）{
换页（7,1）；
document.body.scrollTop=0；//用于Safari
document.documentElement.scrollTop=0；//适用于Chrome、Firefox、IE和Opera
};
////获取容器元素
//var btnContainer=document.getElementById（“投资”）；
//变化4
//获取整个表单中class=“btn”的所有按钮
var btns=document.getElementsByClassName（“btn”）；
//循环浏览按钮并将活动类添加到当前/单击的按钮
对于（变量i=0；i0）{
当前[0]。className=current[0]。className.replace（“活动的”）；
}
//将活动类添加到当前/单击的按钮
this.className+=“活动”；
});
}

.btn{
边框：2px实心#ea730b；
边界半径：5px；
填充：10px；
宽度：20%；
显示：内联；
浮动：左；
利润率：10px；
背景色：白色；
}
.主动，
.btn:悬停{
颜色：白色；
背景色：#ea730b；
边框：2px实心#ea730b；
}
#myDIV{
宽度：80%；
保证金：自动！重要；
}
#重置{
浮动：左；
明确：两者皆有；
}
.改变{
显示：块；
清除：左；
衬垫