javascript - 表单响应计算
问题描述
我只是为物理治疗师创建一个表格和表格。在计算“基于响应的总和”时需要您的帮助。极限难度值可以是“0”，没有难度可以是“4”
熟悉阅读和修改js、html、css代码。这是我写的。
<FORM >
<TABLE BORDER>
<TR ALIGN=CENTER>
<TD WIDTH=350><B>ACTIVITIES<B> </TD>
<TD WIDTH=125><B>Extreme difficulty (0)</B></TD>
<TD WIDTH=125><B>Quite a bit of difficulty (1)</B></TD>
<TD WIDTH=125><B>Moderate Difficulty(2)</B></TD>
<TD WIDTH=125><B>Little Difficulty(3)</B></TD>
<TD WIDTH=125><B>No Difficulty(4)</B></TD>
</TR>
<TR ALIGN=CENTER>
<TD ALIGN=LEFT> Any of usual work (household, work)</TD>
<TD><INPUT TYPE="RADIO" NAME="stimulat" VALUE="1"></TD>
<TD><INPUT TYPE="RADIO" NAME="stimulat" VALUE="2"></TD>
<TD><INPUT TYPE="RADIO" NAME="stimulat" VALUE="3"></TD>
<TD><INPUT TYPE="RADIO" NAME="stimulat" VALUE="4"></TD>
<TD><INPUT TYPE="RADIO" NAME="stimulat" VALUE="5"></TD>
</TR>
<TR ALIGN=CENTER>
<TD ALIGN=LEFT> Your hobbies, recreational, sporting</TD>
<TD><INPUT TYPE="RADIO" NAME="freedom" VALUE="1"></TD>
<TD><INPUT TYPE="RADIO" NAME="freedom" VALUE="2"></TD>
<TD><INPUT TYPE="RADIO" NAME="freedom" VALUE="3"></TD>
<TD><INPUT TYPE="RADIO" NAME="freedom" VALUE="4"></TD>
<TD><INPUT TYPE="RADIO" NAME="freedom" VALUE="5"></TD>
</TR>
<TR ALIGN=CENTER>
<TD ALIGN=LEFT> Lifting bag of groceries to waist level</TD>
<TD><INPUT TYPE="RADIO" NAME="demand" VALUE="1"></TD>
<TD><INPUT TYPE="RADIO" NAME="demand" VALUE="2"></TD>
<TD><INPUT TYPE="RADIO" NAME="demand" VALUE="3"></TD>
<TD><INPUT TYPE="RADIO" NAME="demand" VALUE="4"></TD>
<TD><INPUT TYPE="RADIO" NAME="demand" VALUE="5"></TD>
</TR>
<TR ALIGN=CENTER>
<TD ALIGN=LEFT> Grooming your hair</TD>
<TD><INPUT TYPE="RADIO" NAME="creative" VALUE="1"></TD>
<TD><INPUT TYPE="RADIO" NAME="creative" VALUE="2"></TD>
<TD><INPUT TYPE="RADIO" NAME="creative" VALUE="3"></TD>
<TD><INPUT TYPE="RADIO" NAME="creative" VALUE="4"></TD>
<TD><INPUT TYPE="RADIO" NAME="creative" VALUE="5"></TD>
</TR>
</TABLE>
</FORM>
我不知道如何计算这个表格的结果值
解决方案
<h4 style="text-align:center;color:blue;"> Dr ABC<br> MYLocation</h4>
<form action="" method="get">
<b> Enter Patient's Name :</b> <input type="text" /><br>
</form>
<h4> We are interested in knowing wheather you are having any difficulty with the
activities listed below <u> because of your upper limb problem </u>
for which <br> you are seeking attention. Provide an answer for each activity</h4>
<h4> Today, <u>do you or would you </u> have any difficulty with: (check boxes below
on each line)</h4>
<style>table, td { border: 1px solid grey }
td {
text-align: center;
min-width: 125px;
max-width: 125px;
}
tr td:first-child {
text-align: left;
min-width: 350px;
max-width: 350px;
}
thead td { font-weight: bold }
#the-Sum {
display: block;
margin: 10px 0 0 20px;
font-weight: bold;
color:crimson;
}</style>
<form id="the-Form">
<table>
<thead>
<tr>
<td>ACTIVITIES </td>
<td>Extreme Difficulty or Unable to Perform Activity (0)</td>
<td>Quite a Bit of Difficulty (1)</td>
<td>Moderate Difficulty (2)</td>
<td>A Little bit of Difficulty (3)</td>
<td>No Difficulty (4)</td>
</tr>
</thead>
<tbody>
<tr>
<td> Any of usual work, household, or school activities</td>
<td><input type="radio" name="household" value="0"></td>
<td><input type="radio" name="household" value="1"></td>
<td><input type="radio" name="household" value="2"></td>
<td><input type="radio" name="household" value="3"></td>
<td><input type="radio" name="household" value="4"></td>
</tr>
<tr>
<td> Your usual hobbies, recreational, sporting activities</td>
<td><input type="radio" name="hobbies" value="0"></td>
<td><input type="radio" name="hobbies" value="1"></td>
<td><input type="radio" name="hobbies" value="2"></td>
<td><input type="radio" name="hobbies" value="3"></td>
<td><input type="radio" name="hobbies" value="4"></td>
</tr>
<tr>
<td> Lifting bag of groceries to waist level</td>
<td><input type="radio" name="groceryw" value="0"></td>
<td><input type="radio" name="groceryw" value="1"></td>
<td><input type="radio" name="groceryw" value="2"></td>
<td><input type="radio" name="groceryw" value="3"></td>
<td><input type="radio" name="groceryw" value="4"></td>
</tr>
<tr>
<td> Lifting a bag of groceries above your head </td>
<td><input type="radio" name="groceryd" value="0"></td>
<td><input type="radio" name="groceryd" value="1"></td>
<td><input type="radio" name="groceryd" value="2"></td>
<td><input type="radio" name="groceryd" value="3"></td>
<td><input type="radio" name="groceryd" value="4"></td>
</tr>
<tr>
<td> Grooming your hair </td>
<td><input type="radio" name="grooming" value="0"></td>
<td><input type="radio" name="grooming" value="1"></td>
<td><input type="radio" name="grooming" value="2"></td>
<td><input type="radio" name="grooming" value="3"></td>
<td><input type="radio" name="grooming" value="4"></td>
</tr>
<tr>
<td> Pushing up on your hands (e.g. from bathtub or chair) </td>
<td><input type="radio" name="pushing" value="0"></td>
<td><input type="radio" name="pushing" value="1"></td>
<td><input type="radio" name="pushing" value="2"></td>
<td><input type="radio" name="pushing" value="3"></td>
<td><input type="radio" name="pushing" value="4"></td>
</tr>
<tr>
<td> Preparing food (e.g. peeling, cutting </td>
<td><input type="radio" name="food" value="0"></td>
<td><input type="radio" name="food" value="1"></td>
<td><input type="radio" name="food" value="2"></td>
<td><input type="radio" name="food" value="3"></td>
<td><input type="radio" name="food" value="4"></td>
</tr>
<tr>
<td> Driving </td>
<td><input type="radio" name="driving" value="0"></td>
<td><input type="radio" name="driving" value="1"></td>
<td><input type="radio" name="driving" value="2"></td>
<td><input type="radio" name="driving" value="3"></td>
<td><input type="radio" name="driving" value="4"></td>
</tr>
<tr>
<td> Vaccuming, sweeping, or raking </td>
<td><input type="radio" name="cleaning" value="0"></td>
<td><input type="radio" name="cleaning" value="1"></td>
<td><input type="radio" name="cleaning" value="2"></td>
<td><input type="radio" name="cleaning" value="3"></td>
<td><input type="radio" name="cleaning" value="4"></td>
</tr>
<tr>
<td> Dressing </td>
<td><input type="radio" name="dressing" value="0"></td>
<td><input type="radio" name="dressing" value="1"></td>
<td><input type="radio" name="dressing" value="2"></td>
<td><input type="radio" name="dressing" value="3"></td>
<td><input type="radio" name="dressing" value="4"></td>
</tr>
<tr>
<td> Doing up buttons </td>
<td><input type="radio" name="dbuttons" value="0"></td>
<td><input type="radio" name="dbuttons" value="1"></td>
<td><input type="radio" name="dbuttons" value="2"></td>
<td><input type="radio" name="dbuttons" value="3"></td>
<td><input type="radio" name="dbuttons" value="4"></td>
</tr>
<tr>
<td> Using tools or appliances</td>
<td><input type="radio" name="appliance" value="0"></td>
<td><input type="radio" name="appliance" value="1"></td>
<td><input type="radio" name="appliance" value="2"></td>
<td><input type="radio" name="appliance" value="3"></td>
<td><input type="radio" name="appliance" value="4"></td>
</tr>
<tr>
<td> Opening doors </td>
<td><input type="radio" name="doors" value="0"></td>
<td><input type="radio" name="doors" value="1"></td>
<td><input type="radio" name="doors" value="2"></td>
<td><input type="radio" name="doors" value="3"></td>
<td><input type="radio" name="doors" value="4"></td>
</tr>
<tr>
<td> Cleaning </td>
<td><input type="radio" name="cleaning1" value="0"></td>
<td><input type="radio" name="cleaning1" value="1"></td>
<td><input type="radio" name="cleaning1" value="2"></td>
<td><input type="radio" name="cleaning1" value="3"></td>
<td><input type="radio" name="cleaning1" value="4"></td>
</tr>
<tr>
<td> Tying or lacing shoes</td>
<td><input type="radio" name="shoes" value="0"></td>
<td><input type="radio" name="shoes" value="1"></td>
<td><input type="radio" name="shoes" value="2"></td>
<td><input type="radio" name="shoes" value="3"></td>
<td><input type="radio" name="shoes" value="4"></td>
</tr>
<tr>
<td> Sleeping</td>
<td><input type="radio" name="sleep" value="0"></td>
<td><input type="radio" name="sleep" value="1"></td>
<td><input type="radio" name="sleep" value="2"></td>
<td><input type="radio" name="sleep" value="3"></td>
<td><input type="radio" name="sleep" value="4"></td>
</tr>
<tr>
<td> Laundering cloths (e.g. washing, ironing, folding)</td>
<td><input type="radio" name="laundry" value="0"></td>
<td><input type="radio" name="laundry" value="1"></td>
<td><input type="radio" name="laundry" value="2"></td>
<td><input type="radio" name="laundry" value="3"></td>
<td><input type="radio" name="laundry" value="4"></td>
</tr>
<tr>
<td>Opening a jar</td>
<td><input type="radio" name="jar" value="0"></td>
<td><input type="radio" name="jar" value="1"></td>
<td><input type="radio" name="jar" value="2"></td>
<td><input type="radio" name="jar" value="3"></td>
<td><input type="radio" name="jar" value="4"></td>
</tr>
<tr>
<td> Throwing a ball </td>
<td><input type="radio" name="ball" value="0"></td>
<td><input type="radio" name="ball" value="1"></td>
<td><input type="radio" name="ball" value="2"></td>
<td><input type="radio" name="ball" value="3"></td>
<td><input type="radio" name="ball" value="4"></td>
</tr>
<tr>
<td> Carrying a small suitcase with affected limb </td>
<td><input type="radio" name="carrying" value="0"></td>
<td><input type="radio" name="carrying" value="1"></td>
<td><input type="radio" name="carrying" value="2"></td>
<td><input type="radio" name="carrying" value="3"></td>
<td><input type="radio" name="carrying" value="4"></td>
</tr>
</tbody>
</table>
<output id="the-Sum"> total = 0 </output>
</form>
<script>
const
theForm = document.querySelector('#the-Form'),
theTotal = document.querySelector('#the-Sum'),
List_RadioGroup = [ 'household', 'hobbies', 'groceryw', 'groceryd', 'grooming', 'pushing', 'food', 'driving', 'cleaning', 'dressing', 'dbuttons', 'appliance', 'doors', 'cleaning1', 'shoes', 'sleep', 'laundry', 'jar', 'ball', 'carrying']
;
// load init.
theTotal.textContent = ' total = 0 ';
List_RadioGroup.forEach(xElm=>{ theForm[xElm][0].checked = true; })
theForm.onchange = function()
{
let total = 0;
List_RadioGroup.forEach(xElm=>{
total += parseInt( document.querySelector(`input[name="${xElm}"]:checked`).value );
})
theTotal.textContent = ` TOTAL OUT OF 80 = ${total} `;
}
</script>
<div><form>
<input type="button" value="Print or Save as pdf" onClick="window.print()">
</form></div>
推荐阅读
- python - OpenPyxl 重叠数据标签（条形图）
- amazon-web-services - AWS 网络负载均衡器 - TCP 目标组不正常阈值
- python-3.x - 检测图像中的模式并检索其位置
- rest - mLab REST API - 按字符串查询
- google-apps-script - 我想用工作表中特定的静态单元格的内容填充电子邮件
- windows - 如何在 Powershell 中为变量添加时间戳
- java - 严重：开始事件引发错误 java.lang.ExceptionInInitializerError Intellij/Tomcat
- python - 如何让 PyCharm 在输出控制台中显示整个数据框？
- eiffel - Eiffel：如何设置自动测试的命令行参数？
- javascript - JavaScript 错误使用
使用 ColdFusion 2018 标记