I'm trying to build a calculator for experimental cell sizes that allows users to select which options to include. To return the number/size of cells, I build a JavaScript function that counts the # of checked items by name field on the input tags.
The function appears to be working right, but including it has the unexpected consequence of converting the checkboxes to static value fields displaying the contents of the value tags for each input (the references for the individual checkboxes as opposed to the series).
I want (and was getting) this:
Instead, I currently get this:
Code below. Thank you.
function updateresults() {
var cb_counts = {};
var inputs = document.getElementsByTagName('input');
for (var i = 0; i < inputs.length; i++) {
var ip = inputs[i];
if (ip.type = 'checkbox' && ip.checked) {
if (cb_counts[ip.name]) {
cb_counts[ip.name] ++;
} else {
(cb_counts[ip.name] = 1);
}
}
}
var mincells = cb_counts["reltype"] * cb_counts["relqual"] * cb_counts["ask"] * cb_counts["cause"] * cb_counts["receff"] * cb_counts["retone"] * cb_counts["doneff"];
document.getElementById("mc").innerHTML = mincells;
var samplen = document.getElementById("samps").value;
var percell = samplen / mincells;
document.getElementById("pc").innerHTML = percell;
} <h1>Experimental Cell Size Calculator</h1>
<div name="metadata">
Author: Nathaniel D. Porter
<br>Revised: September 2, 2016
<br>
<em>Please contact the <a href="mailto://[email protected]">author</a> for permission to use or modify</em>
<br>
</div>
<div name="directions">
Check the boxes for each option to include in collection of the following experimental manipulations. Checking only one box effectively removes the manipulation so that all participants receive the checked version.
<br>To calculate the cell size for a specific interaction, select the question names to interact. Checking all interactions shows the size of minimal cells. This will not change the option selections above. As you change the options, the output will automatically
update below.
</div>
<div name="inputDiv">
<p>
Total Sample Size:
<input type="number" name="samplesize" id="samps" value="1000" step="1">
</p>
<p>
Relationship to Donor:
<br>
<input type="checkbox" name="reltype" value="Parent" checked>Parent
<br>
<input type="checkbox" name="reltype" value="Sibling">Sibling
<br>
<input type="checkbox" name="reltype" value="Aunt">Aunt
<br>
<input type="checkbox" name="reltype" value="Colleague">Co-worker
<br>
</p>
<p>
Quality of Relationship:
<br>
<input type="checkbox" name="relqual" value="Random">Random
<br>
<input type="checkbox" name="relqual" value="Important" checked>Important Matters
<br>
</p>
<p>
Type of discovery:
<br>
<input type="checkbox" name="ask" value="recAsk">Asked directly by recipient
<br>
<input type="checkbox" name="ask" value="heard" checked>Overheard through someone else
<br>
</p>
<p>
Implied cause of need:
<br>
<input type="checkbox" name="cause" value="none" checked>None stated
<br>
<input type="checkbox" name="cause" value="nofault">Genetic (no fault)
<br>
<input type="checkbox" name="cause" value="fault">Lifestyle (fault)
<br>
</p>
<p>
Stated effect on recipient:
<br>
<input type="checkbox" name="receff" value="longer" checked>Live longer
<br>
<input type="checkbox" name="receff" value="better">Live better
<br>
</p>
<p>
Tone of stated effect on recipient:
<br>
<input type="checkbox" name="retone" value="neg" checked>Prevent negative (not die/less pain)
<br>
<input type="checkbox" name="retone" value="pos">Enable positive (longer life/fuller life)
<br>
</p>
<p>
Stated effect on donor:
<br>
<input type="checkbox" name="doneff" value="none" checked>None given
<br>
<input type="checkbox" name="doneff" value="pos">Benefits
<br>
<input type="checkbox" name="doneff" value="neg">Costs
<br>
<input type="checkbox" name="doneff" value="both">Both
<br>
</p>
Interaction of interest:
<br>
<input type="checkbox" name="interaction" value="reltype" checked>Relationship to Donor
<br>
<input type="checkbox" name="interaction" value="relqual" checked>Quality of Relationship
<br>
<input type="checkbox" name="interaction" value="ask" checked>Type of discovery
<br>
<input type="checkbox" name="interaction" value="cause" checked>Implied cause of need
<br>
<input type="checkbox" name="interaction" value="receff" checked>Stated effect on recipient
<br>
<input type="checkbox" name="interaction" value="retone" checked>Tone of stated effect on recipient
<br>
<input type="checkbox" name="interaction" value="doneff" checked>Stated effect on donor
<br>
</div>
<div name="results">
<p>
Number of minimal cells:
<p id="mc"></p>
Minimal cell size:
<p id="pc"></p>
<br>Number of cells in interaction: Pending
<br>Interacted cell size: Pending
</div>
ip.type = 'checkbox' && ip.checkedshould beip.type === 'checkbox' && ip.checkedip.type = ip.checked, which rejected that value and substituted"text".