javascript - Is it possible to have a modal button inside a foreach loop?
Get the solution ↓↓↓I have a modal button inside a foreach loop with rows from a database, but i am only able to press the first button because it has the same value for each loop. I have been trying to use an increasing ID value$i=0, $i++
but i can't get it to work.
foreach($pdo->query("SELECT * FROM operation, OPuppgift where skift='natt' and klar='0' and operation.NR=OPuppgift.NR") as $row){
$i++;
echo "<tr>";
echo "<td>".$row['NR']."</td>";
echo "<td>".$row['kort_Uppgift']."
</br>
<button id=".$i." class='myBtn'>?</button>
<div id=".$i." class='modal'>
<div class='modal-content'>
<span class='close'>×</span>
<p>".$row['uppgift']."</p>
<script type='text/javascript' src='modalJ.js'></script>
</div>
</div>
</td>";
var modal = document.getElementById("1");
var btn = document.getElementById("1");
var span = document.getElementsByClassName('close')[0];
btn.onclick = function () {
modal.style.display = 'block';
};
span.onclick = function () {
modal.style.display = 'none';
};
window.onclick = function (event) {
if (event.target === modal) {
modal.style.display = 'none';
}
};
Answer
Solution:
Don't use the same ID for multiple objects. Your divs and buttons have the same ID, and are also not quoted.
Change this:
</br>
<button id=".$i." class='myBtn'>?</button>
<div id=".$i." class='modal'>
to this or something similar:
</br>
<button id='button".$i."' class='myBtn'>?</button>
<div id='div".$i."' class='modal'>
Notice, I am prepending the ID number with a descriptor to differentiate between the buttons and the divs, and then using the same incrementing variable to ensure each pair gets the same number after the descriptor (eg: div1 goes with button1, etc).
You are also not enclosing the ID's in quotes. I enclose them in single quotes in my example revision above. The change will generate HTML output like this.
</br>
<button id='button1' class='myBtn'>?</button>
<div id='div1' class='modal'>
...
</br>
<button id='button2' class='myBtn'>?</button>
<div id='div2' class='modal'>
In your Javascript code, (thanks @kerbholz), change the IDs to match. I would do it programmatically (you're using a static value in your code), but, the end result should be prepending your designator like this (but via code that uses the correct number).
var modal = document.getElementById("div1");
var btn = document.getElementById("button1");
You're not passing the id number to your script though. You can use "this" or pass values, or other methods, so, your button controls the correct two elements.
Share solution ↓
Additional Information:
Link To Answer People are also looking for solutions of the problem: call to a member function getclientoriginalname() on null
Didn't find the answer?
Our community is visited by hundreds of web development professionals every day. Ask your question and get a quick answer for free.
Similar questions
Find the answer in similar questions on our website.
Write quick answer
Do you know the answer to this question? Write a quick response to it. With your help, we will make our community stronger.