Пытаюсь добавить два числа, но они заключены в теги span

#javascript

Вопрос:

Я пытаюсь сложить два числа вместе, но они динамически генерируются на моей странице и заключаются в теги. Кто-нибудь может сказать мне, как я мог бы добавить эти числа?

Это будет примером двух динамически генерируемых чисел:

Теги id ТАКЖЕ генерируются динамически.

 <span id="thmr_35" class="thmr_call"> 42</span>
<span id="thmr_42" class="thmr_call"> 11</span>

Мне нужно добавить два числа 42 11, а затем выплюнуть:
Итого = 53

Спасибо за любую помощь!

1. Всегда ли идентификатор одинаков и / или класс используется только для добавления этих чисел?

2. В чем конкретно ваша проблема? Как получить ссылку на элементы? Как получить их текстовое содержимое? Как преобразовать текст в числа? Как выполнить добавление в JavaScript?

3. Каков ваш код javascript?

4. Я думаю, мне нужно как-то сократить эти строки, чтобы я мог просто получить доступ к числам внутри них, а затем добавить их.

Ответ №1:

Вы можете получить доступ к span элементам с getElementById помощью, и использовать innerHTML свойство, чтобы получить их содержимое. Затем вы можете использовать parseInt для преобразования этих строк в числа и сложения их вместе:

 var num1 = document.getElementById("thmr_35").innerHTML,
    num2 = document.getElementById("thmr_42").innerHTML,
    added = parseInt(num1, 10)   parseInt(num2, 10);

Вот рабочий пример приведенного выше.

1. Эй, Джеймс, это было быстро, спасибо! Я забыл упомянуть, что значение id также генерируется динамически. Итак, я никогда не могу быть уверен, каким будет этот идентификационный номер.

2. @Adam Пожалуйста, покажите нам свой код в качестве примера. Возможно, вы можете получить доступ к их родительскому элементу и выполнить итерацию по дочерним элементам в цикле или выбрать их другим способом.

3. Как тогда вы генерируете эти элементы? На стороне сервера? Клиентская сторона на основе ответа AJAX?

4. Код генерируется на стороне сервера с помощью PHP, извлеченного из базы данных.

5. вы можете использовать getElementsByTagName(‘span’) и получить доступ к каждому тегу span по его индексу.

Ответ №2:

Если идентификатор генерируется динамически, как вы говорите, вы можете получить доступ к элементам через имя класса.

 var elems = document.getElementsByClassName('thmr_call');
var sum = 0;
for (var i = 0;i < elems.length; i  ) {
  sum  = parseInt(elems[i].innerHTML, 10);
}
alert(sum);

http://jsfiddle.net/K3A9K/7/

Если также имя класса генерируется динамически, вы можете получить элементы по имени тега. getElementsByTagName
http://jsfiddle.net/K3A9K/8 /