Javascript-форум - Несколько счетчиков с разными значениями

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Несколько счетчиков с разными значениями (https://javascript.ru/forum/misc/81427-neskolko-schetchikov-s-raznymi-znacheniyami.html)

Несколько счетчиков с разными значениями

Есть несколько вот таких блоков

<div class="col-md-12">
     <div class="card" id="count_one">
          <input type="hidden" id="speed" value="0.0000397938144330" />
          <div class="card-body">
               <div class="media align-items-center">
                    <input type="hidden" id="float" value="10.000067981099106">
                    <div class="media-body">
                         <span  id="Count">10.00009856</span>
                         <span id="Price">0.50</span>
                         <span id="Cash">5.00006288</span>
                    </div>
               </div>
		   	   </div>
     </div>
</div>

<div class="col-md-12">
     <div class="card" id="count_two">
          <input type="hidden" id="speed" value="0.0000000020431799" />
          <div class="card-body">
               <div class="media align-items-center">
                    <input type="hidden" id="float" value="100.00004564566">
                    <div class="media-body">
                         <span  id="Count">100.00009856</span>
                         <span id="Price">10.50</span>
                         <span id="Cash">1050.0004567456</span>
                    </div>
               </div>
		   	   </div>
     </div>
</div>

<div class="col-md-12">
     <div class="card" id="count_three">
          <input type="hidden" id="speed" value="0.0000000159790278" />
          <div class="card-body">
               <div class="media align-items-center">
                    <input type="hidden" id="float" value="1.000456546546">
                    <div class="media-body">
                         <span  id="Count">1.000345345</span>
                         <span id="Price">0.70</span>
                         <span id="Cash">0.700345345</span>
                    </div>
               </div>
		   	   </div>
     </div>
</div>

И так далее 10 блоков и более
как заставить их работать все, работает только первый блок

$(document).ready(function () {
    var renderPrice, renderCount, RenderSum,renderSpeed

    renderPrice = $('#Price');
    renderSpeed = $('#speed').val();
    renderCount = $('#Count');
	test = $('#float');
    RenderSum = $('#Cash');




        setInterval(function () {


				test.val(parseFloat(renderSpeed / 600) + parseFloat(test.val()))
                renderCount.text(parseFloat(test.val()).toFixed(8))
                RenderSum.text(parseFloat(parseFloat(renderCount.text()) * parseFloat(renderPrice.text())).toFixed(8))


        } , 100)

});

madam,
выкинуть все id из кода, заменить на class, и сделать цикл по блокам.

Начнем с того, что id должен быть уникальным. Нельзя назначать одинаковый id разным элементам.
Можно использовать классы (фиктивно, только для того, что бы иметь возможность найти этот элемент) или атрибуты data-

<div class="col-md-12">
     <div class="card" id="count_one">
          <input type="hidden" class="idspeed" value="0.0000397938144330" />
          <div class="card-body">
               <div class="media align-items-center">
                    <input type="hidden" class="idfloat" value="10.000067981099106">
                    <div class="media-body">
                         <span  data-Count>10.00009856</span>
                         <span data-Price>0.50</span>
                         <span data-Cash>5.00006288</span>
                    </div>
               </div>
               </div>
     </div>
</div>

<div class="col-md-12">
     <div class="card" id="count_two">
          <input type="hidden" class="idspeed" value="0.0000000020431799" />
          <div class="card-body">
               <div class="media align-items-center">
                    <input type="hidden" id="float" value="100.00004564566">
                    <div class="media-body">
                         <span  data-Count>100.00009856</span>
                         <span data-Price>10.50</span>
                         <span data-Cash>1050.0004567456</span>
                    </div>
               </div>
               </div>
     </div>
</div>

Ну и скрипт тогда как то так будет

$(document).ready(function () {
	let cards = document.querySelectorAll('.card')
	
		setInterval(function () {
			cards.forEach (card => {
				
				const renderPrice = card.querySelector('[data-Price]');
				const renderSpeed = card.querySelector('.idspeed').value;
				const renderCount = card.querySelector('[data-Count]');
				const test = card.querySelector('[data-float]');
				const RenderSum = card.querySelector('[data-Cash]');
 
				test.vaue = parseFloat(renderSpeed / 600) + parseFloat(test.value)
				renderCount.textContent = parseFloat(test.value).toFixed(8)
				RenderSum.textContent = parseFloat(parseFloat(renderCount.textContent) * parseFloat(renderPrice.textContent)).toFixed(8)
			})
 
        } , 100)
 
});

card.querySelector('.idspeed').val(); - а в уме было другое? :)

Цитата:

Сообщение от laimas

card.querySelector('.idspeed').val(); - а в уме было другое?

Да.
Не всегда корректно пробираюсь в мешанине jquery и ванили.

Uncaught TypeError: Cannot read property 'value' of null
const renderSpeed = card.querySelector('.idspeed').value;

at NodeList.forEach (<anonymous>)

id="float" заменить на class="idfloat", в строке 13 ошибка, должно быть test.value, а не test.vaue.

<div class="col-md-12">
     <div class="card" id="count_one">
          <input type="hidden" class="idspeed" value="0.0000397938144330" />
          <div class="card-body">
               <div class="media align-items-center">
                    <input type="hidden" class="idfloat" value="10.000067981099106">
                    <div class="media-body">
                         <span  data-Count>10.00009856</span>
                         <span data-Price>0.50</span>
                         <span data-Cash>5.00006288</span>
                    </div>
               </div>
               </div>
     </div>
</div>
<div class="col-md-12">
     <div class="card" id="count_two">
          <input type="hidden" class="idspeed" value="0.0000000020431799" />
          <div class="card-body">
               <div class="media align-items-center">
                    <input type="hidden" class="idfloat" value="100.00004564566">
                    <div class="media-body">
                         <span  data-Count>100.00009856</span>
                         <span data-Price>10.50</span>
                         <span data-Cash>1050.0004567456</span>
                    </div>
               </div>
               </div>
     </div>
</div>

$(document).ready(function () {
	let cards = document.querySelectorAll('.card')

		setInterval(function () {
			cards.forEach (card => {

				const renderSpeed = card.querySelector('.idspeed').value;
				const renderPrice = card.querySelector('[data-Price]');
				const renderCount = card.querySelector('[data-Count]');
				const test = card.querySelector('.idfloat');
				const RenderSum = card.querySelector('[data-Cash]');

				test.value = parseFloat(renderSpeed / 600) + parseFloat(test.value)
				renderCount.textContent = parseFloat(test.value).toFixed(8)
				RenderSum.textContent = parseFloat(parseFloat(renderCount.textContent) * parseFloat(renderPrice.textContent)).toFixed(8)
			})

        } , 100)

});

Все вроде работает правильно ,но куча ошибок

Uncaught TypeError: Cannot read property 'value' of null
at const renderSpeed = card.querySelector('.idspeed').value;

at NodeList.forEach (<anonymous>)
at cards.forEach (card => {

const renderSpeed = card.querySelector('.idspeed').value;

<html>
<body>
<div class="col-md-12">
     <div class="card" id="count_one">
          <input type="hidden" class="speed" value="0.0000397938144330" />
          <div class="card-body">
               <div class="media align-items-center">
                    <input type="hidden" class="accret" value="10.000067981099106">
                    <div class="media-body">
                         <span class="count">10.00009856</span>
                         <span class="price">0.50</span>
                         <span class="cashe">5.00006288</span>
                    </div>
               </div>
               </div>
     </div>
</div>

<div class="col-md-12">
     <div class="card" id="count_two">
          <input type="hidden" class="speed" value="0.0000000020431799" />
          <div class="card-body">
               <div class="media align-items-center">
                    <input type="hidden" class="accret" value="100.00004564566">
                    <div class="media-body">
                         <span class="count">100.00009856</span>
                         <span class="price">10.50</span>
                         <span class="cashe">1050.0004567456</span>
                    </div>
               </div>
               </div>
     </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', _=> {
	let cards = document.querySelectorAll('.card')
		setInterval( _=> {
			cards.forEach (card => {
				let speed = card.querySelector('.speed').value,
                    accret = card.querySelector('.accret'),
				    count = card.querySelector('.count'),
				    price = card.querySelector('.price');

				accret.value = count.textContent = (speed / 600 + parseFloat(accret.value)).toFixed(12)
				card.querySelector('.cashe').textContent = (count.textContent * price.textContent).toFixed(12)
			})
        }, 100)
});
</script>
</body>
</html>

Переписано только лишь потому, чтобы во время "писания" увидеть ошибку. Убраны лишние parseFloat и accret.value = count.textContent = ... чтобы не писать дважды фактически одно и тоже. Округление до 12, чтобы видно что все Ок.