Как подсветить ячейку таблицы при клике?

Question

[Gor321]

Здравствуйте! Делаю календарь на чистом js. Хочу по клику на ячейку подсвечивать ее другим цветом, также по клику должен появляться блок с инпутами .

Пишу следующий код для реализации подсветки:

var selectedTd;
	var table=document.getElementById("calendar");;

	table.onclick = function(event) {
	  var target = event.target; // где был клик?

	  if (target.tagName != 'TH') return; // не на TD? тогда не интересует

	  note(target); // подсветить TD
	};

	function note() {
	  if (selectedTd) {
		selectedTd.classList.remove('note');
	  }
	
	  selectedTd.classList.add('note');
	}

Подскажите, что нужно сделать, чтобы все заработало, и как лучше реализовать появляющийся блок при клике?
https://jsfiddle.net/furcifer21/6bac25ms/23/
Заранее большое спасибо!

Answer 1

[Дмитрий]

Подскажите, что нужно сделать, чтобы все заработало

Перенести selectedTd в параметры функции note, иначе получается что вы передаете в функцию ссылку на кликнутый элемент, а обрабатываете в функции неинициированную переменную с глобальную видимостью.

Comments

[Gor321]

Да, действительно. Спасибо огромное.
А как вы считаете, как лучше реализовать появляющийся блок? Создавать его прямо в скрипте или как лучше?

[Дмитрий]

Как угодно, без разницы. Просто сделайте функцию, создающую этот блок, и отдельно функцию, его отображающую. А там решите сразу его создавать и потом просто позиционировать и делать видимым, либо создавать каждый раз при клике. На мой взгляд ни по одному из параметров разницы нет.

[Gor321]

dimoff66, подскажите еще пожалуйста)
я создаю блок, который нужен, при клике он появляется, но у меня не получается его убрать при переключении.

var selectedTd;
	var table=document.getElementById("calendar");;

	table.onclick = function(event) {
	  var target = event.target; // где был клик?

	  if (target.tagName != 'TH') return; // не на TD? тогда не интересует

	  note(target); // подсветить TD
	  addNote__quick(target);
	};

	function note(node) {
	  if (selectedTd) {
		selectedTd.classList.remove('note');
	  }
	   selectedTd = node;
	  selectedTd.classList.add('note');
	}
	// var addNote;
	function addNote__quick(node){
		if (selectedTd) {
			selectedTd.removeChild(addNote);
		  }
		var addNote = document.createElement('form');
		addNote.id = "add-note__quick";
		
		addNote.innerHTML ='<i id="close2">&times;</i>'+
							'<input type="text"  class="field" placeholder="Событие">'+
							'<input type="text"  class="field" placeholder="День, месяц, год">'+
							'<input type="text"  class="field" placeholder="Участники">'+
							'<button type="submit">Создать</button>'
		selectedTd = node;
		selectedTd.appendChild(addNote);
	}

Что не так?

[Дмитрий]

var addNote вне функции зачем закомментировали ?

Получается на момент
selectedTd.removeChild(addNote);

он еще не инициирован, поскольку его область видимости - внутри функции