I am very new to js, and I have been searching for this answer for days. I have a little personal project I'm working on, and it includes checkboxes.
I have a function that is supposed to help generate code to copy/paste/save as a new html. Since I'm new to js I am having problems getting the verification of the checkboxes to work properly, and to have it check each checkbox one at a time (not as a group/array), then to save the individual value to apply it to the function that generates the code so that it can be +added+ in the correct place.
I have this JS Bin for you to view, that might help explain it better, especially if you press the 'Get Code' button.
I know there is a better way to get it to do the code, and I can't seem to get what I do have to generate properly. I keep seeing the code when I press the 'Get Code' button instead of the checkmark I want to see.
I am somewhat good (not great) at html and css only.
I would appreciate any help you can offer.
The html.
<!DOCTYPE html>
<html>
<head>
<title>SCV</title>
</head>
<body>
<form name="inputRelations" id="inputRelations">
<h2>Relations</h2>
<div id="rel">
<table class="rel2"><tr><td>
<input type="checkbox" name="chb[]" id="crush" value="☑"/>
<label for="crush">Crush</label>
</td><td>
<input type="checkbox" name="chb[]" id="love" value="☑"/>
<label for="love">Love</label>
</td><td>
<input type="checkbox" name="chb[]" id="engaged" value="☑"/>
<label for="engaged">Engaged</label>
</td><td>
<input type="checkbox" name="chb[]" id="married" value="☑"/>
<label for="married">Married</label>
</td></tr><tr><td>
<input type="checkbox" name="chb[]" id="friends" value="☑"/>
<label for="friends">Friends</label>
</td><td>
<input type="checkbox" name="chb[]" id="buddies" value="☑"/>
<label for="buddies">Buddies</label>
</td><td>
<input type="checkbox" name="chb[]" id="known" value="☑"/>
<label for="known1">Known</label>
</td><td>
<input type="checkbox" name="chb[]" id="bff" value="☑"/>
<label for="bff">BFF</label>
</td></tr><tr><td>
<input type="checkbox" name="chb[]" id="steady" value="☑"/>
<label for="steady">Steady</label>
</td><td>
<input type="checkbox" name="chb[]" id="family" value="☑"/>
<label for="family">Family</label>
</td><td>
<input type="checkbox" name="chb[]" id="enemy" value="☑"/>
<label for="enemy">Enemy</label>
</td><td>
<input type="checkbox" name="chb[]" id="unknown" value="☑"/>
<label for="unknown">Unknown</label>
</td></tr>
</table>
</div>
<nav id="box2" class="hide"><table id="menu3"><tr><td rowspan="2" id="soft">
<textarea name="source2" onclick="this.focus();this.select()" cols="40" rows="10"></textarea>
</td><td>
<input type="button" value="Get Code!" onclick="javascript:generateRelations();"></td>
<td rowspan="2" id="softA">
<img src="./forSCV/icons/relations.png" alt="Relations" title="Relations" id="arrow" onclick="toggle('box2');">
</td></tr><tr><td>
<input type="button" value="Test Code" onclick="javascript:displayRelations(this.form);">
</td></tr></table></nav>
</form></div>
</body>
</html>
The JS.
function generateRelations() {
var feelingsFor = document.inputRelations.feelingsFor.value;
var relationType = document.inputRelations.relationType.value;
var dailyA = document.inputRelations.dailyA.value;
var dailyB = document.inputRelations.dailyB.value;
var lifetimeA = document.inputRelations.lifetimeA.value;
var lifetimeB = document.inputRelations.lifetimeB.value;
// I need it to check if these individual checkmarks are checked then save
// the value to insert into the outputRelations section of this function
// (generateRelations)
// There has to be a more condensed way to do this.
var crush = function() {
var c1 = document.inputRelations.crush;
if (c1.type == 'checkbox' && c1.checked === true){
return c1.value;}
else {
return '';
}
};
var love = function() {
var l1 = document.inputRelations.love;
if (l1.type == 'checkbox' && l1.checked === true){
return l1.value;}
else {
return '';
}
};
var engaged = function() {
var e1 = document.inputRelations.engaged;
if (e1.type == 'checkbox' && e1.checked === true){
return e1.value;}
else {
return '';
}
};
var married = function() {
var m1 = document.inputRelations.married;
if (m1.type == 'checkbox' && m1.checked === true){
return m1.value;}
else {
return '';
}
};
var friends = function() {
var f1 = document.inputRelations.friends;
if (f1.type == 'checkbox' && f1.checked === true){
return f1.value;}
else {
return '';
}
};
var buddies = function() {
var b1 = document.inputRelations.buddies;
if (b1.type == 'checkbox' && b1.checked === true){
return b1.value;}
else {
return '';
}
};
var known = function() {
var k1 = document.inputRelations.known;
if (k1.type == 'checkbox' && k1.checked === true){
return k1.value;}
else {
return '';
}
};
var bff = function() {
var bA = document.inputRelations.bff;
if (bA.type == 'checkbox' && bA.checked === true){
return bA.value;}
else {
return '';
}
};
var steady = function() {
var s1 = document.inputRelations.steady;
if (s1.type == 'checkbox' && s1.checked === true){
return s1.value;}
else {
return '';
}
};
var family = function() {
var f1 = document.inputRelations.family;
if (f1.type == 'checkbox' && f1.checked === true){
return f1.value;}
else {
return '';
}
};
var enemy = function() {
var e1 = document.inputRelations.enemy;
if (e1.type == 'checkbox' && e1.checked === true){
return e1.value;}
else {
return '';
}
};
var unknown = function() {
var u1 = document.inputRelations.unknown;
if (u1.type == 'checkbox' && u1.checked === true){
return u1.value;}
else {
return '';
}
};
// I want to add the checkbox values in this section.
// I need individual values to do so. Not a list.
outputRelations = "<a name='relations'></a>\n<div id='easy'>\n<h2>Relations</h2>\n
<div id='rel'>\n<div id='rela'>\n<table class='rel'><th colspan='2'>My feelings towards
"+feelingsFor+"</th><tr><td>Relation Type:</td><td class='white'>"+relationType+"</td>
</tr><tr><td>Daily:</td><td class='white'>"+dailyA+" / "+dailyB+"</td></tr><tr><td>
Lifetime:</td><td class='white'>"+lifetimeA+" / "+lifetimeB+"</td></tr></table>
<table class='rel1'><tr><td class='white'>"+crush+"</td><td>Crush</td><td class='white'>
"+love+"</td><td>Love</td><td class='white'>"+engaged+"</td><td>Engaged</td><td class='white'>
"+married+"</td><td>Married</td></tr><tr><td class='white'>"+friends+"</td><td>Friends
</td><td class='white'>"+buddies+"</td><td>Buddies</td><td class='white'>"+known+"
</td><td>Known</td><td class='white'>"+bff+"</td><td>BFF</td></tr><tr><td class='white'>
"+steady+"</td><td>Steady</td><td class='white'>"+family+"</td><td>Family</td><td class='white'>
"+enemy+"</td><td>Enemy</td><td class='white'>"+unknown+"</td><td>Unknown</td></tr>
</table>\n</div>\n</div>\n</div>\n";
document.inputRelations.source2.value = outputRelations;
return outputRelations;
}
I got the answers I was wanting, but I still have one more. Is there a better/condensed way of handling nested functions?
edit I found out your errors.
when you use
class='white'>"+crush+"Crush
it must be used like crush()
class='white'>"+crush()+"</td><td>Crush</td>
because you are calling a function, that will return the value and not a function
change these
var crush = function() { var c1 = document.inputRelations.crush; var c2 = c1.length; if (c2[i].type == 'checkbox' && c2[i].checked === true); return c2.value; };
change it to
var crush = function() {
var c1 = document.inputRelations.crush;
if (c1.type == 'checkbox' && c1.checked === true);
return c1.value;
};
you can't use c2[i].value c2[i] is not in a loop, and it is just a number it is not the checkbox, c1 is the checkbox. c2 is just the checkbox.length, you don't need that. I hope that helps. If you need more guidance let me know.