Блог

-Всем привет !-

После попытки несколько вещей, — в течение месяца, я пришел, чтобы спросить Здесь, Если кто-то может решить мою проблему : я хочу иметь страницу, которая отображает несколько изображений, последовательно и сменить все эти образы, когда я изменить выбранный индекс в моем выборе бар, я не хочу, чтобы добавить изображения, но смена изображений на другие изображения, которые я положил в массив в JavaScript (я использую ссылки на массивы, которые будут идти в КГД от ИМГ), вот мой код, чтобы лучше понять, чего я хочу и что я пробовал :

Примечания :

-Я знаю, что нехорошо манипулировать img с помощью JavaScript, но я не хочу использовать iframe в html, потому что он будет отображать несколько пустых страниц всякий раз, когда в массивах будет меньше изображений, чем максимально возможных тегов iframe (300 здесь), и его довольно сложно загружать. (Я также нахожу, что тег img хорошо соответствует моим требованиям).

-Извините, если мой код неаккуратен или не очень хорош, и спасибо, что попытались мне помочь !

HTML

     <div class="col-6">
        <select class="episodes listes form-select form-select mb-3" onchange="listeChap()">
            <option selected>Choose a Chapter</option>
            <option value="0">Chapter 1</option>   
            <option value="1">Chapter 2</option>
            <option value="2">Chapter 3</option>
            <option value="3">Chapter 4</option>
            <option value="4">Chapter 5</option>
            ...
        </select> 
    </div>

    <div class="col-12 text-center">
        <img id="frame1" class="img-fluid"></img>
        <img id="frame2" class="img-fluid"></img>
        <img id="frame3" class="img-fluid"></img>
        <img id="frame4" class="img-fluid"></img>
        <img id="frame5" class="img-fluid"></img>
        ...
        <img id="frame300" class="img-fluid"></img>
    </div>
 

язык JavaScript

 //here each "epsX" array is the X selected chapter, and in each chapter we have the img urls that I want to show

var eps1 = [
  'some_url_img.jpg',
  'some_url_img.jpg',
  'some_url_img.jpg',
];
var eps2 = [
  'some_url_img.jpg',
  'some_url_img.jpg',
  'some_url_img.jpg',
];
var eps3 = [
  'some_url_img.jpg',
  'some_url_img.jpg',
  'some_url_img.jpg',
];
.
.
.

function listeChap() {
  
    var elt = document.querySelector('select, .episodes');
    //the name of each arrays that we will add an X after to know which chapter it is
    var k = 'eps';
    var link, count, frameX;

    //300 is the total img tag number in HTML, didn't find how to put a var for it but it's ok like this I think
    for(count = 0; count < 300; count  ){

        //having proper frame number for the getElementById
        frameX = 'frame'   count 1;

        //create a var that uses the array's name with a dyanmic number to have the links of the proper chapter => "epsX[]"
        link = eval(k   elt.selectedIndex   '['   count   ']'   ';');

        //gives to the frameX id of img the proper link
        document.getElementById(frameX).src = link;
    }
}
 

Ваша проблема здесь:

 frameX = 'frame'   count 1; // results frame01
 

который должен быть:

 frameX = 'frame'   ( count   1); // results frame1
//  count treats count as a number not a string
 

Ваша упрощенная скрипка: https://jsfiddle.net/2174q8nL/2/