Обратный отчет таймер

[FotGOD]

Всем привет. Подскажите в чем проблема, где ошибки. Код не хочет работать.

<div class="container">
	<h2>Home Work 2</h2>
	<div class="box hide"></div>
	<div id="showtime">00:00</div>
    <button id="start" class="btn btn-primary">START</button>
    <br>
    <br>
    <form name="form">
    <div>
           Day: <input id='day_id'>
    </div>
    <div>
           hours: <input id='hour_id'>
    </div>
    <div>
           minutes: <input id='minute_id'>
    </div>
   

</form>

</div>

function  timer(){
        let day= getElementById('day_id').value;
        let hour=getElementById('hour_id').value;
        let  minute=getElementById('minute_id').value;
        let second=59;
      const now = new Date()
          , newTime = new Date(now.getFullYear()+ 1, 0, 1)
          ,  diff = newTime.getTime() - now.getTime()
          , days = day
          , hours = hour
          , minutes = minute
          , seconds = 59 - now.getSeconds()
      ;

      let st = '';
      if(diff <= 0) {
          st  = window.open("http://google.com");
       } else {
        st=`${days} days, ${hours} hours,${minutes}minutes,${seconds}seconds`;
      }
document.getElementById('start').addEventListener('click', timer);

      document.getElementById("showtime").innerHTML = st;
      setTimeout(timer, 1000);
  }
  timer();

[j0hnik]

метод getElementById вызывайте у document

document.getElementById()

если вызывать его как вы, интерпретатор будет пытаться его найти в window, а там такого метода нет

[FotGOD]

document.getElementById()

Не обратил внимание, благодарю. но все равно, при вводе значений, и нажатие кнопки старт - ничего не происходит.

[j0hnik]

FotGOD,
так вы сразу функцию вызываете, вот он и тикает сразу

<div class="container">
		<h2>Home Work 2</h2>
		<div class="box hide"></div>
		<div id="showtime">00:00</div>
		<button id="start" class="btn btn-primary">START</button>
		<br>
		<br>

		<form name="form">
			<div>
				Day: <input id='day_id'>
			</div>
			<div>
				hours: <input id='hour_id'>
			</div>
			<div>
				minutes: <input id='minute_id'>
			</div>
		</form>

	</div>


	<script>

		function  timer(){
			let day= document.getElementById('day_id').value;
			let hour = document.getElementById('hour_id').value;
			let  minute = document.getElementById('minute_id').value;
			let second = 59;
			const now = new Date()
			, newTime = new Date(now.getFullYear()+ 1, 0, 1)
			,  diff = newTime.getTime() - now.getTime()
			, days = day
			, hours = hour
			, minutes = minute
			, seconds = 59 - now.getSeconds()
			;

			let st = '';
			if(diff <= 0) {
				st  = window.open("http://google.com");
			} else {
				st=`${days} days, ${hours} hours,${minutes}minutes,${seconds}seconds`;
			}
			document.getElementById('start').addEventListener('click', timer);

			document.getElementById("showtime").innerHTML = st;
			setTimeout(timer, 1000);
		}
		timer();


	</script>

[FotGOD]

так вы сразу функцию вызываете, вот он и тикает сразу



<script>

function timer(){
let day= document.getElementById('day_id').value;
let hour = document.getElementById('hour_id').value;
let minute = document.getElementById('minute_id').value;
let second = 59;
const now = new Date()
, newTime = new Date(now.getFullYear()+ 1, 0, 1)
, diff = newTime.getTime() - now.getTime()
, days = day
, hours = hour
, minutes = minute
, seconds = 59 - now.getSeconds()
;

let st = '';
if(diff <= 0) {
st = window.open("http://google.com");
} else {
st=`${days} days, ${hours} hours,${minutes}minutes,${seconds}seconds`;
}
document.getElementById('start').addEventListener( 'click', timer);

document.getElementById("showtime").innerHTML = st;
setTimeout(timer, 1000);
}
timer();


</script>[/html]

вынес

document.getElementById('start').addEventListener('click', timer);

это из функции и заработала кнопка. А почему не уменьшаются минуты, когда секунда доходит до нуля?

[j0hnik]

<input type="number" id="day">Дней<br>
	<input type="number" id="hour">Часов<br>
	<input type="number" id="min">Минут<br>
	<button id="st">start</button>
	<div id="time"></div>
	<script>

		var end;
		function timer(){
			var now = new Date(),
			ost = new Date(end - now),
			s = Math.floor(ost/1000),
			m = Math.floor(s/60),
			h = Math.floor(m/60),
			d = Math.floor(h/24);
			s = s%60+'';
			m = m%60+'';
			h = h%24+'';
			d = d+'';
			if(ost>0){
				setTimeout(timer, 1000);
				time.textContent = `${d}-дней ${h}-часов ${m}-минут ${s}-секунд`;
			}
			else window.open("http://google.com");
		}
		st.onclick = e =>{
			end = Date.now() + ( day.value*86400000 ) + ( hour.value*3600000) + ( min.value* 60000);
			timer();
		};

	</script>

[FotGOD]

<input type="number" id="day">Дней<br>
	<input type="number" id="hour">Часов<br>
	<input type="number" id="min">Минут<br>
	<button id="st">start</button>
	<div id="time"></div>
	<script>

		var end;
		function timer(){
			var now = new Date(),
			ost = new Date(end - now),
			s = Math.floor(ost/1000),
			m = Math.floor(s/60),
			h = Math.floor(m/60),
			d = Math.floor(h/24);
			s = s%60+'';
			m = m%60+'';
			h = h%24+'';
			d = d+'';
			if(ost>0){
				setTimeout(timer, 1000);
				time.textContent = `${d}-дней ${h}-часов ${m}-минут ${s}-секунд`;
			}
			else window.open("http://google.com");
		}
		st.onclick = e =>{
			end = Date.now() + ( day.value*86400000 ) + ( hour.value*3600000) + ( min.value* 60000);
			timer();
		};

	</script>

Благодарю. Я пытался написать еще в условии так
If(seconds==0){minutes--; } и так для всех переменных, но не сработало. Не подскажите почему?

[j0hnik]

Благодарю. Я пытался написать еще в условии так
If(seconds==0){minutes--; } и так для всех переменных, но не сработало. Не подскажите почему?

if в нижнем регистре должен быть

[FotGOD]

if в нижнем регистре должен быть

Я его в нижнем и писал. Просто телефон здесь сейчас в сообщении исправляет заглавные буквы. Даже в нижнем регистре код не хотел работать

[j0hnik]

FotGOD,
сделайте минимальный макет