使用innerHTML时onclick传字符串参数报错，数字参数正常求助

问题描述 #

我想从API获取数据并展示，给每个数据条目添加按钮，点击就能把条目加入收藏。但尝试把item.name作为参数传递给点击事件函数时，出现了如下错误：

index.html:1 Uncaught ReferenceError: Buzz is not defined
at HTMLButtonElement.onclick (index.html:1:10)

不过传递item.id时却能正常工作，相关代码如下：

async function getAllBeers() {
  const response = await fetch("https://api.punkapi.com/v2/beers");
  const data = await response.json();
  displayAllBeers(data);
}
getAllBeers();

function displayAllBeers(data) {
  const beersContainer = document.getElementById("beersContainer");
  data.map((beer) => {
    console.log(beer.name);
    beersContainer.innerHTML += `
      <div class='beerContainer'>
          <h3 class='name'>${beer.name}</h3>
          <img src='${beer.image_url}'></img>
          <p>${beer.description}</p>
          <button onclick='addToFav(${beer.name})'>Add to Favourite</button>
      </div>
      `;
  });
}

function addToFav(name) {
  console.log(name);
}

问题原因 #

问题出在内联onclick传递字符串参数时未加引号：

• 当你写addToFav(${beer.name})，生成的HTML会变成addToFav(Buzz)——这里的Buzz被浏览器当成了一个未定义的变量，而非字符串，所以报错。
• 而beer.id是数字类型，直接传递addToFav(${beer.id})会变成addToFav(1)，数字不需要引号包裹，因此能正常运行。

修复方案 #

方案1：给字符串参数添加引号

修改按钮的onclick代码，给字符串参数套上双引号：

<button onclick='addToFav("${beer.name}")'>Add to Favourite</button>

生成的HTML会变成addToFav("Buzz")，此时Buzz会被识别为字符串参数，不会报错。

方案2：使用事件监听替代内联onclick（更推荐）

内联事件处理容易引发字符串转义问题，还不利于代码维护。推荐动态创建元素并绑定事件：

function displayAllBeers(data) {
  const beersContainer = document.getElementById("beersContainer");
  data.forEach((beer) => {
    const beerDiv = document.createElement('div');
    beerDiv.className = 'beerContainer';
    
    beerDiv.innerHTML = `
      <h3 class='name'>${beer.name}</h3>
      <img src='${beer.image_url}'></img>
      <p>${beer.description}</p>
    `;
    
    const favBtn = document.createElement('button');
    favBtn.textContent = 'Add to Favourite';
    favBtn.addEventListener('click', () => addToFav(beer.name));
    
    beerDiv.appendChild(favBtn);
    beersContainer.appendChild(beerDiv);
  });
}

这种方式通过闭包直接获取beer.name，无需处理字符串转义，更安全灵活。

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