CODEWITHSUNDEEP
javascriptvariables
Lennart
Lennart

Reputation: 1560

JS use variable as id for document.getElementById Not working?

I'm confused why this is ot working:

var blocks = document.getElementsByTagName("td");
        var i = 0;
        for(i=0;i<blocks.length;i++){
            var id = String(blocks[i].id);
            var col_pos_y = document.getElementById(id).style.top;
            alert(col_pos_y);

        }

Am I missing something, because firefox seems to just alert out a blank alert message? Anyone got an idea why this isn't working?

This is the html/php code for the generation of the td's

<table cellspacing="0" cellpadding="0" style="position: absolute; top: 80%; z-index:5;" border="0">
<?php
$blocks = array();
for($k=1;$k<=3;$k++){   
    $row_number = "row_".$k;
?>
    <tr id="<?php echo $row_number; ?>">
<?
    for($i=0;$i<=100;$i++){
        if($k==1){
            $rand_number = rand(0, 100);
        }
        else if($k==2){
            $rand_number = rand(30, 100);
        }
        else if($k==3){
            $rand_number = rand(50, 100);
        }
        if($rand_number<50){
            for($l=0;$l<=count($blocks);$l++){
                $row_counter = $k-1;
                if($blocks[$l]=="row_".$row_counter."_col_".$i."_type_grass"){
                    $block_exists="true";
                    break;
                }
                else{
                    $block_exists="false";
                }
            }
            if($block_exists=="true"){
                array_push($blocks, $row_number."_col_".$i."_type_grass");

                $background_position = generate_dirt_block();
                ?>
                    <td id="<?php echo $row_number; ?>_col_<?php echo $i ?>_type_grass" style="font-size: 10px; cursor: pointer; background-image:url('img/terrain.png'); background-repeat: no-repeat; background-position: <?php echo $background_position ?>; min-width: 32px; height: 32px;">

                    </td>
                <?php
            }
            else{
                array_push($blocks, $row_number."_col_".$i."_type_blank");
                ?>
                     <td id="<?php echo $row_number; ?>_col_<?php echo $i ?>_type_blank" style="font-size: 10px; min-width: 32px; height: 32px;">

                     </td>
                <?php
            }
        }
        else if($rand_number>=50  && $rand_number<=100){
            array_push($blocks, $row_number."_col_".$i."_type_grass");
            for($l=0;$l<=count($blocks);$l++){
                $row_counter = $k-1;
                if($blocks[$l]=="row_".$row_counter."_col_".$i."_type_grass"){
                    $block_exists="true";
                    break;
                }
                else{
                    $block_exists="false";
                }
            }
            if($block_exists=="true"){
                $background_position = generate_dirt_block();
                ?>
                    <td id="<?php echo $row_number ?>_col_<?php echo $i ?>_type_grass" style="font-size: 10px; cursor: pointer; background-image:url('img/terrain.png'); background-repeat: no-repeat; background-position: <?php echo $background_position ?>; min-width: 32px; height: 32px;">

                    </td>
                <?php
            }
            else{
                ?>
                    <td id="<?php echo $row_number; ?>_col_<?php echo $i ?>_type_grass" style="font-size: 10px; cursor: pointer; background-image:url('img/terrain.png'); background-repeat: no-repeat; background-position: 0px -32px; min-width: 32px; height: 32px;">
                        <div style="width: 100%; position: relative; top: 0px;">
                            <div style="background-image:url('img/terrain.png'); background-repeat: no-repeat; background-position: -384px 0px; width: 32px; height: 10px; position: absolute; top: -17px;">

                            </div>
                        </div>
                    </td>
                <?php
            }
        }
    }
?>
    </tr>
<?php
}
?>
</table>

Upvotes: 0

Views: 823

Answers (1)

Quentin
Quentin

Reputation: 943569

If getElementById() wasn't working, then trying to access .style.top on the return value would error and the alert would never be reached.

The .style.top property of the element is simply blank (indicating that it has not been set with either JavaScript or the style attribute).

Use getComputedStyle if you want to access the property as applied via the cascade.

Use offsetTop if you want to work out its position as set via normal flow).

Upvotes: 4

Related Questions