Как поместить несколько значений в innerHTML тега в JavaScript? - PullRequest
Новая
       67

Как поместить несколько значений в innerHTML тега в JavaScript?

0 голосов
/ 22 сентября 2019

В коде сначала я получаю значения полей ввода.Это работает, но когда я пытаюсь добавить значения дней, минут, секунд в тег обратного отсчета, он добавляется только один раз, в то время как цикл foreach создает два тега обратного отсчета.

Я пытался поместить значение в цикл 

var chek=  document.getElementsByClassName('countdown')[i].innerHTML = days +':' + hours +':'+minutes+':' + seconds ;

HTML-код 

<div id="mydiv">
@foreach($auction as $auctions)
@php
$time= Carbon::createFromFormat('H:i:s',Carbon::now('Asia/Karachi')->toTimeString())->diff(Carbon::createFromFormat('H:i:s',$auctions->duration))->format('%H:%I:%S');
    list($h, $m, $s) = explode(':', $time);
    $countdown=($h * 3600) + ($m * 60) + $s;
@endphp
<input class="seconds" type="text" value="{{$countdown}}">
<span class="countdown"></span>
@endforeach
</div>

код JavaScript 

<script>
var i=0;

for(i=0;i<document.getElementById("mydiv").getElementsByClassName("seconds").length;i++)

{
     var current_level= document.getElementById("mydiv").getElementsByClassName("seconds")[i].value;


     console.log(current_level);


     function timer() {

        var days = Math.floor(current_level/86400);
        var remainingDays = current_level - (days * 86400);



        var hours = Math.floor(remainingDays/3600);
        var remainingHours = remainingDays - (hours * 3600);



        var minutes = Math.floor(remainingHours/60);
        var remainingMinutes = remainingHours - (minutes * 60);


        var seconds = remainingMinutes;

      var chek=  document.getElementsByClassName('countdown')[0].innerHTML = days +':' + hours +':'+minutes+':' + seconds ;

 console.log(chek);

        if(days>=1 || hours>=1 || minutes>=1  || seconds>=1){

        current_level--;
        }
     }
    }
     var countdownTimer = setInterval(timer, 1000);

</script>

Поскольку код отображает два поля ввода, он также должен отображать два обратного отсчета.

...