Как мне увеличить значение на 1 значение внутри диапазона внутри кнопки

#javascript #jquery #express #ejs

#javascript #jquery #выразить #ejs

Вопрос:

Моя кнопка :

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

Но приведенный выше код ничего не дает. Я хочу, чтобы указанное выше значение диапазона увеличилось на единицу. Я допустил какую-либо ошибку?

1. Вам нужно заменить значение элемента, оно не будет обновляться на месте, я также надеюсь, что вы заметите, что это не изменит то, что хранится на сервере.

2. Для начала, ваш HTML сломан. Всегда сначала проверяйте и исправляйте разметку, прежде чем пытаться отладить код. Помимо этого, можете ли вы предоставить работоспособный пример, демонстрирующий функциональность на стороне клиента? Потому что сама по себе концепция работает нормально .

Ответ №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>

Развернуть фрагмент

1. в кнопке «Нравится» я получаю только понравившийся текст, он не показывает количество лайков. currentElement.children[1].children[0].textContent = «Понравилось»; currentElement.children[1].children[0].children[0].textContent ;

2. Совет…. поместите всю эту информацию в вопрос для начала…

3. Отредактировал его, чтобы обновить текст в кнопке вместе с количеством

Ответ №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/

1.в кнопке «Нравится» я получаю только понравившийся текст, он не показывает количество лайков. currentElement.children[1].children[0].textContent = «Понравилось»; currentElement.children[1].children[0].children[0].textContent ;

2. Я использую приведенные выше строки одну за другой

3. что такое currentElement? @rudrasimha