Can't get my Javascript function to run more than once in a PHP foreach loop

Question

I am trying to build a simple 'blog' that myself or a moderator can remove by calling a delete function. However, I only want the delete button to show for administrators. I created a function to validate the user, that is working fine. However, I am not familiar enough with Javascript to know whether to use window.onload or onopen or onchange, or how to attach the function to my Foreach loop to run for each blog post I have. When I have 10 blog posts, it only shows for the first (or last) post.

I have tried adding the "onload / onopen / onchange" commands to the body, to the foreach loop, and to my tags to see if it responds differently.

<script>
    function ShowDelete()
{
    var x = document.getElementById("Delete");
        if (userid === "1") {
            x.style.display="block";
    }
    else {
        x.style.display="none";
    }
}
window.onload = ShowDelete;
</script>

<?php foreach ($entries as $entry) : ?>
  <?php if ($userid == 1) { ?>
<input type="submit" id="btnDelete" value="Delete Post" />
<?php } ?>
<?php endforeach; ?>

Ok Thank you all so much for the responses, I simply input the decision statement inside the loop to determine whether to show or skip. Thanks a ton!!!

Elements need to have unique ID attributes also userid in your JS looks like it is undefined? — Second2None
– Second2None, Commented Apr 27, 2019 at 3:00
Add a class for your <input/> elements that is determined by your userid to modify the style — Miroslav Glamuzina
– Miroslav Glamuzina, Commented Apr 27, 2019 at 4:46

Shanks D Shiva · Accepted Answer · 2019-04-27 05:14:29Z

1

You are creating an HTML input and then hiding it. Best practice is not to create the element in the first place based on your userid.

<?php foreach ($entries as $entry) : ?>
    /* Check for userid here and create delete element if condition is met */
<?php endforeach; ?>

answered Apr 27, 2019 at 5:14

Shanks D Shiva

1971 silver badge3 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Miroslav Glamuzina · Accepted Answer · 2019-04-27 05:07:03Z

0

No need to call a function multiple times to set the style. In your onload event, capture all of the <input/> elements by class name and set your display style. Note that the id attribute must be unique, so the class attribute should be used instead of id.

const userid = "0";
window.addEventListener('DOMContentLoaded', () => {
  let inputs = document.getElementsByClassName("Delete");
  Array.from(inputs).forEach(input => {
    input.style.display = userid === "1" ? "block" : "none";
  });
});

<input type="submit" class="Delete" value="Delete Post" />
<input type="submit" class="Delete" value="Delete Post" />
<input type="submit" class="Delete" value="Delete Post" />

It may also be of benefit to take a look at this post regarding load listeners.

edited Apr 27, 2019 at 5:07

answered Apr 27, 2019 at 4:57

Miroslav Glamuzina

4,5872 gold badges23 silver badges33 bronze badges

Collectives™ on Stack Overflow

Can't get my Javascript function to run more than once in a PHP foreach loop

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related