Как вывести переменную из js в html class?

Question

[catyrn]

Есть вот такой вот html код

<div class="container">
<div>
<span class="open">10</span>
</div>
<div>
<span class="close">20</span>
</div>
<div>
<span class="size">30</span>
</div>
<div>
<span class="result"></span>
</div>

</div>

и js

var o_o = document.getElementsByClassName('open').textcontent;
    
     var c_c = document.getElementsByClassName('close').textcontent;

     var s_s = document.getElementsByClassName('size').textcontent;

    
     var res = ( c_c - o_o ) * s_s ;
     document.getElementsByClassName('result').innerHTML = res

не могу вывести результат, при этом, если заменить в html class на id и в js обращаться через getElementById то все работает, но мне нужно именно через class

ссылка на песочницу на всякий клик

Comments

[Дима Долготер]

нейминг переменных - прекрасен

[Ярослав Иванов]

Дима Долготер, О_О а это бы была константа

[Lord_Dantes]

Ярослав Иванов,

let o_o
var 0_0
const O_O

[Ярослав Иванов]

let o_o = new O_o('-_-')

Answer 1

[WapSter]

Comments

[catyrn]

Добавил еще один контейнер с другими данными но тем же классом, и там уже не работает

[WapSter]

catyrn, для твоего понимания уже будет дико сложно учи дальше. А ответ - нужно использовать querySelectorAll получаешь коллекцию элементов со всей странице и обращаешься к нужному элементу как к элементу массива.

[WapSter]

catyrn,

[catyrn]

WapSter, Огромное спасибо

[Дмитрий Беляев]

catyrn, а еще querySelector и querySelectorAll можно делать не только от document, но и от элементов.
То есть можно найти все элементы container и в каждом искать целевые элементы:

document.querySelectorAll('.container').forEach(container => {
  const o_o = container.querySelector('.open').textContent;
  const c_c = container.querySelector('.close').textContent;
  const s_s = container.querySelector('.size').textContent;
   
  container.querySelector('.result').textContent = (Number(c_c) - Number(o_o)) * Number(s_s);
});

Answer 2

[Дмитрий Беляев]

Вас не смутило, что getElementById в единственном числе, а getElementsByClassName - во множественном?
getElementsByClassName возвращает коллекцию элементов, а не один элемент.

Comments

[catyrn]

Я уже видел похожий ответ но так и не понял что конкретно мне исправить то нужно.

[Дмитрий Беляев]

catyrn, из коллекции нужно брать конкретный элемент:

var o_o = document.getElementsByClassName('open')[0].textContent;

[catyrn]

Дмитрий Беляев, не получилось, но теперь хотя бы NaN выдает, но только один раз

[WapSter]

catyrn, NaN получаешь, потому-что пытаешься произвести математические действия над undefined, а undefined получаешь из-за того-что свойства .textcontent нет, есть .textContent