Не работает event.target.id !== 'id'. В чем ошибка?

Question

[hulq]

Привет всем! Хочу создать видео-виджет, и вроде бы все хорошо, но:
Я хочу заставить виджет закрыться, при нажатии за его пределами. Для этого я пытаюсь использовать event.target.id !== 'id', но почему-то не выходит. Что я делаю не так?

<div class="video-widget" id="targ-vw">
	<a href="javascript:;" id="close">X</a>
	<video autoplay="" loop="" preload="" muted="true" height="auto" id="targ-vw">
		<source src="assets/templates/video.mp4"></source>
		<source src="assets/templates/video.webm"></source>
	</video>
</div>

.video-widget {
		position: fixed;
		display: flex;
		justify-content: center;
		left: 30px;
		bottom: 30px;
		width: 150px;
		height: 250px;
		border: 3px solid #fff;
		-webkit-border-radius: 15px;
		-moz-border-radius: 15px;
		border-radius: 15px;
		overflow: hidden;
		z-index: 9999999999;
		-webkit-transition: 1s ease-in-out;
		-moz-transition: 1s ease-in-out;
		-ms-transition: 1s ease-in-out;
		-o-transition: 1s ease-in-out;
		transition: 1s ease-in-out;
	}
	.vw-active {
		width: 200px!important;
		height: 350px!important;
		-webkit-transition: 1s ease-in-out!important;
		-moz-transition: 1s ease-in-out!important;
		-ms-transition: 1s ease-in-out!important;
		-o-transition: 1s ease-in-out!important;
		transition:1s ease-in-out!important;
	}
	
	
	.active-vw-close {
		left: 225px!important;
		-webkit-transition: 1s ease-in-out;
		-moz-transition: 1s ease-in-out;
		-ms-transition: 1s ease-in-out;
		-o-transition: 1s ease-in-out;
		transition:1s ease-in-out;
	}
	
	#close {
		position: relative;
		left: 160px;
		-webkit-transition: 1s ease-in-out;
		-moz-transition: 1s ease-in-out;
		-ms-transition: 1s ease-in-out;
		-o-transition: 1s ease-in-out;
		transition:1s ease-in-out;
	}

let close = document.getElementById('close');
	let vw = document.getElementsByClassName('video-widget')[0];
	let clicks = 0;
	
	document.onclick = function () {
		if (event.target.id === 'targ-vw') {
			vw.classList.add('vw-active');
			close.classList.add('active-vw-close');
			clicks++;
			if (event.target.id !== 'targ-vw') {
				clicks++;
			};
			console.log(clicks);
		};
		if (clicks === 2) {
			vw.classList.remove('vw-active');
			close.classList.remove('active-vw-close');
			clicks = 0;
		};
	};
	
	close.addEventListener('click', function () {vw.style.display = "none"});

Comments

[WbICHA]

{
    if (event.target.id === 'targ-vw') {
      // ...
      if (event.target.id !== 'targ-vw') {
        clicks++;
      };
      // ...
    };

Тебя здесь ничего не смущает?

[Сергей]

У тебя проверка, что event.target.id !== 'targ-vw', внутри блока с условием, что event.target.id === 'targ-vw', поэтому она никогда не произойдёт.
P.S. После закрывающих фигурных скобок блока if не надо ставить ;.

[hulq]

Сергей, Большое спасибо!

Answer 1

[ParaBellum577]

Вынеси

if (event.target.id !== 'targ-vw') {
        clicks++;
      };

Вот этот иф из первого

Comments

[Ankhena]

или else

[hulq]

Большое спасибо!