Здравствуйте, нужно чтобы все динамически создаваемые кнопки на странице имели уникальный 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>
