Ggtcf

90's TV series where a boy goes to another dimension through portal near power lines

Why does Kotter return in Welcome Back Kotter?

In Romance of the Three Kingdoms why do people still use bamboo sticks when paper had already been invented?

Theorems that impeded progress

Is it unprofessional to ask if a job posting on GlassDoor is real?

What is the intuition behind short exact sequences of groups; in particular, what is the intuition behind group extensions?

Why does Arabsat 6A need a Falcon Heavy to launch

Doing something right before you need it - expression for this?

Fully-Firstable Anagram Sets

How to draw the figure with four pentagons?

Did Shadowfax go to Valinor?

Is the Joker left-handed?

Is it possible to create light that imparts a greater proportion of its energy as momentum rather than heat?

Infinite Abelian subgroup of infinite non Abelian group example

What is going on with Captain Marvel's blood colour?

Why is it a bad idea to hire a hitman to eliminate most corrupt politicians?

Does a druid starting with a bow start with no arrows?

Anagram holiday

Why is Collection not simply treated as Collection<?>

Is there a hemisphere-neutral way of specifying a season?

What is the most common color to indicate the input-field is disabled?

How many spell slots should my level 1 wizard/level 1 fighter have?

Is it possible to run Internet Explorer on OS X El Capitan?

Why is consensus so controversial in Britain?

getElementsByClassName gets one element when it comes from a php foreach

PHP: Delete an element from an arrayHow to get the value from the GET parameters?How do I get PHP errors to display?Get selected text from a drop-down list (select box) using jQueryGet the first element of an arrayHow do I get a YouTube video thumbnail from the YouTube API?How to get the client IP address in PHPHow do I remove a particular element from an array in JavaScript?Get the full URL in PHPHow does PHP 'foreach' actually work?

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty height:90px;width:728px;box-sizing:border-box;

1

1

I have this code in HTML where I have a foreach in PHP so that it generates each div.

I want to change the style of the div class="div-oculto" when I click Ocultar(hide) and Mostrar(show) but only in the div selected.

My problem is when I click on "Ocultar", it hides all the divs from the class "div-oculto", not just the selected one. The same happens when I click on "Mostrar". It shows me all the div class="div-oculto"s, not just the selected one.

I can't use getElementById()because each div is created according to the foreach generated by PHP.

I think I have to add an addEventListener() to my elements but I do not know how to do it so that it works.

Please, help me.

Thank you so, so much!

<script type="text/javascript">
 
 function Mostrar()
 var elements = document.getElementsByClassName('div-oculto');

 for(var i = 0; i < elements.length; i++) 
 elements[i].style.display = 'block';
 
 


function Ocultar()
 var elements = document.getElementsByClassName('div-oculto');

 for(var i = 0; i < elements.length; i++) 
 elements[i].style.display = 'none';
 
 

</script>

<?php foreach ($cursos as $curso) ?>


<div class="contenedor-curso">

 <div class="contenedor-izq">
 
 <div class="duracion-frecuencia-horario">
 <ul>
 <li>Duración</li>
 <li><strong><?php echo $curso->duracion; ?></strong></li>
 <br>
 <li>Horario</li>
 <li><strong><?php echo $curso->horario; ?></strong></li>
 </ul>
 </div>

 <div class="pedirInfo">
 <input type="submit" value="Mostrar" onclick="Mostrar()">
 </div>



 <div class="div-oculto" id="div-oculto">
 <div class="descripcionCurso">
 <p><?php echo $curso->detalle; ?></p>
 </div>

 <div class="pedirInfo">
 <input type="submit" value="Ocultar" onclick="Ocultar()">
 </div>
 
 </div>

<?php ; ?>

javascript php

share|improve this question

edited Mar 8 at 23:33

PinkClimbingApple

10818

asked Mar 8 at 23:28

SteffSteff

112

add a comment | 

1

1

I have this code in HTML where I have a foreach in PHP so that it generates each div.

I want to change the style of the div class="div-oculto" when I click Ocultar(hide) and Mostrar(show) but only in the div selected.

My problem is when I click on "Ocultar", it hides all the divs from the class "div-oculto", not just the selected one. The same happens when I click on "Mostrar". It shows me all the div class="div-oculto"s, not just the selected one.

I can't use getElementById()because each div is created according to the foreach generated by PHP.

I think I have to add an addEventListener() to my elements but I do not know how to do it so that it works.

Please, help me.

Thank you so, so much!

<script type="text/javascript">
 
 function Mostrar()
 var elements = document.getElementsByClassName('div-oculto');

 for(var i = 0; i < elements.length; i++) 
 elements[i].style.display = 'block';
 
 


function Ocultar()
 var elements = document.getElementsByClassName('div-oculto');

 for(var i = 0; i < elements.length; i++) 
 elements[i].style.display = 'none';
 
 

</script>

<?php foreach ($cursos as $curso) ?>


<div class="contenedor-curso">

 <div class="contenedor-izq">
 
 <div class="duracion-frecuencia-horario">
 <ul>
 <li>Duración</li>
 <li><strong><?php echo $curso->duracion; ?></strong></li>
 <br>
 <li>Horario</li>
 <li><strong><?php echo $curso->horario; ?></strong></li>
 </ul>
 </div>

 <div class="pedirInfo">
 <input type="submit" value="Mostrar" onclick="Mostrar()">
 </div>



 <div class="div-oculto" id="div-oculto">
 <div class="descripcionCurso">
 <p><?php echo $curso->detalle; ?></p>
 </div>

 <div class="pedirInfo">
 <input type="submit" value="Ocultar" onclick="Ocultar()">
 </div>
 
 </div>

<?php ; ?>

javascript php

share|improve this question

edited Mar 8 at 23:33

PinkClimbingApple

10818

asked Mar 8 at 23:28

SteffSteff

112

add a comment | 

I have this code in HTML where I have a foreach in PHP so that it generates each div.

I want to change the style of the div class="div-oculto" when I click Ocultar(hide) and Mostrar(show) but only in the div selected.

My problem is when I click on "Ocultar", it hides all the divs from the class "div-oculto", not just the selected one. The same happens when I click on "Mostrar". It shows me all the div class="div-oculto"s, not just the selected one.

I can't use getElementById()because each div is created according to the foreach generated by PHP.

I think I have to add an addEventListener() to my elements but I do not know how to do it so that it works.

Please, help me.

Thank you so, so much!

<script type="text/javascript">
 
 function Mostrar()
 var elements = document.getElementsByClassName('div-oculto');

 for(var i = 0; i < elements.length; i++) 
 elements[i].style.display = 'block';
 
 


function Ocultar()
 var elements = document.getElementsByClassName('div-oculto');

 for(var i = 0; i < elements.length; i++) 
 elements[i].style.display = 'none';
 
 

</script>

<?php foreach ($cursos as $curso) ?>


<div class="contenedor-curso">

 <div class="contenedor-izq">
 
 <div class="duracion-frecuencia-horario">
 <ul>
 <li>Duración</li>
 <li><strong><?php echo $curso->duracion; ?></strong></li>
 <br>
 <li>Horario</li>
 <li><strong><?php echo $curso->horario; ?></strong></li>
 </ul>
 </div>

 <div class="pedirInfo">
 <input type="submit" value="Mostrar" onclick="Mostrar()">
 </div>



 <div class="div-oculto" id="div-oculto">
 <div class="descripcionCurso">
 <p><?php echo $curso->detalle; ?></p>
 </div>

 <div class="pedirInfo">
 <input type="submit" value="Ocultar" onclick="Ocultar()">
 </div>
 
 </div>

<?php ; ?>

javascript php

share|improve this question

edited Mar 8 at 23:33

PinkClimbingApple

10818

asked Mar 8 at 23:28

SteffSteff

112

<script type="text/javascript">
 
 function Mostrar()
 var elements = document.getElementsByClassName('div-oculto');

 for(var i = 0; i < elements.length; i++) 
 elements[i].style.display = 'block';
 
 


function Ocultar()
 var elements = document.getElementsByClassName('div-oculto');

 for(var i = 0; i < elements.length; i++) 
 elements[i].style.display = 'none';
 
 

</script>

<?php foreach ($cursos as $curso) ?>


<div class="contenedor-curso">

 <div class="contenedor-izq">
 
 <div class="duracion-frecuencia-horario">
 <ul>
 <li>Duración</li>
 <li><strong><?php echo $curso->duracion; ?></strong></li>
 <br>
 <li>Horario</li>
 <li><strong><?php echo $curso->horario; ?></strong></li>
 </ul>
 </div>

 <div class="pedirInfo">
 <input type="submit" value="Mostrar" onclick="Mostrar()">
 </div>



 <div class="div-oculto" id="div-oculto">
 <div class="descripcionCurso">
 <p><?php echo $curso->detalle; ?></p>
 </div>

 <div class="pedirInfo">
 <input type="submit" value="Ocultar" onclick="Ocultar()">
 </div>
 
 </div>

<?php ; ?>

<script type="text/javascript">
 
 function Mostrar()
 var elements = document.getElementsByClassName('div-oculto');

 for(var i = 0; i < elements.length; i++) 
 elements[i].style.display = 'block';
 
 


function Ocultar()
 var elements = document.getElementsByClassName('div-oculto');

 for(var i = 0; i < elements.length; i++) 
 elements[i].style.display = 'none';
 
 

</script>

<?php foreach ($cursos as $curso) ?>


<div class="contenedor-curso">

 <div class="contenedor-izq">
 
 <div class="duracion-frecuencia-horario">
 <ul>
 <li>Duración</li>
 <li><strong><?php echo $curso->duracion; ?></strong></li>
 <br>
 <li>Horario</li>
 <li><strong><?php echo $curso->horario; ?></strong></li>
 </ul>
 </div>

 <div class="pedirInfo">
 <input type="submit" value="Mostrar" onclick="Mostrar()">
 </div>



 <div class="div-oculto" id="div-oculto">
 <div class="descripcionCurso">
 <p><?php echo $curso->detalle; ?></p>
 </div>

 <div class="pedirInfo">
 <input type="submit" value="Ocultar" onclick="Ocultar()">
 </div>
 
 </div>

<?php ; ?>

<script type="text/javascript">
 
 function Mostrar()
 var elements = document.getElementsByClassName('div-oculto');

 for(var i = 0; i < elements.length; i++) 
 elements[i].style.display = 'block';
 
 


function Ocultar()
 var elements = document.getElementsByClassName('div-oculto');

 for(var i = 0; i < elements.length; i++) 
 elements[i].style.display = 'none';
 
 

</script>

<?php foreach ($cursos as $curso) ?>


<div class="contenedor-curso">

 <div class="contenedor-izq">
 
 <div class="duracion-frecuencia-horario">
 <ul>
 <li>Duración</li>
 <li><strong><?php echo $curso->duracion; ?></strong></li>
 <br>
 <li>Horario</li>
 <li><strong><?php echo $curso->horario; ?></strong></li>
 </ul>
 </div>

 <div class="pedirInfo">
 <input type="submit" value="Mostrar" onclick="Mostrar()">
 </div>



 <div class="div-oculto" id="div-oculto">
 <div class="descripcionCurso">
 <p><?php echo $curso->detalle; ?></p>
 </div>

 <div class="pedirInfo">
 <input type="submit" value="Ocultar" onclick="Ocultar()">
 </div>
 
 </div>

<?php ; ?>

share|improve this question

edited Mar 8 at 23:33

PinkClimbingApple

10818

asked Mar 8 at 23:28

SteffSteff

112

share|improve this question

edited Mar 8 at 23:33

PinkClimbingApple

10818

asked Mar 8 at 23:28

SteffSteff

112

edited Mar 8 at 23:33

PinkClimbingApple

10818

edited Mar 8 at 23:33

PinkClimbingApple

10818

asked Mar 8 at 23:28

SteffSteff

112

asked Mar 8 at 23:28

SteffSteff

112

1 Answer
1

active

oldest

votes

1

Yes, you need to apply a event listener for each object that you want to click on, but not as a group. You still can use the same handler function for those groups though.
For example:

 var ocultoElements = [];
 window.onload = function () 
 ocultoElements = document.getElementsByClassName('div-oculto');
 for (i = 0; i < elements.length; i++) 
 ocultoElements[i].addEventListener("click", oculto_clickHandler.bind(this));
 
 
 function oculto_clickHandler(e) 
 for (i = 0; i < ocultoElements.length; i++) 
 if (ocultoElements[i] !== e.target) 
 ocultoElements[i].style.display = "none";
 
 else 
 ocultoElements[i].style.display = "block";
 
 
 

share|improve this answer

edited Mar 9 at 19:21

PinkClimbingApple

10818

answered Mar 8 at 23:48

MickMick

8715

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  This would be the easiest approach. You could significantly shorten this code by using this to reference each individual item as well.
  
  – Nick
  Mar 8 at 23:57
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Do I have to remove the onclick from the html tag? <input type="submit" value="Mostrar" onclick="Mostrar()"> I remove it but it does not work for the moment :(
  
  – Steff
  Mar 9 at 1:28
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Firstly, you shouldn't use the same name for the class as for the id of a element, as this will lead to confusion (for you). Secondly, if you want just certain div elements to react to a specific button click event then you should target them individually in each of those click event handlers. What I wrote was a generalization approach for what you had presented.
  
  – Mick
  Mar 9 at 2:01
  

  
  
  
  

add a comment | 

Your Answer

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);



);

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55072396%2fgetelementsbyclassname-gets-one-element-when-it-comes-from-a-php-foreach%23new-answer', 'question_page');

);

Post as a guest

Name

Email

Required, but never shown

1

Yes, you need to apply a event listener for each object that you want to click on, but not as a group. You still can use the same handler function for those groups though.
For example:

 var ocultoElements = [];
 window.onload = function () 
 ocultoElements = document.getElementsByClassName('div-oculto');
 for (i = 0; i < elements.length; i++) 
 ocultoElements[i].addEventListener("click", oculto_clickHandler.bind(this));
 
 
 function oculto_clickHandler(e) 
 for (i = 0; i < ocultoElements.length; i++) 
 if (ocultoElements[i] !== e.target) 
 ocultoElements[i].style.display = "none";
 
 else 
 ocultoElements[i].style.display = "block";
 
 
 

share|improve this answer

edited Mar 9 at 19:21

PinkClimbingApple

10818

answered Mar 8 at 23:48

MickMick

8715

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  This would be the easiest approach. You could significantly shorten this code by using this to reference each individual item as well.
  
  – Nick
  Mar 8 at 23:57
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Do I have to remove the onclick from the html tag? <input type="submit" value="Mostrar" onclick="Mostrar()"> I remove it but it does not work for the moment :(
  
  – Steff
  Mar 9 at 1:28
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Firstly, you shouldn't use the same name for the class as for the id of a element, as this will lead to confusion (for you). Secondly, if you want just certain div elements to react to a specific button click event then you should target them individually in each of those click event handlers. What I wrote was a generalization approach for what you had presented.
  
  – Mick
  Mar 9 at 2:01
  

  
  
  
  

add a comment | 

1

Yes, you need to apply a event listener for each object that you want to click on, but not as a group. You still can use the same handler function for those groups though.
For example:

 var ocultoElements = [];
 window.onload = function () 
 ocultoElements = document.getElementsByClassName('div-oculto');
 for (i = 0; i < elements.length; i++) 
 ocultoElements[i].addEventListener("click", oculto_clickHandler.bind(this));
 
 
 function oculto_clickHandler(e) 
 for (i = 0; i < ocultoElements.length; i++) 
 if (ocultoElements[i] !== e.target) 
 ocultoElements[i].style.display = "none";
 
 else 
 ocultoElements[i].style.display = "block";
 
 
 

share|improve this answer

edited Mar 9 at 19:21

PinkClimbingApple

10818

answered Mar 8 at 23:48

MickMick

8715

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  This would be the easiest approach. You could significantly shorten this code by using this to reference each individual item as well.
  
  – Nick
  Mar 8 at 23:57
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Do I have to remove the onclick from the html tag? <input type="submit" value="Mostrar" onclick="Mostrar()"> I remove it but it does not work for the moment :(
  
  – Steff
  Mar 9 at 1:28
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Firstly, you shouldn't use the same name for the class as for the id of a element, as this will lead to confusion (for you). Secondly, if you want just certain div elements to react to a specific button click event then you should target them individually in each of those click event handlers. What I wrote was a generalization approach for what you had presented.
  
  – Mick
  Mar 9 at 2:01
  

  
  
  
  

add a comment | 

Yes, you need to apply a event listener for each object that you want to click on, but not as a group. You still can use the same handler function for those groups though.
For example:

 var ocultoElements = [];
 window.onload = function () 
 ocultoElements = document.getElementsByClassName('div-oculto');
 for (i = 0; i < elements.length; i++) 
 ocultoElements[i].addEventListener("click", oculto_clickHandler.bind(this));
 
 
 function oculto_clickHandler(e) 
 for (i = 0; i < ocultoElements.length; i++) 
 if (ocultoElements[i] !== e.target) 
 ocultoElements[i].style.display = "none";
 
 else 
 ocultoElements[i].style.display = "block";
 
 
 

share|improve this answer

edited Mar 9 at 19:21

PinkClimbingApple

10818

answered Mar 8 at 23:48

MickMick

8715

 var ocultoElements = [];
 window.onload = function () 
 ocultoElements = document.getElementsByClassName('div-oculto');
 for (i = 0; i < elements.length; i++) 
 ocultoElements[i].addEventListener("click", oculto_clickHandler.bind(this));
 
 
 function oculto_clickHandler(e) 
 for (i = 0; i < ocultoElements.length; i++) 
 if (ocultoElements[i] !== e.target) 
 ocultoElements[i].style.display = "none";
 
 else 
 ocultoElements[i].style.display = "block";
 
 
 

share|improve this answer

edited Mar 9 at 19:21

PinkClimbingApple

10818

answered Mar 8 at 23:48

MickMick

8715

edited Mar 9 at 19:21

PinkClimbingApple

10818

edited Mar 9 at 19:21

PinkClimbingApple

10818

answered Mar 8 at 23:48

MickMick

8715

answered Mar 8 at 23:48

MickMick

8715