Javascript 更改子元素的src

我有三个按钮，每个按钮都有一个带有空

src

的图像。我试图在单击每个按钮时随机更改图像

src

，如果我看到的是正确的，控制台会告诉我，当我单击时图像正在生成，但我似乎无法在浏览器上显示它，我真的不明白为什么

const图像=
["https://i.picsum.photos/id/102/60/60.jpg","https://i.picsum.photos/id/1024/60/60.jpg", 
"https://i.picsum.photos/id/1062/60/60.jpg","https://i.picsum.photos/id/1069/60/60.jpg"];
const buttons=document.queryselectoral（“按钮”）；
buttons.forEach（函数（el）{el.addEventListener（“单击”，卡片）；}）
功能卡（）{
让random=Math.floor（Math.random（）*9）；
让image=this.children；
console.log（图像）；
image.src=图像[随机]；
console.log（image.src）；}

this.children

指的是dom元素的集合，而不是单个元素；因此，您需要在您的案例中指定第一个

如果除了图像之外还有多个子节点，您可能希望考虑使用<代码> QuestS选择器（“IMG”）< /C> > .<

const图像=
["https://i.picsum.photos/id/102/60/60.jpg",
"https://i.picsum.photos/id/1024/60/60.jpg",
"https://i.picsum.photos/id/1062/60/60.jpg",
"https://i.picsum.photos/id/1069/60/60.jpg"];
const buttons=document.queryselectoral（“按钮”）；
buttons.forEach（el=>el.addEventListener（“点击”，卡片））
功能卡（）{
const randomImageUrl=images[Math.floor（Math.random（）*images.length）]；
const image=this.children[0]；
image.src=随机图像URL；
console.log（image.src）；
}

---

您可以这样做

this.querySelectorAll("img").forEach(function(img) { img.src = images[random] });

---

这将遍历所有子项。

this.children返回一个数组。您需要指定[0]才能获取第一个（仅限）

const图像=
["https://i.picsum.photos/id/102/60/60.jpg","https://i.picsum.photos/id/1024/60/60.jpg", 
"https://i.picsum.photos/id/1062/60/60.jpg","https://i.picsum.photos/id/1069/60/60.jpg"];
const buttons=document.queryselectoral（“按钮”）；
buttons.forEach（函数（el）{el.addEventListener（“单击”，卡片）；}）
功能卡（）{
让random=Math.floor（Math.random（）*9）；
让image=this.children；
console.log（图像）；
image.src=图像[随机]；
console.log（image.src）；}

---

有两个主要问题：

children

是复数形式，但是当您想要更改图像的

src

时，它需要是单数形式。子对象是类似数组的对象，而图像是元素。没问题，子对象是包含元素的类似数组的对象

您有4个元素，但将9个元素随机化。你需要与你的上限保持一致

工作代码：

<div>
       <button type="button"><img src="" alt=""></button>
       <button type="button"><img src="" alt=""></button>
       <button type="button"><img src="" alt=""></button>      
   </div>

<script type="text/javascript">
const images = 
    ["https://i.picsum.photos/id/102/60/60.jpg","https://i.picsum.photos/id/1024/60/60.jpg", 
     "https://i.picsum.photos/id/1062/60/60.jpg","https://i.picsum.photos/id/1069/60/60.jpg"];

  const buttons = document.querySelectorAll("button");

       buttons.forEach(function(el){  el.addEventListener("click", card);   })

       function card(){
           let random = Math.floor( Math.random() * 4);
           let image = this.children[0];
               console.log(image);
           image.src = images[parseInt(random)];
               console.log(image.src);    }
</script>

常量图像=
["https://i.picsum.photos/id/102/60/60.jpg","https://i.picsum.photos/id/1024/60/60.jpg", 
"https://i.picsum.photos/id/1062/60/60.jpg","https://i.picsum.photos/id/1069/60/60.jpg"];
const buttons=document.queryselectoral（“按钮”）；
buttons.forEach（函数（el）{el.addEventListener（“单击”，卡片）；}）
功能卡（）{
让random=Math.floor（Math.random（）*4）；
让image=this.children[0]；
console.log（图像）；
image.src=图像[parseInt（随机）]；
console.log（image.src）；}

---

小提琴手：

这能回答你的问题吗？

<div>
       <button type="button"><img src="" alt=""></button>
       <button type="button"><img src="" alt=""></button>
       <button type="button"><img src="" alt=""></button>      
   </div>

<script type="text/javascript">
const images = 
    ["https://i.picsum.photos/id/102/60/60.jpg","https://i.picsum.photos/id/1024/60/60.jpg", 
     "https://i.picsum.photos/id/1062/60/60.jpg","https://i.picsum.photos/id/1069/60/60.jpg"];

  const buttons = document.querySelectorAll("button");

       buttons.forEach(function(el){  el.addEventListener("click", card);   })

       function card(){
           let random = Math.floor( Math.random() * 4);
           let image = this.children[0];
               console.log(image);
           image.src = images[parseInt(random)];
               console.log(image.src);    }
</script>