幻灯片功能问题求助：代码仅图片定时更新，需同步人物姓名职位名言

Hey there! I can see exactly what's going wrong here—your text content isn't updating alongside the images because of a few common coding slips. Let's break down the issues and fix them right away:

Key Problems in Your Code #

• Variable Name Collisions: You've reused the same variable names (testname, testjob, testpa) for both your DOM element references and your data arrays. This overwrites the DOM references entirely, so when you try to update the text, you're actually modifying the arrays instead of the page elements.
• Chinese Quotation Marks: You used Chinese-style quotes (“”) for your array values—JavaScript only recognizes English quotes (""), which would cause syntax errors that break your code.
• Incorrect Content Update Method: If your text elements are regular display elements (like <p> or <div>), using .value won't work—this property is meant for input fields. You need to use .textContent (for plain text) or .innerHTML (if you need HTML formatting).

Corrected Code #

Here's the fixed version with explanations in comments:

// Get DOM elements (use unique variable names to avoid collisions)
var img1 = document.getElementById("img1");
var nameElement = document.getElementById("testname");
var jobElement = document.getElementById("testjob");
var quoteElement = document.getElementById("testpa");

var currentPos = 0;

// Use English quotes and separate, clear array names
var images = ["ch1.jpg", "ch2.jpg", "ch3.jpg"];
var names = ["John Smith", "Jan Rosso", "Raphael Matthew"];
var jobs = ["Manager", "Director", "Supervisor"];
var quotes = ["I like this company", "It’s amazing", "Wonderful atmosphere"];

function volgendefoto() {
  // Reset position when we reach the end of the array
  if (++currentPos >= images.length) currentPos = 0;
  
  // Update image source
  img1.src = images[currentPos];
  
  // Update text content using textContent (works for most display elements)
  nameElement.textContent = names[currentPos];
  jobElement.textContent = jobs[currentPos];
  quoteElement.textContent = quotes[currentPos];
}

// Start the slideshow interval
setInterval(volgendefoto, 3000);

// Your test function (updated to match new variable names)
function test(){
  document.getElementById('text').textContent = nameElement.textContent;
}

Quick Notes #

• If your testname, testjob, testpa are actually input fields (like <input> or <textarea>), you can switch back to using .value instead of .textContent.
• Double-check that your HTML element IDs match exactly what you're using in getElementById—typos here are a super common culprit!

内容的提问来源于stack exchange，提问作者Botros Wadie