DOM元素返回未定义
[英]DOM elements coming back undefined
问题描述
我一直在找回“ undefined”的值...不知道为什么它不能在for循环中工作，但是要高于alert($("#evalRate1").val()); 确实返回正确的值。
背景 ：我正在构建评估系统，并且无论评估人员选择什么，当评估者选择“否”以接受使用时，我都希望隐藏该区域以供评论。 这是我到目前为止的代码。
代码 ：//在所有问题$（“。Questions”）。css（“ border”，“ 1px solid blue”）周围加上蓝色边框 //提醒用户ID值evalRate1 alert（$（“＃evalRate1”）。val（））;
//loop from 1 to 15 for all items to hit every question
for(var i = 1; i <= 15; i++) {
var selfRateID = "selfRate" + i;
var evalRateID = "evalRate" + i;
var selfCmntID = "selfCmnt" + i;
var evalCmntID = "evalCmnt" + i;
alert("Variable is: " + evalRateID);
alert("Value is: " + $('#evalRateID').val());
//check the evaluator answer
//if the evaluator answer == 'No' (value = 0), hide the comment section
if($('#evalRateID').val() == 0) {
$(".Comments").css("display", "none");
alert("Hiding element!");
} else {
alert("Value was not == 0");
}
</script>
CFML生成的HTML输出：我的评估测试页#pageTable {宽度：100％； 边框：1px纯黑色； }。问题{宽度：100％； }。评论{宽度：100％； }问题评估者得分自我得分
<tr>
<table class="Questions">
<tr id="Question1">
<td>1. This represents a question.</td>
<td width="150px"><select name="evalRate1" id="evalRate1">
<option value="0" selected="selected">No</option>
<option value="1">Yes</option>
</select></td>
<td width="150px"><select name="selfRate1" id="selfRate1">
<option value="0" selected="selected">No</option>
<option value="1">Yes</option>
</select></td>
</tr>
</table>
</tr>
<tr>
<table class="Comments">
<tr align="center" id="Cmnts1" >
<td id="evalCmnt1">Evaluator Comment:<br />
<textarea name="evalCmnt1" cols="30" rows="6" readonly="readonly" id="evalCmnt1">This represents an evaluator comment for question #1.</textarea></td>
<td id="selfCmnt1">Self Comment:<br />
<textarea name="selfCmnt1" cols="30" rows="6" readonly="readonly" id="selfCmnt1">This represents a self comment for question #1.</textarea></td>
</tr>
</table>
</tr>
<tr>
<table class="Questions">
<tr id="Question2">
<td>2. This represents a question.</td>
<td width="150px"><select name="evalRate2" id="evalRate2">
<option value="0">No</option>
<option value="1" selected="selected">Yes</option>
</select></td>
<td width="150px"><select name="selfRate2" id="selfRate2">
<option value="0">No</option>
<option value="1" selected="selected">Yes</option>
</select></td>
</tr>
</table>
</tr>
<tr>
<table class="Comments">
<tr align="center" id="Cmnts2" >
<td id="evalCmnt2">Evaluator Comment:<br />
<textarea name="evalCmnt2" cols="30" rows="6" readonly="readonly" id="evalCmnt2">This represents an evaluator comment for question #2.</textarea></td>
<td id="selfCmnt2">Self Comment:<br />
<textarea name="selfCmnt2" cols="30" rows="6" readonly="readonly" id="selfCmnt2">This represents a self comment for question #2.</textarea></td>
</tr>
</table>
</tr>
<tr>
<table class="Questions">
<tr id="Question3">
<td>3. This represents a question.</td>
<td width="150px"><select name="evalRate3" id="evalRate3">
<option value="0" selected="selected">No</option>
<option value="1">Yes</option>
</select></td>
<td width="150px"><select name="selfRate3" id="selfRate3">
<option value="0" selected="selected">No</option>
<option value="1">Yes</option>
</select></td>
</tr>
</table>
</tr>
<tr>
<table class="Comments">
<tr align="center" id="Cmnts3" >
<td id="evalCmnt3">Evaluator Comment:<br />
<textarea name="evalCmnt3" cols="30" rows="6" readonly="readonly" id="evalCmnt3">This represents an evaluator comment for question #3.</textarea></td>
<td id="selfCmnt3">Self Comment:<br />
<textarea name="selfCmnt3" cols="30" rows="6" readonly="readonly" id="selfCmnt3">This represents a self comment for question #3.</textarea></td>
</tr>
</table>
</tr>
<tr>
<table class="Questions">
<tr id="Question4">
<td>4. This represents a question.</td>
<td width="150px"><select name="evalRate4" id="evalRate4">
<option value="0" selected="selected">No</option>
<option value="1">Yes</option>
</select></td>
<td width="150px"><select name="selfRate4" id="selfRate4">
<option value="0">No</option>
<option value="1" selected="selected">Yes</option>
</select></td>
</tr>
</table>
</tr>
<tr>
<table class="Comments">
<tr align="center" id="Cmnts4" >
<td id="evalCmnt4">Evaluator Comment:<br />
<textarea name="evalCmnt4" cols="30" rows="6" readonly="readonly" id="evalCmnt4">This represents an evaluator comment for question #4.</textarea></td>
<td id="selfCmnt4">Self Comment:<br />
<textarea name="selfCmnt4" cols="30" rows="6" readonly="readonly" id="selfCmnt4">This represents a self comment for question #4.</textarea></td>
</tr>
</table>
</tr>
<tr>
<table class="Questions">
<tr id="Question5">
<td>5. This represents a question.</td>
<td width="150px"><select name="evalRate5" id="evalRate5">
<option value="0" selected="selected">No</option>
<option value="1">Yes</option>
</select></td>
<td width="150px"><select name="selfRate5" id="selfRate5">
<option value="0" selected="selected">No</option>
<option value="1">Yes</option>
</select></td>
</tr>
</table>
</tr>
<tr>
<table class="Comments">
<tr align="center" id="Cmnts5" >
<td id="evalCmnt5">Evaluator Comment:<br />
<textarea name="evalCmnt5" cols="30" rows="6" readonly="readonly" id="evalCmnt5">This represents an evaluator comment for question #5.</textarea></td>
<td id="selfCmnt5">Self Comment:<br />
<textarea name="selfCmnt5" cols="30" rows="6" readonly="readonly" id="selfCmnt5">This represents a self comment for question #5.</textarea></td>
</tr>
</table>
</tr>
<tr>
<table class="Questions">
<tr id="Question6">
<td>6. This represents a question.</td>
<td width="150px"><select name="evalRate6" id="evalRate6">
<option value="0">No</option>
<option value="1" selected="selected">Yes</option>
</select></td>
<td width="150px"><select name="selfRate6" id="selfRate6">
<option value="0">No</option>
<option value="1" selected="selected">Yes</option>
</select></td>
</tr>
</table>
</tr>
<tr>
<table class="Comments">
<tr align="center" id="Cmnts6" >
<td id="evalCmnt6">Evaluator Comment:<br />
<textarea name="evalCmnt6" cols="30" rows="6" readonly="readonly" id="evalCmnt6">This represents an evaluator comment for question #6.</textarea></td>
<td id="selfCmnt6">Self Comment:<br />
<textarea name="selfCmnt6" cols="30" rows="6" readonly="readonly" id="selfCmnt6">This represents a self comment for question #6.</textarea></td>
</tr>
</table>
</tr>
<tr>
<table class="Questions">
<tr id="Question7">
<td>7. This represents a question.</td>
<td width="150px"><select name="evalRate7" id="evalRate7">
<option value="0" selected="selected">No</option>
<option value="1">Yes</option>
</select></td>
<td width="150px"><select name="selfRate7" id="selfRate7">
<option value="0" selected="selected">No</option>
<option value="1">Yes</option>
</select></td>
</tr>
</table>
</tr>
<tr>
<table class="Comments">
<tr align="center" id="Cmnts7" >
<td id="evalCmnt7">Evaluator Comment:<br />
<textarea name="evalCmnt7" cols="30" rows="6" readonly="readonly" id="evalCmnt7">This represents an evaluator comment for question #7.</textarea></td>
<td id="selfCmnt7">Self Comment:<br />
<textarea name="selfCmnt7" cols="30" rows="6" readonly="readonly" id="selfCmnt7">This represents a self comment for question #7.</textarea></td>
</tr>
</table>
</tr>
<tr>
<table class="Questions">
<tr id="Question8">
<td>8. This represents a question.</td>
<td width="150px"><select name="evalRate8" id="evalRate8">
<option value="0">No</option>
<option value="1" selected="selected">Yes</option>
</select></td>
<td width="150px"><select name="selfRate8" id="selfRate8">
<option value="0">No</option>
<option value="1" selected="selected">Yes</option>
</select></td>
</tr>
</table>
</tr>
<tr>
<table class="Comments">
<tr align="center" id="Cmnts8" >
<td id="evalCmnt8">Evaluator Comment:<br />
<textarea name="evalCmnt8" cols="30" rows="6" readonly="readonly" id="evalCmnt8">This represents an evaluator comment for question #8.</textarea></td>
<td id="selfCmnt8">Self Comment:<br />
<textarea name="selfCmnt8" cols="30" rows="6" readonly="readonly" id="selfCmnt8">This represents a self comment for question #8.</textarea></td>
</tr>
</table>
</tr>
<tr>
<table class="Questions">
<tr id="Question9">
<td>9. This represents a question.</td>
<td width="150px"><select name="evalRate9" id="evalRate9">
<option value="0" selected="selected">No</option>
<option value="1">Yes</option>
</select></td>
<td width="150px"><select name="selfRate9" id="selfRate9">
<option value="0" selected="selected">No</option>
<option value="1">Yes</option>
</select></td>
</tr>
</table>
</tr>
<tr>
<table class="Comments">
<tr align="center" id="Cmnts9" >
<td id="evalCmnt9">Evaluator Comment:<br />
<textarea name="evalCmnt9" cols="30" rows="6" readonly="readonly" id="evalCmnt9">This represents an evaluator comment for question #9.</textarea></td>
<td id="selfCmnt9">Self Comment:<br />
<textarea name="selfCmnt9" cols="30" rows="6" readonly="readonly" id="selfCmnt9">This represents a self comment for question #9.</textarea></td>
</tr>
</table>
</tr>
<tr>
<table class="Questions">
<tr id="Question10">
<td>10. This represents a question.</td>
<td width="150px"><select name="evalRate10" id="evalRate10">
<option value="0">No</option>
<option value="1" selected="selected">Yes</option>
</select></td>
<td width="150px"><select name="selfRate10" id="selfRate10">
<option value="0">No</option>
<option value="1" selected="selected">Yes</option>
</select></td>
</tr>
</table>
</tr>
<tr>
<table class="Comments">
<tr align="center" id="Cmnts10" >
<td id="evalCmnt10">Evaluator Comment:<br />
<textarea name="evalCmnt10" cols="30" rows="6" readonly="readonly" id="evalCmnt10">This represents an evaluator comment for question #10.</textarea></td>
<td id="selfCmnt10">Self Comment:<br />
<textarea name="selfCmnt10" cols="30" rows="6" readonly="readonly" id="selfCmnt10">This represents a self comment for question #10.</textarea></td>
</tr>
</table>
</tr>
<tr>
<table class="Questions">
<tr id="Question11">
<td>11. This represents a question.</td>
<td width="150px"><select name="evalRate11" id="evalRate11">
<option value="0" selected="selected">No</option>
<option value="1">Yes</option>
</select></td>
<td width="150px"><select name="selfRate11" id="selfRate11">
<option value="0" selected="selected">No</option>
<option value="1">Yes</option>
</select></td>
</tr>
</table>
</tr>
<tr>
<table class="Comments">
<tr align="center" id="Cmnts11" >
<td id="evalCmnt11">Evaluator Comment:<br />
<textarea name="evalCmnt11" cols="30" rows="6" readonly="readonly" id="evalCmnt11">This represents an evaluator comment for question #11.</textarea></td>
<td id="selfCmnt11">Self Comment:<br />
<textarea name="selfCmnt11" cols="30" rows="6" readonly="readonly" id="selfCmnt11">This represents a self comment for question #11.</textarea></td>
</tr>
</table>
</tr>
<tr>
<table class="Questions">
<tr id="Question12">
<td>12. This represents a question.</td>
<td width="150px"><select name="evalRate12" id="evalRate12">
<option value="0">No</option>
<option value="1" selected="selected">Yes</option>
</select></td>
<td width="150px"><select name="selfRate12" id="selfRate12">
<option value="0">No</option>
<option value="1" selected="selected">Yes</option>
</select></td>
</tr>
</table>
</tr>
<tr>
<table class="Comments">
<tr align="center" id="Cmnts12" >
<td id="evalCmnt12">Evaluator Comment:<br />
<textarea name="evalCmnt12" cols="30" rows="6" readonly="readonly" id="evalCmnt12">This represents an evaluator comment for question #12.</textarea></td>
<td id="selfCmnt12">Self Comment:<br />
<textarea name="selfCmnt12" cols="30" rows="6" readonly="readonly" id="selfCmnt12">This represents a self comment for question #12.</textarea></td>
</tr>
</table>
</tr>
<tr>
<table class="Questions">
<tr id="Question13">
<td>13. This represents a question.</td>
<td width="150px"><select name="evalRate13" id="evalRate13">
<option value="0" selected="selected">No</option>
<option value="1">Yes</option>
</select></td>
<td width="150px"><select name="selfRate13" id="selfRate13">
<option value="0" selected="selected">No</option>
<option value="1">Yes</option>
</select></td>
</tr>
</table>
</tr>
<tr>
<table class="Comments">
<tr align="center" id="Cmnts13" >
<td id="evalCmnt13">Evaluator Comment:<br />
<textarea name="evalCmnt13" cols="30" rows="6" readonly="readonly" id="evalCmnt13">This represents an evaluator comment for question #13.</textarea></td>
<td id="selfCmnt13">Self Comment:<br />
<textarea name="selfCmnt13" cols="30" rows="6" readonly="readonly" id="selfCmnt13">This represents a self comment for question #13.</textarea></td>
</tr>
</table>
</tr>
<tr>
<table class="Questions">
<tr id="Question14">
<td>14. This represents a question.</td>
<td width="150px"><select name="evalRate14" id="evalRate14">
<option value="0">No</option>
<option value="1" selected="selected">Yes</option>
</select></td>
<td width="150px"><select name="selfRate14" id="selfRate14">
<option value="0">No</option>
<option value="1" selected="selected">Yes</option>
</select></td>
</tr>
</table>
</tr>
<tr>
<table class="Comments">
<tr align="center" id="Cmnts14" >
<td id="evalCmnt14">Evaluator Comment:<br />
<textarea name="evalCmnt14" cols="30" rows="6" readonly="readonly" id="evalCmnt14">This represents an evaluator comment for question #14.</textarea></td>
<td id="selfCmnt14">Self Comment:<br />
<textarea name="selfCmnt14" cols="30" rows="6" readonly="readonly" id="selfCmnt14">This represents a self comment for question #14.</textarea></td>
</tr>
</table>
</tr>
<tr>
<table class="Questions">
<tr id="Question15">
<td>15. This represents a question.</td>
<td width="150px"><select name="evalRate15" id="evalRate15">
<option value="0" selected="selected">No</option>
<option value="1">Yes</option>
</select></td>
<td width="150px"><select name="selfRate15" id="selfRate15">
<option value="0" selected="selected">No</option>
<option value="1">Yes</option>
</select></td>
</tr>
</table>
</tr>
<tr>
<table class="Comments">
<tr align="center" id="Cmnts15" >
<td id="evalCmnt15">Evaluator Comment:<br />
<textarea name="evalCmnt15" cols="30" rows="6" readonly="readonly" id="evalCmnt15">This represents an evaluator comment for question #15.</textarea></td>
<td id="selfCmnt15">Self Comment:<br />
<textarea name="selfCmnt15" cols="30" rows="6" readonly="readonly" id="selfCmnt15">This represents a self comment for question #15.</textarea></td>
</tr>
</table>
</tr>
</table>
</form>
<script type="text/javascript">
//put a blue border around all questions
$(".Questions").css("border", "1px solid blue");
//alert user to value of ID evalRate1
//alert($("#evalRate1").val());
//loop from 1 to 15 for all items to hit every question
for(var i = 1; i <= 3; i++) {
var selfRateID = "selfRate" + i;
var evalRateID = "evalRate" + i;
var selfCmntID = "selfCmnt" + i;
var evalCmntID = "evalCmnt" + i;
var CommentsID = "Cmnts" + i;
alert("Variable is: " + evalRateID);
//check the evaluator answer
//if the evaluator answer == 'No' (value = 0), hide the comment section
if($('#evalRateID').val() == 0) {
$(".Comments").css("display", "none");
} else {
alert("Value was: " + $('#evalRateID').val());
}
}
</script>
</body>
</html>
3 个解决方案
解决方案1
7 已采纳 2012-09-11 16:59:24
错了
if($('#evalRateID').val() == 0) {
应该是这个
if($('#' + evalRateID).val() == 0) {
第一个寻找id "evalRateID" 。
第二个查找存储在evalRateID变量中的id。
解决方案2
5 2012-09-11 16:59:23
看线
alert("Value is: " + $('#evalRateID').val());
它将仅搜索ID为evalRateID元素，但您要搜索evalRate1 。 所以用
alert("Value is: " + $('#'+evalRateID).val());
由于evalRateID被定义为变量。
解决方案3
1 2012-09-11 17:04:12
根据脚本在文档中的位置，您可能需要将代码包装如下：
$(function() {
// ...
//all code goes here
// ...
});
这样可以确保在DOM准备就绪之前（即，在将提供的HTML / CSS解释为DOM节点之前）不执行所包含的代码。
charAt返回未定义
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.