DOM HTML changing back

Question

我的表单创建了一个帖子请求，该请求首先由JavaScript处理，然后由PHP处理。我的问题是我想在提交时更改图像（按钮），但是当我这样做时，图像会更改为以前的图像。如果我刷新页面，则由于PHP检查，图像将返回我想要的内容。因此，我的猜测是，PHP与更改图像的JavaScript混乱。这是我的代码的简化版本...

<?php
$image = "<input type="submit" style="background-image: url(grey.png);" onclick="like()" value="" />";
while($stmt->fetchColumn()) {
$image = "<input type="submit" style="background-image: url(red.png);" onclick="like()" value="" />";
}
echo "<form id='like' method='POST' action='action.php'><div id='images'>".$image."</div></form>";
?>
<script>
function like() {
    var html = document.getElementById("images").innerHTML;
    document.forms['like'].submit();
    if(document.getElementById("images").innerHTML.indexOf("grey") != -1)
    {
        document.getElementById("images").innerHTML = "<input type="submit" style="background-image: url(red.png);" onclick="like()" value="" />";
    }
   return false;
}
  </script>

我不相信我错过了任何重要的事情或为示例留下任何不变的东西，但是如果您发现任何错误，请告诉我。

谢谢！

编辑：忽略时循环。我知道我没有将其他部分包括在SQL语句中。

Answer 1

这是我测试的代码的轻微重新加工。看起来对我有用：

<?php
$submit_color = "grey.png";
if($_POST['submit']) {
    $submit_color = "red.png";
}
echo "<form id='like' method='POST' action=''>
<div id='images'>
<input name='submit' type='submit' style='background-image: url($submit_color);' onclick='like()' value='submit' />
</div>
</form>";
?>
<script>
function like() {
    var html = document.getElementById("images").innerHTML;
    document.forms['like'].submit();
    if(document.getElementById("images").innerHTML.indexOf("grey") != -1)
    {
        document.getElementById("images").innerHTML = "<input name='submit' type='submit' style='background-image: url(red.png);' onclick='like()' value='submit' />";
    }
   return false;
}
  </script>