无法使用 img.src 更改 src 属性

Question

我在使用属性 .src 时遇到问题，我打算使用它来使用随机生成的数字在每次加载 html 页面时更改图像。出于某种原因，img.src 不会更改目标 ID 的 src 属性并出于某些原因“停止”我的循环......（代码是运行单独的文件形式 HTML) 这是 js 代码：

const images_for_you = [
    './assets/Series/Aggretsuko.jpg',
    './assets/Series/AngelBeast.jpg',
    './assets/Series/Arcane.jpg',
    './assets/Series/BreakingBad.jpg',
    './assets/Series/BlackMirror.jpg',
    './assets/Series/BluePeriod.jpg',
    './assets/Series/Django.png',
    './assets/Series/GreatPretender.jpg',
    './assets/Series/Hilda.jpg',
    './assets/Series/JeVeuxMangerTonPancreas.jpg',
    './assets/Series/LaLigneVerte.jpg',
    './assets/Series/LeCupheadShow.jpg',
    './assets/Series/LesEnfantsDeLaBalaine.jpg',
    './assets/Series/LeVoyageTeChihiro.jpg',
    './assets/Series/QuoiQuilArriveJeVousAime.jpg',
    './assets/Series/NosMotsCommeDesBulles.jpg',
    './assets/Series/SkyHighSurvival.jpg',
    './assets/Series/toradora.jpg',
    './assets/Series/SkyHighSurvival.jpg',
    './assets/Series/Viking.jpg']; // 20
const images_japanese_animation = [];
const images_netflix_originals = [];
const images_films_sf = [];
const images_studios_ghibli = [];
const images_dessins_animes = [];

function random_array(iterations){
    var randomArray = [];
    for (let i = 0; i<iterations; i++){
        randomArray.push(Math.floor(Math.random()*iterations))
    }
    return randomArray
}

function attribute_for_you(number_of_images){
    let randArr = random_array(number_of_images)
    let index_for_you = [
        'for_you_1',
        'for_you_2',
        'for_you_3',
        'for_you_4',
        'for_you_5',
        'for_you_6',
        'for_you_7',
        'for_you_8',
        'for_you_9',
        'for_you_10',
        'for_you_11',
        'for_you_12',
        'for_you_13',
        'for_you_14'
    ]
    
    for (let i = 0; i < number_of_images; i++){
        console.log(images_for_you[randArr[i]])
        console.log(randArr[i])
        console.log(i)
        var img_index = document.getElementsById(index_for_you[i])
        img_index.src = images_for_you[randArr[i]]
    } 
}
attribute_for_you(10)

感谢您的帮助另外，id是正确的，我检查了很多次:)

Answer 1

var img_index = document.getElementsById(index_for_you[i])

getElementById 用于获取具有特定 id 的 html 元素，但您正在使用它来获取您的 JS 变量，这不是它的工作方式，因此它会显示错误。

Answer 2

已更新

如果这些图像元素不在您的 HTML

中，您还需要将它们添加到您的 HTML 正文中

for (let i = 0; i < number_of_images; i++){
        console.log(images_for_you[randArr[i]])
        console.log(randArr[i])
        console.log(i)
        var img_index = document.getElementById(index_for_you[i])
        //if cannot find that image element, we need to add it
        if(!img_index) {
          imageElement = document.createElement('img');
          imageElement.setAttribute("id", index_for_you[i]);
          //add the image element to the body
          document.body.appendChild(imageElement);
        }
        img_index = document.getElementById(index_for_you[i])
        img_index.src = images_for_you[randArr[i]]
    }

旧答案

这里有语法错误

var img_index = document.getElementsById(index_for_you[i])

应该是getElementById，不是getElementsById（Elements不应该是s）

变化应该是

var img_index = document.getElementById(index_for_you[i])

无法使用 img.src 更改 src 属性

Impossible to change the src attribute using img.src

html

javascript

src