Reputation: 45
I'm creating a lengthy form. There's 5 different sections for you to mark off if you qualify (checkmarks). Probably 50 questions total. Each section has a different weight/points (section 1 is 1 point each, section 2 is 3 points each etc). How can I display the total score and does my script calculation look ok? Sorry I'm fairly new at this. Didn't include the entire form because it's very long.
<script language="JavaScript1.1" type="text/javascript">
/* <![CDATA[ */
var calctxt = '';
var xmltxt = '';
var htmtxt = '';
function DVTScoreWells_fx() {
with(document.DVTScoreWells_form){
Score = 0.0;
doCalc = true;
if (1PQ1.checked){
Score = Score + 1;
}
if (1PQ2.checked){
Score = Score + 1;
}
if (1PQ3.checked){
Score = Score + 1;
}
if (1PQ4.checked){
Score = Score + 1;
}
if (1PQ5.checked){
Score = Score + 1;
}
if (1PQ6.checked){
Score = Score + 1;
}
if (1PQ7.checked){
Score = Score + 1;
}
if (1PQ8.checked){
Score = Score + 1;
}
if (1PQ9.checked){
Score = Score + 1;
}
if (1PQ10.checked){
Score = Score + 1;
}
if (1PQ11.checked){
Score = Score + 1;
}
if (1PQ12.checked){
Score = Score + 1;
}
if (1PQ13.checked){
Score = Score + 1;
}
if (1PQ14.checked){
Score = Score + 1;
}
if (1PQ15.checked){
Score = Score + 1;
}
if (2PQ1.checked){
Score = Score + 2;
}
if (2PQ2.checked){
Score = Score + 2;
}
if (2PQ3.checked){
Score = Score + 2;
}
cctotal.value = Score;
if (doCalc){
rrclr();
}
}
}
</script>
<form name="DVTScoreWells_form" id="DVTScoreWells_form" action="#" onsubmit="return false;" onreset="rrclr();">
<br><br>
<p>Are you at risk for DVT? Fill out this Risk Assessment and take a look.</p><br><br>
</div>
</div>
</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
<table bgcolor="#FFFFFF" cellpadding="200" cellspacing="200" class="bodyContainer">
<tbody>
<tr>
<td class="leftSidebar" sectionid="leftSidebar" valign="top">
<div>
<div>
<div class="title" style="text-align:left">
<div class="title" contentid="title" style="text-align: left;">
<div>
<div>
<span style="text-decoration: none;"><span style="font-family: Comic Sans MS; font-size: 18pt;">Each Risk Factor
Represents 1 Point</span></span>
</div>
<div>
</div>
</div>
</div>
</div>
</div>
</div>
<div>
<table class="infusion-field-container" style="width:270;">
<tbody>
<tr>
<td class="infusion-field-input-container" style="width:270px;">
<input class="infusion-field-input-container" id="1PQ1" name="1PQ1" type="checkbox" onclick="DVTScoreWells_fx();"
/>
<label for="1PQ1">Age 41 - 59</label>
</td>
</tr><tr>
</td>
</tr><tr>
<td class="infusion-field-input-container" style="width:270px;">
<input class="infusion-field-input-container" id="1PQ2" name="1PQ2" type="checkbox" onclick="DVTScoreWells_fx();"
/>
<label for="1PQ2">Minor surgery planned</label>
</td>
</tr><tr>
</td>
</tr><tr>
<td class="infusion-field-input-container" style="width:270px;">
<input class="infusion-field-input-container" id="1PQ3" name="1PQ3" type="checkbox" onclick="DVTScoreWells_fx
();"/>
<label for="1PQ3">History of prior major surgery</label>
</td>
</tr><tr>
</td>
</tr><tr>
<td class="infusion-field-input-container" style="width:270px;">
<input class="infusion-field-input-container" id="1PQ4" name="1PQ4" type="checkbox" onclick="DVTScoreWells_fx
();"/>
<label for="1PQ4">Varicose veins</label>
</td>
</tr><tr>
</td>
</tr><tr>
<td class="infusion-field-input-container" style="width:270px;">
<input class="infusion-field-input-container" id="1PQ5" name="1PQ5" type="checkbox" onclick="DVTScoreWells_fx
();"/>
<label for="1PQ5">History of inflammatory bowel disease</label>
</td>
</tr><tr>
</td>
</tr><tr>
<td class="infusion-field-input-container" style="width:270px;">
<input class="infusion-field-input-container" id="1PQ6" name="1PQ6" type="checkbox" onclick="DVTScoreWells_fx
();"/>
<label for="1PQ6">Swollen legs (current)</label>
</td>
</tr><tr>
</td>
</tr><tr>
<td class="infusion-field-input-container" style="width:270px;">
<input class="infusion-field-input-container" id="1PQ7" name="1PQ7" type="checkbox" onclick="DVTScoreWells_fx
();"/>
<label for="1PQ7">Obesity (BMI >30)</label>
</td>
</tr><tr>
</td>
</tr><tr>
<td class="infusion-field-input-container" style="width:270px;">
<input class="infusion-field-input-container" id="1PQ8" name="1PQ8" type="checkbox" onclick="DVTScoreWells_fx
();"/>
Upvotes: 1
Views: 369
Reputation: 1306
Honestly the way your current code approaches this is prone to errors via typos or omission, as well as will be a pain to maintain.
My main suggestion is to leverage a div with the id of Score that contains the running total, and have each checkbox call a function with their value as an argument that adjusts the innerHTML of score, eg:
HTML:
Your Risk is <span id='risklevel'>Low</span> (<span id='score'>0</span>)
<input type='checkbox' onchange='updateScore(this,3);' />
JS:
function updateScore(ele,val){
var score = document.getElementById('score');
var riskLevel = document.getElementById('risklevel');
var curScore = parseFloat(score.innerHTML);
curScore += (ele.checked ? val : -val);
score.innerHTML = curScore;
if(curScore <= 1){
riskLevel.innerHTML = "Low";
}else if(curScore <= 2){
riskLevel.innerHTML = "Moderate";
}else if(curScore <= 4){
riskLevel.innerHTML = "High";
}else{
riskLevel.innerHTML = "Very High";
}
}
OR
If you wanna stick with a calc-all-at-once approach...
Tag the checkboxes with their section in some natively dom-searchable way (I suggest classes prefixed with data- (eg: data-riskFactorSet )), give each one a data-* attribute (such as data-riskvalue) and have your js iterate over all checkboxen, combining the int/float value of the data-* attribute.
NOTE: since it's a less popular construct...
(ele.checked ? val : -val)
uses a Ternary operator. Think of it like an in-line if-then-else statement, with the stipulation that the return types of the true and false parts must be the same. It works like this:
test ? ifTrue : ifFalse
Upvotes: 2