Javascript.RU

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

Уникальные Id для кнопок
Здравствуйте, нужно чтобы все динамически создаваемые кнопки на странице имели уникальный Id. На странице 16 блоков и сейчас уникальные Id присваиваются блоку. Однако внутри блока все кнопки имеют одинаковые Id, как сделать чтобы у всех были разные?

Цикл который создает кнопки

for(var k = 0; k < movieList.length; k++){
    random = Math.floor(Math.random() * 1000);
    btn = 'btn' + random;
    link = 'link' + random;
    movieList[k] = movieList[k].replace(/(<\/li>)/gmi,'<div id = "btn"><button onclick="openLink()" id='+ btn + '>Смотреть фильм</button></div></li>');
    movieList[k] = movieList[k].replace(/<a href/g,'<a id='+ link +' href');
}


Код полностью.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		#content{
			width: 100%;
			}
			 .category-list {
			  list-style: none;
			  height: 550px;
			  border: 1px solid red;
			  display: flex;
			  flex-direction: column; 
			  flex-wrap: wrap
			}
			.category-list li {
			  page-break-inside: avoid;
			  break-inside: avoid;
			}

			.btn {
				margin-top: 10px;
				margin-bottom: 10px;
			}

			a {
				font-size: 18px;
			}
	</style>
</head>
<body>
	<div id="content"/></div>
<script>
	 window.addEventListener("DOMContentLoaded", () => {

		Promise.all([
			
		fetch("https://ru.wikipedia.org/wiki/%D0%9A%D0%B0%D1%82%D0%B5%D0%B3%D0%BE%D1%80%D0%B8%D1%8F:%D0%9A%D0%B8%D0%BD%D0%BE%D0%BA%D0%BE%D0%BC%D0%B5%D0%B4%D0%B8%D0%B8_%D0%A1%D0%A1%D0%A1%D0%A0")
		.then(function (response) {
		// The API call was successful!
		return response.text();
		}),
		
		fetch("https://ru.wikipedia.org/w/index.php?title=%D0%9A%D0%B0%D1%82%D0%B5%D0%B3%D0%BE%D1%80%D0%B8%D1%8F:%D0%9A%D0%B8%D0%BD%D0%BE%D0%BA%D0%BE%D0%BC%D0%B5%D0%B4%D0%B8%D0%B8_%D0%A1%D0%A1%D0%A1%D0%A0&pagefrom=%D0%97%D0%B0%D0%BF%D0%B0%D1%81%D0%BD%D0%BE%D0%B9+%D0%B8%D0%B3%D1%80%D0%BE%D0%BA+%28%D1%84%D0%B8%D0%BB%D1%8C%D0%BC%29#mw-pages")
		.then(function (response) {
		// The API call was successful!
		return response.text();
		})
		])
		.then(function (html) {
		// Convert the HTML string into a document object
		let parser = new DOMParser();
		let doc = parser.parseFromString(html, 'text/html');
		let str = "";
		// Get the image file
		let movieList =  Array.from(doc.querySelectorAll('.mw-category-group')).map(x => x.innerHTML);
		let removed = movieList.splice(0,5);
		let removed2 = movieList.splice(9,5);
		let removed3 = movieList.splice(9,1);
		// let titles = Array.from(doc.querySelectorAll('li')).map(x => x.innerHTML('title');
		movieList= movieList.map(function(x){ 
			return x.replace(/<a href="/g,'<a href="https://ru.wikipedia.org/') 
		});
		movieList= movieList.map(function(x){ 
			return x.replace(/<ul/g,'<ul class="category-list clearfix"/') 
		});

		// movieList[8]= movieList[8].replace(/(<\/li>)$/gmi, '</li> <div id = "btns></div>');
		movieList= movieList.map(function(x){ 
			return x.replace(/<li/g,'<li class="category-item"/') 
		});
		for(var k = 0; k < movieList.length; k++){
			random = Math.floor(Math.random() * 1000);
			btn = 'btn' + random;
			link = 'link' + random;
			movieList[k] = movieList[k].replace(/(<\/li>)/gmi,'<div id = "btn"><button onclick="openLink()" id='+ btn + '>Смотреть фильм</button></div></li>');
			movieList[k] = movieList[k].replace(/<a href/g,'<a id='+ link +' href');
		}
		console.log(movieList[8]);
		for(i = 0; i < movieList.length; i++) {
			str += movieList[i] +  '<br>';
		}
		console.log(movieList.length);
		content.innerHTML = str;
		})
		.catch(function (err) {
		// There was an error
		console.warn('Something went wrong.', err);
		});
	});
</script>
</body>
Ответить с цитированием
  #2 (permalink)  
Старый 14.03.2022, 15:40
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,084

Сообщение от Judgin
random = Math.floor(Math.random() * 1000);
random = k;


Ответить с цитированием
  #3 (permalink)  
Старый 14.03.2022, 16:52
Аспирант
Отправить личное сообщение для Judgin Посмотреть профиль Найти все сообщения от Judgin
 
Регистрация: 31.05.2021
Сообщений: 32

Сообщение от рони Посмотреть сообщение
random = k;


В этом случае все равно у кнопок для каждого блока Id одинаковы. Получается что сейчас каждый цикл создается блок с кнопками имеющими одинаковые Id, а нужно чтобы каждый цикл создавалась одна кнопка с уникальным Id.
Ответить с цитированием
  #4 (permalink)  
Старый 14.03.2022, 17:37
Аватар для voraa
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 2,725

Сейчас видно, что у всех созданных div одинаковый id, а у кнопок разный.
Ответить с цитированием
  #5 (permalink)  
Старый 14.03.2022, 22:09
Аспирант
Отправить личное сообщение для Judgin Посмотреть профиль Найти все сообщения от Judgin
 
Регистрация: 31.05.2021
Сообщений: 32

Сообщение от voraa Посмотреть сообщение
Сейчас видно, что у всех созданных div одинаковый id, а у кнопок разный.
Скину скрин посмотрите, 2 первые кнопки блока Б имеют одинаковые Id и соответственно у всех других кнопок из этого блока тот же Id.

https://drive.google.com/file/d/1OwT...ew?usp=sharing
Ответить с цитированием
  #6 (permalink)  
Старый 14.03.2022, 23:30
Аспирант
Отправить личное сообщение для Judgin Посмотреть профиль Найти все сообщения от Judgin
 
Регистрация: 31.05.2021
Сообщений: 32

Похоже, что создание кнопок с одинаковым Id происходит из за флага g в методе replace(). Но если я удаляю этот флаг, то создается только одна кнопка для первой ссылки в каждом блоке. Такое ощущение что цикл for и метод replace() несовместимы. Может есть какие то другие варианты?
Ответить с цитированием
  #7 (permalink)  
Старый 15.03.2022, 08:02
Аватар для voraa
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 2,725

А зачем вообще нужны случайные id?
Как их в данном случае использовать?
Тем более , что random не гарантирует, что они будут различными.

По мне, чем курочить строку html, лучше все через DOM сделать.
Ответить с цитированием
  #8 (permalink)  
Старый 15.03.2022, 12:14
Аспирант
Отправить личное сообщение для Judgin Посмотреть профиль Найти все сообщения от Judgin
 
Регистрация: 31.05.2021
Сообщений: 32

Сообщение от voraa Посмотреть сообщение
А зачем вообще нужны случайные id?
Как их в данном случае использовать?
Тем более , что random не гарантирует, что они будут различными.

По мне, чем курочить строку html, лучше все через DOM сделать.
Вообще с помощью случайных Id я пытаюсь реализовать следующее. При нажатии на кнопку срабатывает функция, которая извлекает название фильма (под которым была нажата кнопка) из значения атрибута 'title' (см. фото). И после осуществляется поиск фильма на YouTube и открытие этой страницы для просмотра фильма.

P.S.

Пытаюсь через DOM сделать, но пока не получается все это дело состыковать.

https://drive.google.com/file/d/1SXw...ew?usp=sharing
Ответить с цитированием
  #9 (permalink)  
Старый 15.03.2022, 16:04
Аватар для voraa
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 2,725

Сообщение от Judgin
Вообще с помощью случайных Id я пытаюсь реализовать следующее. При нажатии на кнопку срабатывает функция, которая извлекает название фильма (под которым была нажата кнопка) из значения атрибута 'title' (см. фото). И после осуществляется поиск фильма на YouTube и открытие этой страницы для просмотра фильма.
Так без всякого id все делается в одну строчку
Цитата:
function openLink() {
//this - кнопка

const name = this.closest('li').querySelector('a').title
....
}
Ответить с цитированием
  #10 (permalink)  
Старый 16.03.2022, 11:10
Аспирант
Отправить личное сообщение для Judgin Посмотреть профиль Найти все сообщения от Judgin
 
Регистрация: 31.05.2021
Сообщений: 32

Сообщение от voraa Посмотреть сообщение
Так без всякого id все делается в одну строчку
Не совсем понятно, я с ключевым словом this в javascript еще не очень знаком. В той строчке которую вы закомментировали //this - кнопка, нужно определить кнопку? А если вы говорите, что id не нужен, то как ее еще определить?

P.S.

Насчет this гуглил, но ответа на свой вопрос не нашел
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Правильно вызвать массив biryukovm Элементы интерфейса 3 19.03.2018 13:31
Скрипт корзины для сайта EasyNetShop.ru Ваши сайты и скрипты 0 17.11.2016 14:57
[job] JS-разработчик (+Angular) на UI внутреннего проекта (для других разработчиков:) Anna-HR Работа 12 19.01.2015 13:50
Настройка кнопок для прокрутки контента Silence Общие вопросы Javascript 4 09.07.2014 00:42
Один обработчик для нескольких кнопок! frundik Элементы интерфейса 2 10.07.2012 15:30