Level 88
You need to create an eventl istener to make this work. Check this out: https://stackoverflow.com/questions/44194479/about-javascript-onclick-foreach-function
Apr 7, 2020
17
Level 6
onclick in a foreach loop
I have a simple open() function to trigger a hidden div by an id, and display block the content:
function open() {
var x = document.getElementById("open");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
@foreach($users as $user)
<div class="button" onclick="open()">
<h4>+</p>
</div>
<div id="open">
<h4>{{$user->name}}</p>
</div>
@endforeach
Logically this only works for one element (the first) in a foreach loop. How can I make my method more dynamic, so that if I have a collection of e.g. 5 elements - I can open each element separately?
Level 61
Just pass element as a parameter to open function.
Level 61
function open(x) {
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
@foreach($users as $user)
<div class="button" onclick="open(document.getElementById("open"+{{ $user->id }}))">
<h4>+</p>
</div>
<div id="open{{ $user->id }}">
<h4>{{$user->name}}</p>
</div>
@endforeach
Level 6
@bobbybouwmann - Thank you for the link
It works to open the the div:
<script type="application/javascript">
var users = document.querySelectorAll('.open-user')
users.forEach(function(user) {
user.addEventListener('click', function() {
var userId = this.getAttribute('user-id')
var y = document.getElementById('open-' + userId);
document.getElementById('open-' + userId).style.display = 'block'
})
})
</script>
<div user-id="{{$user->id}}" class="button open-user">
<h4>+</p>
</div>
<div id="open-{{$user->id}}" style="display: none;">
<h4>{{$user->name}}</p>
</div>
As I add style="display: none;" manually I can't check if y is open or not - to close the div after another click. Is there a workaround?
Level 6
@bugsysha - Thank you - also tried it, but after I click on the button the screen turns white without any error in the console. What could that be?
Level 88
@splendidkeen The reason your approach before didn't work is that each item has the same id in HTML. An id needs to be unique in your HTML.
Level 6
@bobbybouwmann - Yes, I knew that was the problem, but couldn't find a workaround. Actually stepped over your link before opening the question - but it was a bit unclear then.
Level 61
Probably CSS is playing tricks on you. Or have you fixed quotes?
Level 6
@bugsysha - Fixed quotes, as the button crashed when using only "", I put it this way: onclick="open(document.getElementById('open'+{{ $user->id }}))"
Level 61
Why don't you give AlpineJS a try?
<script src="https://cdn.jsdelivr.net/gh/alpinejs/[email protected]/dist/alpine.min.js" defer></script>
@foreach($users as $user)
<div x-data="{visible: false}">
<button class="button" @click="visible = !visible">
+
</button>
<div x-if="visible"><!-- or x-show -->
<h4>{{$user->name}}</p>
</div>
</div>
@endforeach
Level 6
@bugsysha - Will also have a look into it. Thanks so much.
Level 61
I was hoping to win one best reply against @bobbybouwmann 🤦♂️😭
1 like
Level 6
@bugsysha - sorry, my fault :D
Level 61
No man, you just can't beat him. If you can't beat him, join him is what Bugs Bunny always said :D
Level 6
@bugsysha - together is better :D
Level 88
@bugsysha Sorry buddy ;)
Level 61
@bobbybouwmann no worries, I love a good challenge ;)
Please or to participate in this conversation.