Home/ Questions/Q 6380405
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-25T02:15:48+00:00

With the code below, I am trying to make a div with displays 5

  • 0

With the code below, I am trying to make a div with displays 5 hidden divs when using the Next button. However, this does not work in IE because on the line:

document.getElementById("pic_container" + c).innerHTML += "<tr id='pic_row" + rowNum + "'></tr>";

is trying to change the inner html of a table, which I know IE does not like. If anyone can give me an alternate solution to this problem, feel free to let me know. None of the solutions I found online helped me out, with the styling of td’s and all that mumbo jumbo.

<html>

<head>
<style>

#container
{
height:256px;
width:517px;
overflow:hidden;
border:1px solid black;

}

.pic_container
{
height:256px;
width:418px;
margin-left:50px;
margin-right:50px;
background-color:yellow;
position:relative;
}

.pic_container input
{
margin-left:47px;
}

.image
{
background-color:red;
height:100px;
width:100px;
}

.image2
{
background-color:blue;
height:50px;
width:50px;
}

</style>

<script>
var num = 1;

function loadDivs(){
var rowNum = 0;
var picNum = 1;
for(var c = 1; c<= 5; c++){
    document.getElementById("container").innerHTML += "<div  class='pic_container'><table id='pic_container" + c + "'></table></div>";
    for(var x = 0; x<4; x++){
        document.getElementById("pic_container" + c).innerHTML += "<tr id='pic_row" + rowNum + "'></tr>";
        if(x == 0){
            for(var dimg = 1; dimg <=4; dimg++){
                document.getElementById("pic_row" + rowNum).innerHTML += "<td><div class='image'></div></td>";
                }
            }
        else if(x ==1){
            for(var dimg = 1; dimg <=4; dimg++){
                document.getElementById("pic_row" + rowNum).innerHTML += "<td><input type='radio' name='imageChooser' value='Pic " + picNum + "'/></td>";
                picNum++;
                }
            }
        else if(x == 2){
            for(var dimg = 5; dimg <=8; dimg++){
                document.getElementById("pic_row" + rowNum).innerHTML += "<td><div class='image'></div></td>";
                }
            }
        else{
            for(var dimg = 5; dimg <=8; dimg++){
                document.getElementById("pic_row" + rowNum).innerHTML += "<td><input type='radio' name='imageChooser' value='Pic " + picNum + "'/></td>";
                picNum++;
                }
            }
        rowNum++;
        }
    }
}

function decrement(){  if(num > 1) num--; }
function increment(){ if(num < 5) num++; }

function getNextId(){ window.location =  "#pic_container" + num;}

function display(){ 
var rads = document.getElementsByName("imageChooser");
for(var i = 0; i < rads.length; i++){
    if(rads[i].checked){ document.getElementById("disp_div").innerHTML = rads[i].value;
    }
}
}
</script>
</head>
<body onLoad="loadDivs()">
    <div id="container">
    </div>

    <a href="javascript:increment(); javascript:getNextId();">Next</a>
    <a href="javascript:decrement(); javascript:getNextId();">Back</a>
    <a href="javascript:display();">Select</a>
    <div id="disp_div"></div>
</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Is this what you wanted?

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script>
var num = 1;

function loadDivs() {
    var rowNum = 0;
    var picNum = 1;
    for (var c=1; c<=5; c++) {
        $("#container").html($("#container").html() + "<div class='pic_container'><table id='pic_container" + c + "'></table></div>");
        for(var x=0; x<4; x++) {
            $("#pic_container" + c).html($("#pic_container" + c).html() + "<tr id='pic_row" + rowNum + "'></tr>");
            switch (x) {
            case 0:
                for(var dimg = 1; dimg <=4; dimg++)
                    $("#pic_row" + rowNum).html($("#pic_row" + rowNum).html() + "<td><div class='image'></div></td>");
                break;
            case 1:
                for(var dimg = 1; dimg <=4; dimg++)
                    $("#pic_row" + rowNum).html($("#pic_row" + rowNum).html() + "<td><input type='radio' name='imageChooser' value='Pic " + (picNum++) + "'/></td>");
                break;
            case 2:
                for(var dimg = 5; dimg <=8; dimg++)
                    $("#pic_row" + rowNum).html($("#pic_row" + rowNum).html() + "<td><div class='image'></div></td>");
                break;
            default:
                for(var dimg = 5; dimg <=8; dimg++)
                   $("#pic_row" + rowNum).html($("#pic_row" + rowNum).html() + "<td><input type='radio' name='imageChooser' value='Pic " + (picNum++) + "'/></td>");
            }
        rowNum++;
        }
    }
}

function decrement(){ num = Math.max(1, --num); }
function increment(){ num = Math.min(5, ++num); }

function getNextId(){ window.location =  "#pic_container" + num;}

function display(){ 
    $("input[name='imageChooser']").each(function() {
            if ($(this).prop("checked")) $("#disp_div").html($(this).val());
        });
}
</script>
    • 0