基于对象数组的带标题随机图片生成器开发咨询

Hey there! Let's walk through your code and fix up this random winner generator—your core idea of using an array of objects is totally solid, you just have a few small issues keeping it from working right.

First, let's break down the key problems in your current code:

• Missing new keyword for constructor calls: You defined a BigWinner constructor, but didn't use new when creating instances. This means your winnersArray is filled with undefined instead of actual objects.
• Invalid filename punctuation: Shane's filename uses a Chinese comma (4164,76) instead of an English decimal point—this will break the image path later.
• Unscoped variable: randomNum isn't declared with let/var/const, so it becomes a global variable (bad practice for code cleanliness).

Fixed Full Code #

HTML (your original structure stays the same) #

<div class="col-md-6 col-lg-4 col-sm-12"> 
  <img id="winnerImage" src="http://placehold.it/1500x1200" alt="Winners at Rhythm City Casino Resort®" width="1500" height="1200" class="img-thumbnail img-fluid"> 
</div> 
<div class="col-md-6 col-lg-8 col-sm-12"> 
  <h2 class="display-3" id="winnerHeader">Another Big Winner at Rhythm City!</h2> 
  <h3 id="winnerCaption">Debbie R. • $5,000 Winner.</h3> 
  <p class="text-center"><a href="winners.html" class="btn btn-primary">View Winners Gallery</a></p> 
</div>

JavaScript (corrected version) #

window.onload = choosePic;

// Constructor function for winner objects
function BigWinner(source, name, amount) {
  this.source = source;
  this.name = name;
  this.amount = amount;
}

// Use `new` to create actual BigWinner instances
const winnersArray = [
  new BigWinner("JohnD_1280.40_DeWittIA_September2017.JPG", "John D.", "$1,280"),
  new BigWinner("KaronB_13004.81_DavenportIA_September2017.JPG", "Karon B.", "$13,004"),
  new BigWinner("KyleG_1742_NewBostonIL_September2017.JPG", "Kyle G.", "$1,742"),
  new BigWinner("MarciaP_2000.40_LeClaireIA_November2017.JPG", "Marcia P.", "$2,000"),
  new BigWinner("ShaneE_4164.76_CamancheIA_September2017.JPG", "Shane E.", "$4,164")
];

function choosePic() {
  // Declare randomNum locally to avoid global pollution
  const randomNum = Math.floor(Math.random() * winnersArray.length);
  const selectedWinner = winnersArray[randomNum];
  
  // Update image and caption
  document.getElementById("winnerImage").src = `img/Casino/Winners/${selectedWinner.source}`;
  document.getElementById("winnerCaption").textContent = `${selectedWinner.name} • ${selectedWinner.amount} Winner.`;
}

Extra Tips for Cleanup #

• I swapped new Array() for the simpler array literal []—this is the standard modern JS way to create arrays.
• Used textContent instead of innerHTML for updating the caption—it's safer (avoids accidental XSS risks) and better for plain text updates.
• If your project supports ES6+, you can rewrite the constructor as a class for better readability:

class BigWinner {
  constructor(source, name, amount) {
    this.source = source;
    this.name = name;
    this.amount = amount;
  }
}

With these fixes, your random winner generator should work perfectly!

内容的提问来源于stack exchange，提问作者Amanda Schramm