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

Question

我的按钮：

<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 值加一。 我做错了什么吗？

Answer 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>

Answer 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/