按钮图标消失 onclick答案

【问题标题】：Button icon dissapears onclick按钮图标消失 onclick
【发布时间】：2021-11-21 11:51:53
【问题描述】：

我正在使用一个按钮，它在帖子上存储了许多喜欢。代码：

<button id="likebtn" type="button" 
        class="btn btn-sml btn-danger" style="width:70px;">
    <i class="glyphicon glyphicon-thumbs-up"> </i> 
    <?php echo $post_likes; ?>

问题来了，当我单击按钮时 - 喜欢的图标消失了。当我刷新页面时它会出现。代码。

let likebtn = document.querySelector('#likebtn');
likebtn.addEventListener('click', likes_function => {
        //increace likes
        likebtn.value = <?php echo $post_likes?> + 1;
        likebtn.innerHTML = <?php echo $post_likes?> + 1;
                                
        document.getElementById("likebtn").disabled = true;
                        
        document.getElementById("likebtn").style.opacity=0.5;
                                                                                    
         }                                         
 });

我该如何解决这个问题？

感谢您的帮助:)

【问题讨论】：

您必须将<i class="glyphicon glyphicon-thumbs-up"> </i> 添加到likebtn.innerHTML = <?php echo $post_likes?> + 1;。

标签： javascript button

【解决方案1】：

这是因为innerHTML 正在替换按钮内的全部内容，包括图标。您可以将喜欢包装在嵌套元素中，并且只替换其中的内容：

<button id="likebtn" type="button" class="btn btn-sml btn-danger" style="width:70px">
  <i class="glyphicon glyphicon-thumbs-up"></i> 
  <span class="likes"><?php echo $post_likes; ?></span>
</button>

// ....

const likeBtn = document.querySelector('#likebtn');
const likeBtnLabel = likeBtn.querySelector('.likes')

likeBtn.addEventListener('click', () => {
  // Increase likes.
  likeBtn.value = <?php echo $post_likes?> + 1;
  likeBtnLabel.innerText = <?php echo $post_likes?> + 1;
                          
  likeBtn.disabled = true;         
  likeBtn.style.opacity = 0.5;
});

附： likes_function 没有为你的函数命名，而是你将点击函数的第一个参数命名为“likes_function”，这是一个mouse event 对象

还请注意，出于安全原因，我将 innerHTML 更改为 innerText，因为您只需要更改文本而不是 html。

【讨论】：

非常感谢 :)