HTML Checkbox-Eingabe ändert sich zu Typ "True" oder "False" bei Verwendung in JavaScript-Funktion

Question

Ich versuche, einen Taschenrechner für experimentelle Zellengrößen zu bauen, die Benutzer auswählen können, welche Optionen enthalten sind. Um die Anzahl/Größe von Zellen zurückzugeben, erstelle ich eine JavaScript-Funktion, die das Feld # der überprüften Elemente nach Name in den Eingabe-Tags zählt.

Die Funktion scheint richtig zu funktionieren, aber die Einbeziehung hat die unerwartete Konsequenz, dass die Kontrollkästchen in statische Wertfelder umgewandelt werden, die den Inhalt der Wertvariablen für jede Eingabe anzeigen (die Referenzen für die einzelnen Kontrollkästchen im Gegensatz zur Serie). .

ich will (und bekam) diese:

Stattdessen habe ich das zur Zeit erhalten:

unten-Code. Vielen Dank.

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://nathanield.porter@gmail.com">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>

Answer 1

Es ist nur eine typische Tippfehler in Ihrem Code:

if (ip.type = 'checkbox' ... 

Lassen Sie sein:

if (ip.type == 'checkbox' ... 

Es bemerkt werden muss, dass das, was der Code eigentlich Einstellung war dies:

if (ip.type = ('checkbox' && ip.checked)) 

d.h .:

if (ip.type = <boolean>) 

d.h .: entweder wahr oder falsch, ist es ein ungültiger Wert für das Attribut type, und so, interpretiert der Browser als Standard-Eingabetyp (TEXT).