getElementsByClassName gets one element when it comes from a php foreachPHP: 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?
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;
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
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
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
edited Mar 8 at 23:33
PinkClimbingApple
10818
asked Mar 8 at 23:28
SteffSteff
112
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 ; ?><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 ; ?>javascript php
javascript php
edited Mar 8 at 23:33
PinkClimbingApple
10818
asked Mar 8 at 23:28
SteffSteff
112
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
edited Mar 8 at 23:33
PinkClimbingApple
10818
10818
asked Mar 8 at 23:28
SteffSteff
112
asked Mar 8 at 23:28
SteffSteff
112
asked Mar 8 at 23:28
SteffSteff
112
112
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
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";
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 usingthisto 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
);
);
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
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
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
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";
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 usingthisto 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";
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 usingthisto 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";
edited Mar 9 at 19:21
PinkClimbingApple
10818
answered Mar 8 at 23:48
MickMick
8715
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";
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
edited Mar 9 at 19:21
PinkClimbingApple
10818
10818
answered Mar 8 at 23:48
MickMick
8715
answered Mar 8 at 23:48
MickMick
8715
answered Mar 8 at 23:48
MickMick
8715
8715
This would be the easiest approach. You could significantly shorten this code by usingthisto 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 |
This would be the easiest approach. You could significantly shorten this code by usingthisto 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
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
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
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
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 |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
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
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
Required, but never shown
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
Required, but never shown
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
Required, but never shown
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
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
