我如何在按钮内的 span 内将值增加 1 个值答案

【问题标题】：How do i increase value by 1 value inside span inside button我如何在按钮内的 span 内将值增加 1 个值
【发布时间】：2021-03-31 11:11:27
【问题描述】：

我的按钮：

<button class="btn btn-success btn-sm mr-1 mark-complete-btn " id="<%=photo.id %>">
  Like <span id="likes-count-<%=photo.id %>"><%= photo.likes_count %></button>

我正在使用：document.getElementById('likes-count-' + currentElement).textContent++;

但是上面的代码什么也没给出。我想将上面的 span 值加一。我做错了吗？

【问题讨论】：

你需要替换元素的值，它不会原地更新我也希望你注意它不会改变服务器上存储的内容。
对于初学者，您的 HTML 已损坏。在尝试调试代码之前，请始终先验证并修复标记。除此之外，您能否提供一个可运行的示例来演示客户端功能？因为这个概念本身就是works fine。

标签： javascript jquery express ejs

【解决方案1】：

您需要更新元素的文本。您还试图增加一个字符串，而不是一个数字。第三，这不会更新您服务器上的值，因此希望您正在制作某种 Ajax/Fetch 调用来更新后端。

function updateServer(id) {
  /*
  const data = {
    liked: id
  };
  fetch('https://example.com/profile', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(data),
    })
    .then(response => response.json())
    .then(data => {
      console.log('Success:', data);
    })
    .catch((error) => {
      console.error('Error:', error);
    });
  */
}


document.querySelectorAll('.mark-complete-btn').forEach(function(btn) {
  function update() {
    var span = btn.querySelector("span");
    var cnt = Number(span.textContent) + 1;
    span.textContent = cnt;
    updateServer(btn.id);
    btn.childNodes[0].nodeValue = "Liked ";
    btn.removeEventListener("click", update);
  }

  btn.addEventListener("click", update);
});

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet" />

<button class="btn btn-success btn-sm mr-1 mark-complete-btn" id="photo1">
  Like <span id="likes-count-photo1>">1</span></button>


<button class="btn btn-success btn-sm mr-1 mark-complete-btn" id="photo2">
  Like <span id="likes-count-photo2>">3</span></button>

【讨论】：

在点赞按钮中，我只得到点赞文本，它没有显示点赞数。 currentElement.children[1].children[0].textContent = "喜欢"; currentElement.children[1].children[0].children[0].textContent++;
忠告......将所有这些信息放在问题中开始......
编辑它以更新按钮中的文本以及计数

【解决方案2】：

我认为您正在寻找这样的东西：

(function(window) {
    all_btns = document.getElementsByTagName("button");
    for(i=0; i< all_btns.length; i++){
        btn = all_btns[i];
        btn.onclick = function(){
            this.childNodes[1].textContent++;
        }
    }
})(this);

<button id="123">
  Like <span id="likes-count">8</span>
</button>

https://jsfiddle.net/yo687rvx/1/

【讨论】：

在点赞按钮中，我只得到点赞文本，它没有显示点赞数。 currentElement.children[1].children[0].textContent = "喜欢"; currentElement.children[1].children[0].children[0].textContent++;
我在上面一行一行的使用
什么是currentElement？ @rudrasimha