Member 13803719 Ответов: 1

Как я могу иметь разные выходные данные, отображаемые в разных абзацах, используя одну функцию JS? Html/JS

Итак, я пытаюсь сделать так, что у меня есть стрелка (вверх и вниз), когда стрелка вверх нажата, есть переменная, которая подсчитывает, сколько раз мы нажали, и результат виден в абзаце
<p id="count">0</p>

Однако каждый раз, когда я пытаюсь добавить еще один, скажем div с той же стрелкой вверх и вниз (тот же класс) и тем же идентификатором абзаца count когда я нажимаю стрелку вверх на новом div, результат выводится на мой самый первый абзац.

Что я уже пробовал:

var counter=0;
function mycount() {


document.getElementById("count").innerHTML = ++counter;
}

function myminus(){
      document.getElementById("count").innerHTML = --counter;
	  if(counter<0){
	  counter=0
	  document.getElementById("count").innerHTML = 0;
    }

}


У меня есть стрелка вверх с надписью onclick="mycount()" и Стрелка вниз с надписью onclick="myminus()" Я знаю свою проблему которая заключается в следующем getElementById("count") Я хочу иметь возможность добавлять стрелки вверх и вниз с новым абзацем и иметь выход на новый абзац. На самом деле это не кажется эффективным, если я копирую и вставляю свой javascript-код и меняю его. getElementById("putIDhere")

1 Ответов

Рейтинг:
1

F-ES Sitecore

Если у вас есть два div с идентификатором "count", то как вы ожидаете, что document.getElementById("count") будет знать, какой div вы хотите получить? идентификаторы должны быть уникальными на странице. Если вам нужно несколько экземпляров ваших стрелок, то вам понадобится уникальный идентификатор для каждого из них. Самый простой способ, вероятно, состоит в том, чтобы добавить число к идентификатору, так что первый div будет "count0", затем "count1" и т. д. Каждый раз, когда вы добавляете новый экземпляр, увеличивайте его число.

Далее вам нужно изменить js, чтобы принять этот номер

function myminus(id){
      document.getElementById("count" + id).innerHTML = --counter;
	  if(counter<0){
	  counter=0
	  document.getElementById("count" + id).innerHTML = 0;
    }

}


Любой код, вызывающий myminus, должен знать свой собственный идентификатор для передачи в функцию.