Ufdjrw

Question about this thing for timpani

Is it dangerous to install hacking tools on my private linux machine?

Tannaka duality for semisimple groups

i2c bus hangs in master RPi access to MSP430G uC ~1 in 1000 accesses

Weaponising the Grasp-at-a-Distance spell

Tips to organize LaTeX presentations for a semester

Why is std::move not [[nodiscard]] in C++20?

Is there hard evidence that the grant peer review system performs significantly better than random?

Did pre-Columbian Americans know the spherical shape of the Earth?

If Windows 7 doesn't support WSL, then what is "Subsystem for UNIX-based Applications"?

How often does castling occur in grandmaster games?

What are the main differences between the original Stargate SG-1 and the Final Cut edition?

Was Kant an Intuitionist about mathematical objects?

Most effective melee weapons for arboreal combat? (pre-gunpowder technology)

Why is a lens darker than other ones when applying the same settings?

Mounting TV on a weird wall that has some material between the drywall and stud

I got rid of Mac OSX and replaced it with linux but now I can't change it back to OSX or windows

How does light 'choose' between wave and particle behaviour?

How does TikZ render an arc?

What is the role of と after a noun when it doesn't appear to count or list anything?

Is there any word for a place full of confusion?

One-one communication

Can humans save crash-landed aliens?

Did Mueller's report provide an evidentiary basis for the claim of Russian govt election interference via social media?

getElementsByClassName gets one element when it comes from a php foreach

.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

12219

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

12219

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

12219

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

12219

asked Mar 8 at 23:28

SteffSteff

112

share|improve this question

edited Mar 8 at 23:33

PinkClimbingApple

12219

asked Mar 8 at 23:28

SteffSteff

112

edited Mar 8 at 23:33

PinkClimbingApple

12219

edited Mar 8 at 23:33

PinkClimbingApple

12219

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

12219

answered Mar 8 at 23:48

MickMick

7915

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  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

12219

answered Mar 8 at 23:48

MickMick

7915

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  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

12219

answered Mar 8 at 23:48

MickMick

7915

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  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

12219

answered Mar 8 at 23:48

MickMick

7915

 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

12219

answered Mar 8 at 23:48

MickMick

7915

edited Mar 9 at 19:21

PinkClimbingApple

12219

edited Mar 9 at 19:21

PinkClimbingApple

12219

answered Mar 8 at 23:48

MickMick

7915

answered Mar 8 at 23:48

MickMick

7915