|
Answer» I have only recently gotten into JavaScript, and STILL feel I am mostly a beginner in doing things with it, so it is quite possible this is a beginner mistake, but I would like to learn.
I have this script in the head section of the page, but it is not doing what I want it to do. In fact, it doesn't seem it is doing anything at all. Almost as if it isn't being activated by the onclick event. I'll show the parts of the code that are relavent, and a little more.
Code: [Select] function reform(boxCheck) {
if (document.getElementById(boxCheck).checked) {
var x = concat("ext",boxCheck);
console.log(x);
document.getElementById(x).style.display = 'block';
} else {
var x = concat("ext",boxCheck);
var v = concat("val",boxCheck);
var s = concat("sym",boxCheck);
var a = concat("act",boxCheck);
document.getElementById(v) = null;
document.getElementById(s) = null;
document.getElementById(a) = null;
document.getElementById(x).style.display = 'none';
}
Code: [Select]<form>
<datalist id="symptoms">
<option value="Pain/Discomfort">
<option value="Stiffness">
<option value="Weakness">
<option value="Instability">
<option value="Numbness">
<option value="Paresthesias">
</datalist>
<input id="Head" type="checkbox" class="arealist" name="areaseff" value="Head" onchange="reform('Head')">Head
<P id="extHead" style="display: none"><input id="valHead" type="number" name="valHead" MIN="0" max="100">%<br>
Symptom: <input list="symptoms" id="symHead" name="symHead"> Affected Activity: <input type="text" id="actHead" name="actHead">
</p>
<br>What I'm trying to do is make the form dynamic and if the checkbox is checked, expand to allow elaboration. I'm sure I am missing something, just unsure as to what. Also, if there is a better way to do this, I'm open to learning best practices, etc.Concat is not a function. it is a method. In this case it is also redundant- you can simply use + to concatenate strings.
You cannot assign to a function result:
Code: [Select]document.getElementById(v) = null
You don't need to interact with anything besides the p tag itself (extHead in this case) and change it's display attribute. This seems to do what you want... (No idea how well the code tag works with HTML though)
Code: [Select]<html>
<head>
<Script type="text/javascript"> function reform(boxCheck) {
if (document.getElementById(boxCheck).checked) {
var x = "ext" + boxCheck;
console.log(x);
document.getElementById(x).style.display = 'block';
} else {
var x = "ext" + boxCheck;
document.getElementById(x).style.display = 'none';
}
}
</Script>
</head>
<body>
<form>
<datalist id="symptoms">
<option value="Pain/Discomfort">
<option value="Stiffness">
<option value="Weakness">
<option value="Instability">
<option value="Numbness">
<option value="Paresthesias">
</datalist>
<input id="Head" type="checkbox" class="arealist" name="areaseff" value="Head" onchange="reform('Head')">Head
<p id="extHead" style="display: none"><input id="valHead" type="number" name="valHead" min="0" max="100">%<br>
Symptom: <input list="symptoms" id="symHead" name="symHead"> Affected Activity: <input type="text" id="actHead" name="actHead">
</p>
<br></form>
</body>
</html>
Thank you BC. This ended up working. I also see you corrected the missing } in the code that my copy and PASTING had left behind. Jumping back and forth between sequence programming and OOP was also a culprit in my use of concat. I'll try to walk AWAY and come back with fresh eyes in the future to hopefully catch errors like that. I appreciate the assistance.
|
