Меню-аккордеон с числом пунктов

function RandomInt(min, max){
  return Math.floor(Math.random()*(max - min) + min)} ;
 
let random1 = RandomInt(1, 10);
let random2 = RandomInt(1, 10);
let random3 = RandomInt(1, 10);
 
let root=document.querySelector(":root"); 
root.style.setProperty("--random1", random1);
root.style.setProperty("--random2", random2);
root.style.setProperty("--random3", random3);
 
function show() {
  count = parseInt(document.forms.Form.input.value);
  block = new Array();
  for (i = 0; i < count; i++)
    block.push('<li></li>');
  document.getElementById('list').innerHTML = block.join('');
                 }
window.addEventListener("load", (event) => {show()} );
root.style.setProperty("--count", count);

let root = document.querySelector(":root");
var count = parseInt(document.forms.Form.input.value);
var block = new Array();
 
function show() { //пункты меню + цвет 
    for (var i = 0; i < count; i++) {
        var color(i + 1) = RandomInt(0, 36) * 10;
        root.style.setProperty("$color" + (i + 1), color(i + 1));
        block.push('<li>' + li_str[i] + '</li>')
    } // End for i
} // End Show

  var color(i+1) = RandomInt(0, 36) * 10;

function show() { //пункты меню + цвет 
 
let root = document.documentElement;
var count = parseInt(document.forms.Form.input.value);
var block = new Array();
 
    for (var i = 0; i < count; i++) {
        var color(i + 1) = RandomInt(0, 36) * 10; // угол 0 до 360 
        root.style.setProperty("$color" + (i + 1), color(i + 1));
        block.push('<li>' + li_str[i] + '</li>')
    } // End for i
} // End Show

/* Текст в подписях. Сколько планируете картинок, столько и элементов массива сделайте */
let li_str = [
    '<a href="https://ya.ru" class="link">1. Lorem ipsum dolor sit amet, consectetur adipiscing elit</a>',
    '<a href="https://ya.ru" class="link">2. Lorem ipsum dolor sit amet, consectetur adipiscing elit</a>',
    '<a href="https://ya.ru" class="link">3. Lorem ipsum dolor sit amet, consectetur adipiscing elit</a>',
    '<a href="https://ya.ru" class="link">4. Lorem ipsum dolor sit amet, consectetur adipiscing elit</a>',
    '<a href="https://ya.ru" class="link">5. Lorem ipsum dolor sit amet, consectetur adipiscing elit</a>',
    '<a href="https://ya.ru" class="link">6. Lorem ipsum dolor sit amet, consectetur adipiscing elit</a>',
    '<a href="https://ya.ru" class="link">7. Lorem ipsum dolor sit amet, consectetur adipiscing elit</a>',
    '<a href="https://ya.ru" class="link">8. Lorem ipsum dolor sit amet, consectetur adipiscing elit</a>',
    '<a href="https://ya.ru" class="link">9. Lorem ipsum dolor sit amet, consectetur adipiscing elit</a>',
    '<a href="https://ya.ru" class="link">10. Lorem ipsum dolor sit amet, consectetur adipiscing elit</a>'
];
 
 
function RandomInt(min, max) {
    return Math.floor(Math.random() * (max - min) + min)
};
 
function show() {
  let count = parseInt(document.forms.Form.input.value);
  if(count > li_str.length)
     count = li_str.length;
 
  const ul = document.getElementById('list');
  ul.innerHTML = '';
 
  for(let index in li_str) {
    if(index >= count) {
      count = index;
      break;
    }
    const li = document.createElement('li');
    li.innerHTML = li_str[index];
    ul.appendChild(li);
  }
  document.documentElement.style.setProperty("--count", count);
}
 
window.addEventListener("load", (event) => {
    show()
});

/* Текст в подписях. Сколько планируете картинок, столько и элементов массива сделайте */
let li_str = [
    '<a href="https://ya.ru" class="link">1. Lorem ipsum dolor sit amet, consectetur adipiscing elit</a>',
    '<a href="https://ya.ru" class="link">2. Lorem ipsum dolor sit amet, consectetur adipiscing elit</a>',
    '<a href="https://ya.ru" class="link">3. Lorem ipsum dolor sit amet, consectetur adipiscing elit</a>',
    '<a href="https://ya.ru" class="link">4. Lorem ipsum dolor sit amet, consectetur adipiscing elit</a>',
    '<a href="https://ya.ru" class="link">5. Lorem ipsum dolor sit amet, consectetur adipiscing elit</a>',
    '<a href="https://ya.ru" class="link">6. Lorem ipsum dolor sit amet, consectetur adipiscing elit</a>',
    '<a href="https://ya.ru" class="link">7. Lorem ipsum dolor sit amet, consectetur adipiscing elit</a>',
    '<a href="https://ya.ru" class="link">8. Lorem ipsum dolor sit amet, consectetur adipiscing elit</a>',
    '<a href="https://ya.ru" class="link">9. Lorem ipsum dolor sit amet, consectetur adipiscing elit</a>',
    '<a href="https://ya.ru" class="link">10. Lorem ipsum dolor sit amet, consectetur adipiscing elit</a>'
];
 
 
function RandomInt(min, max) {
    return Math.floor(Math.random() * (max - min) + min)
};
 
function show() {
  let rootStyle = document.documentElement.style;
  let count = parseInt(document.forms.Form.input.value);
  if(count > li_str.length)
     count = li_str.length;
 
  const ul = document.getElementById('list');
  ul.innerHTML = '';
 
  for(let index in li_str) {
    if(index >= count) {
      count = index;
      break;
    }
     let randomColor = RandomInt(0, 36) * 10;
    let randomColor_hsla = hsla(randomColor, 100, 50, 0.8);
    
    const li = document.createElement('li');
    li.innerHTML = li_str[index];
    ++index;
    rootStyle.setProperty("--color"+index, randomColor_hsla);
    ul.appendChild(li);
  }
  rootStyle.setProperty("--count", count);
}
 
window.addEventListener("load", (event) => {
    show()
});
 
function hsla(h, s, l, a) {
  // Проверка на допустимые значения
  if (h < 0 || h > 360 ||
      s < 0 || s > 100 ||
      l < 0 || l > 100 ||
      a < 0 || a > 1) {
    return null;
  }
 
  // Преобразование значений hue, saturation и lightness в диапазон [0, 1]
  const normalizedH = h / 360;
  const normalizedS = s / 100;
  const normalizedL = l / 100;
 
  // Вычисление RGB значений
  let r, g, b;
  if (normalizedS === 0) {
    r = g = b = normalizedL;
  } else {
    const q = normalizedL < 0.5 ? normalizedL * (1 + normalizedS) : normalizedL + normalizedS - normalizedL * normalizedS;
    const p = 2 * normalizedL - q;
    r = hueToRgb(p, q, normalizedH + 1/3);
    g = hueToRgb(p, q, normalizedH);
    b = hueToRgb(p, q, normalizedH - 1/3);
  }
 
  // Округление значений RGB до целых чисел
  const red = Math.round(r * 255);
  const green = Math.round(g * 255);
  const blue = Math.round(b * 255);
 
  // Возвращение строки в формате rgba()
  return `rgba(${red},${green},${blue},${a})`;
}
 
function hueToRgb(p, q, t) {
  if (t < 0) t += 1;
  if (t > 1) t -= 1;
  if (t < 1/6) return p + (q - p) * 6 * t;
  if (t < 1/2) return q;
  if (t < 2/3) return p + (q - p) * (2/3 - t) * 6;
  return p;
}

    const li = document.createElement('li');
    li.innerHTML = li_str[index];
    ++index;
    rootStyle.setProperty("--color"+index, randomColor_hsla);
    ul.appendChild(li);

/* Текст в подписях. Сколько планируете картинок, столько и элементов массива сделайте */
let li_str = [
  {
    img: "https://dl.dropbox.com/s/mbho5bqfofk6g99/pic.jpg",
    link: `<a href="https://ya.ru" class="link">1. Lorem ipsum dolor sit amet, consectetur adipiscing elit</a>`
 
  },
  {
    img: "https://dl.dropbox.com/s/kioimintl0v9l4d/pic.jpg",
    link: `<a href="https://ya.ru" class="link">2. Lorem ipsum dolor sit amet, consectetur adipiscing elit</a>`
 
  },
  {
    img: "https://dl.dropbox.com/s/7a60gndncwf81x8/pic.jpg",
    link: `<a href="https://ya.ru" class="link">3. Lorem ipsum dolor sit amet, consectetur adipiscing elit</a>`
 
  },
  {
    img: "https://dl.dropbox.com/s/nkwuv9jz8i99309/pic.jpg",
    link: `<a href="https://ya.ru" class="link">4. Lorem ipsum dolor sit amet, consectetur adipiscing elit</a>`
  }
];
 
 
function RandomInt(min, max) {
    return Math.floor(Math.random() * (max - min) + min)
};
 
const styleElement = document.createElement('style');
styleElement.setAttribute('id', 'dynamic-style');
document.head.appendChild(styleElement);
 
function show() {
  let rootStyle = document.documentElement.style;
  let count = parseInt(document.forms.Form.input.value);
  if(count > li_str.length)
     count = li_str.length;
 
  const ul = document.getElementById('list');
  ul.innerHTML = '';
 
styleElement.innerHTML = "";
  for(let index in li_str) {
    if(index >= count) {
      count = index;
      break;
    }
     let randomColor = RandomInt(0, 36) * 10;
    let randomColor_hsla = hsla(randomColor, 100, 50, 0.8);
    let indexStyle = parseInt(index) + 1;
    
styleElement.innerHTML += `ul li:nth-child(${indexStyle}) { background: url("${li_str[index].img}") top right no-repeat; }`; 
 styleElement.innerHTML += `ul li:nth-child(${indexStyle})::before { background-color: ${randomColor_hsla}; }`; 
    
    const li = document.createElement('li');
    li.innerHTML = li_str[index].link;
    ul.appendChild(li);
  }
  
  
  rootStyle.setProperty("--count", count);
}
 
window.addEventListener("load", (event) => {
    show()
});
 
function hsla(h, s, l, a) {
  // Проверка на допустимые значения
  if (h < 0 || h > 360 ||
      s < 0 || s > 100 ||
      l < 0 || l > 100 ||
      a < 0 || a > 1) {
    return null;
  }
 
  // Преобразование значений hue, saturation и lightness в диапазон [0, 1]
  const normalizedH = h / 360;
  const normalizedS = s / 100;
  const normalizedL = l / 100;
 
  // Вычисление RGB значений
  let r, g, b;
  if (normalizedS === 0) {
    r = g = b = normalizedL;
  } else {
    const q = normalizedL < 0.5 ? normalizedL * (1 + normalizedS) : normalizedL + normalizedS - normalizedL * normalizedS;
    const p = 2 * normalizedL - q;
    r = hueToRgb(p, q, normalizedH + 1/3);
    g = hueToRgb(p, q, normalizedH);
    b = hueToRgb(p, q, normalizedH - 1/3);
  }
 
  // Округление значений RGB до целых чисел
  const red = Math.round(r * 255);
  const green = Math.round(g * 255);
  const blue = Math.round(b * 255);
 
  // Возвращение строки в формате rgba()
  return `rgba(${red},${green},${blue},${a})`;
}
 
function hueToRgb(p, q, t) {
  if (t < 0) t += 1;
  if (t > 1) t -= 1;
  if (t < 1/6) return p + (q - p) * 6 * t;
  if (t < 1/2) return q;
  if (t < 2/3) return p + (q - p) * (2/3 - t) * 6;
  return p;
}

function show() {
  let count = parseInt(document.forms.Form.input.value);
  if(count > li_str.length)
     count = li_str.length;
 
  let innerHTML_ul = "";
  let innerHTML_styleElement = "";
 
  for (let index = 0; index < count && index < li_str.length; index++) {
    const randomColor = RandomInt(0, 36) * 10;
    const randomColor_hsla = hsla(randomColor, 100, 50, 0.8);
    const indexStyle = index + 1;
 
    innerHTML_styleElement += `ul li:nth-child(${indexStyle}) { background: url("${li_str[index].img}") top right no-repeat; }`;
    innerHTML_styleElement += `ul li:nth-child(${indexStyle})::before { background-color: ${randomColor_hsla}; }`;
 
    const li = document.createElement('li');
    li.innerHTML = li_str[index].link;
    innerHTML_ul += li.outerHTML;
  }
  
  styleElement.innerHTML = innerHTML_styleElement;
  
  document.getElementById('list').innerHTML = innerHTML_ul;
  document.documentElement.style.setProperty("--count", count);
}

    const randomColor = RandomInt(0, 36) * 10;
    const randomColor_hsla = hsla(randomColor, 100, 50, 0.8);
    const indexStyle = index + 1;