HTML DIV ID set with echo

Question

I’m having a problem that I can’t figure out, I can’t understand why the ID of the DIV does not receive the value from php, using the value of the constant $i, He always gets the last value of the loop. the proposal is to show/hide the DIV selected by ID when clicked on href of Name.

<div class="panel-body">
<?php
//classe
class Clientes{
    public $id;
    public $nome;
    public $cpf;
    public $endereco;

    public function __construct($id,$nome,$cpf,$endereco){
        $this->id = $id;
        $this->nome = $nome;
        $this->cpf = $cpf;
        $this->endereco = $endereco;
    }
};

    $cliente1 = new Clientes("0","Bruno","550","rua protasio");
    $cliente2 = new Clientes("1","Thiago","4400", "rua barao");
    $cliente3 = new Clientes("2","Ana","650","rua nova");
    $cliente4 = new Clientes("3","Beatriz","840","rua velha");
    $cliente5 = new Clientes("4","Gustavo","960","rua brasil");
    $cliente6 = new Clientes("5","Alberto","123255","rua jovem");
    $cliente7 = new Clientes("6","Jose","466897","rua normal");
    $cliente8 = new Clientes("7","Andre","44699", "rua das petalas");
    $cliente9 = new Clientes("8","Vinicius","87750", "rua irmao");
    $cliente10 = new Clientes("9","Bruna","4890", "rua bolao magico");

    $arrayclientes = array($cliente1, $cliente2,$cliente3,$cliente4,$cliente5,$cliente6,$cliente7,
                            $cliente8,$cliente9,$cliente10);


    for($i=0;$i<10;$i++){
    $arrayclientes[$i]->id;
    $arrayclientes[$i]->nome;
    $arrayclientes[$i]->cpf;
    $arrayclientes[$i]->endereco;
    include("thumbimg.php");
    }



    ?>
    </div>

According to Code:

<script>
function display()
{
var elem = document.getElementById("disp2");
alert(elem);
if(elem.style.visibility == "hidden"){
    elem.style.visibility="";

} else {
    elem.style.visibility="hidden";
}

} 

</script>
<?php
echo "disp" .$arrayclientes[$i]->id;
?>
<div>
<h4><a onclick="display()"> Nome:<?php echo $arrayclientes[$i]->nome; ?></h4></a>
    <div id=" <?php echo "disp" .$arrayclientes[$i]->id; ?> ">
    <h5>Cpf:<?php echo $arrayclientes[$i]->cpf; ?></h5>
    <p>Endereco: <?php echo $arrayclientes[$i]->endereco; ?></p>
    </div>
    </div>

Answer 1

I believe that the According to Code goes into the archive include("thumbimg.php");.

Code problems:

• With each loop you are repeating the function display() {...} and in var elem = document.getElementById("disp2"); you’re just calling the element with disp2, indepentende of the link you click.

• In the id of each element you added spaces at the beginning and end, <div id=" <?php echo "disp" .$arrayclientes[$i]->id; ?> ">, spaces are considered valid characters for the ID, so if you call document.getElementById("disp2"); it will return NULL as it is looking for a space-free ID

• You open the tag <h4>, then the tag e fechaprimeiro e depois fecha a tag`, this is wrong:

  <h4><a onclick="display()"> Nome:<?php echo $arrayclientes[$i]->nome; ?></h4></a>
  

  the right thing would be:

  <h4><a onclick="display()">Nome:<?php echo $arrayclientes[$i]->nome; ?></a></h4>
  

You solve the problem by moving the function to an isolated place outside the file thumbimg.php and pass a parameter on display() with id, see what your code might look like:

<script>
function display(id) {
    var elem = document.getElementById(id);
    alert(elem);
    if(elem.style.visibility == "hidden"){
        elem.style.visibility="";
    } else {
        elem.style.visibility="hidden";
    }
}
</script>

<div class="panel-body">
<?php
    class Clientes {
        public $id;
        public $nome;
        public $cpf;
        public $endereco;

        public function __construct($id,$nome,$cpf,$endereco) {
            $this->id = $id;
            $this->nome = $nome;
            $this->cpf = $cpf;
            $this->endereco = $endereco;
        }
    }

    $cliente1 = new Clientes("0","Bruno","550","rua protasio");
    $cliente2 = new Clientes("1","Thiago","4400", "rua barao");
    $cliente3 = new Clientes("2","Ana","650","rua nova");
    $cliente4 = new Clientes("3","Beatriz","840","rua velha");
    $cliente5 = new Clientes("4","Gustavo","960","rua brasil");
    $cliente6 = new Clientes("5","Alberto","123255","rua jovem");
    $cliente7 = new Clientes("6","Jose","466897","rua normal");
    $cliente8 = new Clientes("7","Andre","44699", "rua das petalas");
    $cliente9 = new Clientes("8","Vinicius","87750", "rua irmao");
    $cliente10 = new Clientes("9","Bruna","4890", "rua bolao magico");

    $arrayclientes = array($cliente1, $cliente2,$cliente3,$cliente4,$cliente5,$cliente6,$cliente7,
                            $cliente8,$cliente9,$cliente10);

    for ($i=0;$i<10;$i++) {
        $arrayclientes[$i]->id;
        $arrayclientes[$i]->nome;
        $arrayclientes[$i]->cpf;
        $arrayclientes[$i]->endereco;

        include("thumbimg.php");
    }
?>
</div>

and the second code:

<?php
echo 'disp', $arrayclientes[$i]->id;
?>
<div>
    <h4>
        <a onclick="display('<?php echo 'disp', $arrayclientes[$i]->id; ?>)">
            Nome: <?php echo $arrayclientes[$i]->nome; ?>
        </a>
    </h4>

    <div id="<?php echo 'disp', $arrayclientes[$i]->id; ?>">
        <h5>Cpf:<?php echo $arrayclientes[$i]->cpf; ?></h5>
        <p>Endereco: <?php echo $arrayclientes[$i]->endereco; ?></p>
    </div>
</div>

Answer 2

Remove the function display loop and change to receive id per parameter.

<script>
function display(divId)
{
    var elem = document.getElementById(divId);
    alert(elem);
    if(elem.style.visibility == "hidden"){
        elem.style.visibility="";
    } else {
       elem.style.visibility="hidden";
    }
}
</script>

And inside the loop, pass the ID to function on onclick.

<h4><a onclick="display('<?php echo "disp" .$i; ?>')"> Nome:<?php echo $arrayclientes[$i]->nome; ?></a></h4>
    <div id="<?php echo "disp" .$i; ?>">
    <h5>Cpf:<?php echo $arrayclientes[$i]->cpf; ?></h5>
    <p>Endereco: <?php echo $arrayclientes[$i]->endereco; ?></p>
    </div>
</div>

Answer 3

I believe this should solve the problem:

<script>
function display(pos)
{
   var elem = document.getElementById("disp" + pos);
   alert(elem);
   if (elem.style.visibility == "hidden") {
      elem.style.visibility="";
   } else {
     elem.style.visibility="hidden";
   }
} 
</script>
<?php  for($i=0;$i<10;$i++):?>
    <?php
    echo "disp" . $arrayclientes[$i]->id;
    ?>
    <div>
      <h4>
        <a href="javascript:void(0);" onclick="display(<?php echo $arrayclientes[$i]->id;?>)"> Nome: <?php echo $arrayclientes[$i]->nome; ?></a>
     </h4>
     <div id="<?php echo "disp" .$arrayclientes[$i]->id; ?>">
        <h5>Cpf:<?php echo $arrayclientes[$i]->cpf; ?></h5>
        <p>Endereco: <?php echo $arrayclientes[$i]->endereco; ?></p>
     </div>
   </div>
<?php endfor; ?>

Answer 4

Look at these changes, only works the DIV that got last value to "DIV 9";

<script>
function display()
{
var elem = document.getElementById("<?php echo"disp".$i;?>");
alert(elem);
if(elem.style.visibility == "hidden"){
    elem.style.visibility="";

} else {
    elem.style.visibility="hidden";
}

}

</script>
<?php
echo "disp".$i;
?>
<div>
<h4><a onclick="display()"> Nome:<?php echo $arrayclientes[$i]->nome; ?></a></h4>
    <div id="<?php echo "disp" .$i; ?>">
    <h5>Cpf:<?php echo $arrayclientes[$i]->cpf; ?></h5>
    <p>Endereco: <?php echo $arrayclientes[$i]->endereco; ?></p>
    </div>
</div>

I removed the ID in the attributes and etc..