Javascript不在php循环中打印
php和javascript的新手。我试图在一个php循环中使用javascript打印一个id，但是什么也没有出现。代码如下：
$sql = "SELECT dueDate, assignmentName, className FROM assignments INNER JOIN classes ON assignments.class = classes.id ORDER BY DATE(dueDate)";
if ($result = mysqli_query($link, $sql)) {
if (mysqli_num_rows($result) > 0) {
echo "Assignments";
while ($row = mysqli_fetch_array($result)) {
echo '<div class="popup" id="popup">';
echo '<div class="overlay"></div>';
echo '<div class = "content">' . $row['dueDate'] . $row['className'] . '</div>';
echo '<div class="close-btn content" onclick="togglePopup()">×</div>';
echo '<div class = "btn-group">' . '<button onclick="togglePopup()">' . $row['assignmentName'] . '</button>' . '</div>';
echo '</div>';
echo '<script type=\"text/javascript\"> document.write(printID()); </script>';
}
}回答 1
Stack Overflow用户
发布于 2021-01-10 06:09:16
问题是，您希望PHP知道什么是printID()以及它应该做什么。PHP对JavaScript函数一无所知，因为JavaScript和PHP在完全不同的地方执行。呈现您的HTML并向浏览器发送响应，浏览器将执行JavaScript。当PHP正在处理数据时，JavaScript不会被执行。
你可以做的只有一件事，就是等到所有的东西都被呈现出来，然后在</body>标签之前执行你的JavaScript函数。
document.addEventListener('DOMContentLoaded', (event) => {
const elements = document.querySelectorAll('.popup');
Array.prototype.forEach.call(elements, (element) => {
let id = printID();
element.appendChild(document.createTextNode(id));
});
});上面的代码片段是什么？它等待并将被执行，直到加载完所有的DOM。然后，它搜索具有名为"popup“的css类的所有元素。顺便说一下，在您的代码中还有另一个问题。你正在用一个循环处理你的数据库查询结果，并且你正在使用一个id属性。Id属性在你的标记中应该只被使用一次。所以请使用css类而不是id属性。当使用一个类名"popup“时，你可以读出所有的元素并执行你的javascript函数printID()并追加一个新的元素。就是这样。
你的失败在于，你没有意识到，JavaScript是一种客户端语言，并不是由php执行的，即使它是用html模板编写的。
一种可能更好的方法
正如您所说的，您希望更改togglePopup JavaScript函数中的参数。下面的代码显示了一种可能的孤立化。
<?php
...
$i = 0;
while ($row = mysqli_fetch_array($result)) {
echo '<div class="popup">';
echo '<div class="overlay"></div>';
echo '<div class = "content">' . $row['dueDate'] . $row['className'] . '</div>';
echo '<div class="close-btn content">×</div>';
echo '<div class = "btn-group">' . '<button id="popup-' . $i . '">' . $row['assignmentName'] . '</button>' . '</div>';
echo '</div>';
$i++;
}与放置onclick属性不同，只需省略这一点。而是在按钮元素上放置一个id参数。记住，id参数的值必须是唯一的。您可以使用像data-id="my-value"这样的数据属性，而不是使用id属性。数据属性确保此属性的值不一定是唯一的。只是为了告诉你可能的方法..。
在HTML的末尾，在</body>标记之前放置以下内容。
<script>
const togglePopup = (event) => {
let target = event.target;
let id = target.getAttribute('id');
// do something with the id attribute
}
document.addEventListener('DOMContentLoaded', (event) => {
const elements = document.querySelectorAll('.popup button[id^="popup-"]');
Array.prototype.forEach.call(elements, (element) => {
element.addEventListener('click', togglePopup);
});
});
</script>这个小代码片段为具有.popup类的元素内的每个按钮添加了一个单击事件处理程序，该类具有以popup-开头的id属性。单击此按钮时，将调用togglePopup函数。在此函数中，id属性来自目标元素。
使用此解决方案，您可以保持html标记的整洁，并且所有javascript内容都与php代码分离。
https://stackoverflow.com/questions/65647838
复制相似问题
腾讯云开发者
