How to use array in getElementById?
I am working on a project where I need to use array values in the getElementById() in javascript.
I tried various things, but the code isn't working.
Please help me.
I have an array of values like this:
var examStateArr=["examState1","examState2","examState3","examState4","examState5","examState6","examState7"];
and i use it in getElementById() as:
document.getElementById(examStateArr[str1-1]).value.innerHTML=xmlHttp.responseText
But this doesnt work.
The code works just fine when I hard code values like docum开发者_运维问答ent.getElementById("examState1"); but not when i use the array.
str1 is an integer that I pass from a jsp file below:
<%for (int j = 1; j < 8; j++) {%>
<tr>
<select name='examCountry<%= j%>' onchange=showExamState(<%= j%>,this.value);>
<option value="none" selected="selected">SELECT</option>
<% for (i = 0; i < countrySize; i++) {%>
<% country = (String) countryArr.get(i);%>
<option value=<%= country%>><%= country%></option>
<% }%>
</select>
</td>
<td id='examState<%= j%>'>
<select name='examState<%= j%>'>
<option value='none'>Select</option>
</select>
</td>
Please correct my mistake.
Thank you in advance.
var examStateArr = ["examState1", "examState2", "examState3", "examState4", "examState5", "examState6"];
for (var i = 0; i < examStateArr.length; i++) {
document.getElementById(examStateArr[i]).innerHTML = xmlHttp.responseText
}
Mistake one done by you
document.getElementById('').value.innerHTML -- is wrong
document.getElementById('').innerHTML -- is correct
Edit 2
make sure you call this function after DOM is loaded, try adding your script at the bottom
You haven't shown us what str1 is but it must be the problem.
For example, try:
document.getElementById(examStateArr[0])
And that should work fine. Array access is zero-based and you have six elements, so the valid values for [n] are 0-5.
It's also possible your array doesn't contain what you think it contains. Before wondering why docuemnt.getElementById isn't working, you should first make sure that what you are passing in is what you expected. Use alert, or with Firebug console.log to output the value you are passing in:
alert(examStateArr[str1 - 1]);
alert(examStateArr[0]);
alert(examStateArr);
if it works in the hard coded state then your problem must be in the str1-1 part of the code.
You haven't provided info on what str1 is. Whatever it is, try (str1-1) (with parens)... that might clear it up and make sure str1 is a value that represents your array index + 1 (maybe alert(str1) prior to your call to see what it actually is, rather than what you think it is).
Yes - this is an old entry but still an up to date topic. So I stumbled over it as well when I was looking for a solution for the following problem: The array does not exist at the beginning (as in the example above) but will be generated dynamically via PHP inside a HTML form.
My problem was that the text lines come in with ids (or names) like for example "text[0], text[1]" and I was neither able to write getElementById("text[0]") neither getElementById("text"[0]).
It took me some time to find a solution so I wrote some example code that works for this problem. Maybe someone finds it helpful ...
<!DOCTYPE html>
<html>
<head>
</head>
<script>
function getTotal(i) {
console.log("Line clicked: " + i);
var substr = "";
var radio_test = "myRadio"; // !! Name may not be at the same length as "value_test" in this example
var value_test = "myVal";
var sum_id = document.getElementById("aim");
var all = document.getElementsByTagName("*");
var values = [];
var status = [];
console.log("------------------------------------------------");
// STEP 1: Check radio elements if on/off and save their status and also their corresponding value fields
for (var i=0, max=all.length; i < max; i++) {
if (all[i].id != "") {
console.log("Find element " + all[i].id);
substr = all[i].id.substring(0, 7);
if (substr == radio_test) {
console.log("=> Radio element (" + all[i].id + ") BUTTON-NO (" + all[i].value + ") STATUS (" + + all[i].checked + ")");
if (all[i].value == 1) {
if (all[i].checked == true) {
console.log("ON");
status.push(1);
}
else {
console.log("OFF");
status.push(0);
}
}
} else {
substr = all[i].id.substring(0, 5);
if (substr == value_test) {
console.log("Value element - NAME " + all[i].id + " VAL " + all[i].value);
values.push(all[i].value);
} else
console.log("Another element we do not need at the moment");
}
}
}
// STEP 2: iterate through saved values and sum them up if radio button status was checked
console.log("------------------------------------------------");
var sum=0;
for (i=0; i<=status.length; i++) {
if (status[i] > 0)
sum += parseInt(values[i]);
}
sum_id.value = sum;
}
</script>
<body>
<br>USE JAVASCRIPT TO SUM UP VALUES FROM ALL CHECKED LINES THAT WERE CREATED DYNAMICALLY
<br><br>
<?php
// Total sum of all checked lines
echo "<div style='clear: both; padding: 5px; border-color: red; border-style: solid; margin-top: 2px;'>";
echo "SUM <input id='aim' name='aim' type='text'>";
echo "</div>";
echo "<br><br>";
// Create some lines dynamically (and fill them with random values for testing purpose)
for ($i=0; $i<10; $i++) {
echo "<div style='clear: both; padding: 5px; border-color: black; border-style: solid; margin-top: 2px;'>";
echo "Line $i: <input type='text' id='myVal[".$i."]' name='myVal[".$i."]' value='".random_int(1, 100)."' >";
echo " ON <input type='radio' id='myRadio[".$i."]' name='myRadio[".$i."]' value='1' onchange='getTotal($i)'>";
echo " OFF <input checked type='radio' id='myRadio[".$i."]' name='myRadio[".$i."]' value='2' onchange='getTotal($i)'>";
echo "</div>";
}
?>
</body>
</html>
加载中,请稍侯......
精彩评论