Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 25.04.2020, 14:31
Аспирант
Отправить личное сообщение для Vahan60 Посмотреть профиль Найти все сообщения от Vahan60
 
Регистрация: 20.04.2020
Сообщений: 46

В одном месте кода работает, в другом глючит.
Доброго времени суток.

Такая проблема.

В фрагменте "создаём диалоговое окно" (строки 57-71) кода обращение к элементу массива (allProperty[i][0]) работает корректно. Ячейки unitOkno закрашиваются правильно.

А в фрагменте "клик по unitOkno" (строки 75-85) такое же allProperty[i][1] выдает не одно значение, а все значения, с allProperty[0][1] по allProperty[6][1].

Отчего такие глюки?

// кнопка Fullscreen

let btn = document.getElementById ("btn");    
let bd = document.querySelector ("body") 
 
     btn.addEventListener ("click", function (event) {
       bd.requestFullscreen();
       let target = event.target;
       target.style.display = "none";
          });

// создаём таблицу 

let elem = document.querySelector ("#elem");
createTable (elem, 7, 1);

function createTable(parent, cols, rows) {
	let table = document.createElement("table");
	
	for (let i = 0; i < rows; i++ ){
		let tr = document.createElement ("tr");
		
		for (let j = 0; j < cols; j++){
			let th = document.createElement("th");
			tr.appendChild(th);
		};
		table.appendChild(tr);
	};
	parent.appendChild(table);
	
};



// закрашиваем ячейки таблицы

const allProperty = [
    ["#dc143c", "Crimson", "#ff0000", "Red", "#ffc0cb", "Pink"],
	["#ffa500", "Orange", "#ffd700", "Gold", "#ffff00", "Yellow"],
	["#008000", "Green", "#0bda51", "Malachite", "#00ff00", "Lime"],
    ["#000080", "Navy", "#0000ff", "Blue", "#79d8ff", "Cyan"],
	["#5a005a", "Purple", "#ff00ff", "Magenta", "#d2a8d4", "Violet"],
	["#800000", "Maroon", "#964b00", "Brown", "#cc7722", "Ochre"],
	["#010101", "Black", "#ada8a5", "Gray", "#ffffff", "White"]
	];

let unit = document.querySelectorAll ("th");
for (let i = 0; i < allProperty.length; i++) {
unit[i].style.backgroundColor = allProperty[i][0];}

console.log (unit);



// создаём диалоговое окно

let dialog = document.querySelector("dialog");
let unitOkno = dialog.querySelectorAll ("td");

 for (let i = 0; i < allProperty.length; i++) {
  unit[i].addEventListener ("click", function() { 
  dialog.show();
  unitOkno[0].style.backgroundColor = allProperty[i][0];
  unitOkno[1].style.backgroundColor = allProperty[i][2];
  unitOkno[2].style.backgroundColor = allProperty[i][4];
  });
};

  document.querySelector("#close").onclick = function() {
  dialog.close();
};

// клик по unitOkno

let ppp = document.querySelector("#ppp");

	for (let i = 0; i < allProperty.length; i++) {
    for (let k = 0; k < unitOkno.length; k++) {
	unitOkno[k].addEventListener ("click", function() { 
    dialog.style.backgroundColor = unitOkno[k].style.backgroundColor;
	
     if (k == 0) {ppp.append (allProperty[i][1])};   
	 if (k == 1) {ppp.append (allProperty[i][3])};
	 if (k == 2) {ppp.append (allProperty[i][5])};
	
	});
   };
 };


И еще один вопрос/просьба.

Дальше я планирую добавить в массив allProperty элементы с ссылкой на звуковые файлы. Как сделать, чтобы при клике на unitOkno запускался файл ссылка на который расположена в allProperty пока не представляю.
Подскажите, пожалуйста.
Ответить с цитированием
  #2 (permalink)  
Старый 25.04.2020, 16:14
Аватар для voraa
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 2,692

Вот это какая то жуть
for (let i = 0; i < allProperty.length; i++) {
    for (let k = 0; k < unitOkno.length; k++) {
    unitOkno[k].addEventListener ("click", function() {
    dialog.style.backgroundColor = unitOkno[k].style.backgroundColor;
     
     if (k == 0) {ppp.append (allProperty[i][1])};  
     if (k == 1) {ppp.append (allProperty[i][3])};
     if (k == 2) {ppp.append (allProperty[i][5])};
     
    });
   };
 };

Вы на каждое unitOkno[k] вешаете 7 обработчиков по click Для i = 0, 1..6.
И при клике сработает каждый.
Ответить с цитированием
  #3 (permalink)  
Старый 25.04.2020, 17:59
Аспирант
Отправить личное сообщение для Vahan60 Посмотреть профиль Найти все сообщения от Vahan60
 
Регистрация: 20.04.2020
Сообщений: 46

Жуть. Не спорю. Но у меня три класса месяца образования...
Что должен сделать код.
Есть таблица1 1Х7 ячейки которой закрашены в различные цвета (конкретно первая в малиновый).
При клике на малиновую ячейку открывается диалоговое окно с таблицей2 1Х3, ячейки которой окрашены в оттенки красного (первый малиновый, второй красный, третий розовый).
При клике на ячейку таблицы2:
1 поле диалогого окна должно окрасится в цвет ячейки (конкретно при клике на розовую ячейку поле окрашивается в розовый цвет),
2 должен появится соответствующий текст (Pink),
3 запустится звуковой файл (озвучить Pink).
Первое у меня получилось.
А вот думая над тем, как при клике на ячейку таблицы2 учесть на какую ячейку таблицы1 был клик шагом раньше, я и пришел к этой жути.
Теперь вот возникла проблема - как сделать так, чтобы запускался один конкретный обработчик.
Ответить с цитированием
  #4 (permalink)  
Старый 25.04.2020, 18:33
Аватар для voraa
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 2,692

При клике на th можно запоминать его номер

let dialog = document.querySelector("dialog");
let unitOkno = dialog.querySelectorAll ("td");
let activeTh = -1; // Номер нажатой th
 
 for (let i = 0; i < allProperty.length; i++) {
  unit[i].addEventListener ("click", function() {
  dialog.show();
  activeTh = i;
  unitOkno[0].style.backgroundColor = allProperty[i][0];
  unitOkno[1].style.backgroundColor = allProperty[i][2];
  unitOkno[2].style.backgroundColor = allProperty[i][4];
  });
};
 
  document.querySelector("#close").onclick = function() {
  dialog.close();
};
 
// клик по unitOkno
 
let ppp = document.querySelector("#ppp");
 
    for (let k = 0; k < unitOkno.length; k++) {
    unitOkno[k].addEventListener ("click", function() {
    dialog.style.backgroundColor = unitOkno[k].style.backgroundColor;
     
//     if (k == 0) {ppp.append (allProperty[i][1])};  
//     if (k == 1) {ppp.append (allProperty[i][3])};
//     if (k == 2) {ppp.append (allProperty[i][5])};

     ppp.append (allProperty[activeTh][k * 2 + 1])
     
    });
   };
Ответить с цитированием
  #5 (permalink)  
Старый 25.04.2020, 19:09
Аспирант
Отправить личное сообщение для Vahan60 Посмотреть профиль Найти все сообщения от Vahan60
 
Регистрация: 20.04.2020
Сообщений: 46

Изящно.
Спасибо огромное. Все работает.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как зафиксировать кнопки чтобы они оставались на одном месте? mikefromru Элементы интерфейса 5 14.06.2017 23:15
Вызвать класс в другом месте? INSIDER73 Элементы интерфейса 11 24.04.2017 22:50
В одном месте функция работает нормально, в другом не работает вообще SkaN jQuery 10 21.03.2012 13:06
Нужно при вводе в текстовое поле тут же отобразить данный в другом месте klubnichkaaa AJAX и COMET 3 20.10.2011 20:46
Drop down, сокрытие по клику в другом месте Logo Общие вопросы Javascript 2 08.11.2010 14:23