模板文字函数传递的问题

Question

快速总结。我创建了一个包含一些数据的 JSON 文件（这没问题，并且显示正常），我从中创建了一个 JavaScript 函数来将所述 JSON 数据导出到 HTML （也很好）。

问题出在我添加到从以下函数创建的每个 div 的 onclick 函数中，我能够传递并记录一个数字，但由于某种原因，它不适用于字符串。

function returnHTML() {
  // HTML Element to append JSON info to
  var div = document.getElementById('list');

  // Variable to test onClick
  var test = "TEST";

  fetch("./test.json")
  .then(function(res) {
    return res.json();
  })
  .then(function(data) {
    for (var i = 0; i < (data.games.fps).length; i++) {

      var markup = `
        <div class='box' id="${data.games.fps[i].name}" onclick="myFunction(${test})">
          <div class='box__top'> ${data.games.fps[i].img} </div>
          <div class='box__bottom'> ${data.games.fps[i].name} </div>
        </div>
      `;

      div.innerHTML = div.innerHTML + markup;
    }
  })
}

// Random function to test variable passing.
function myFunction(x) {
  console.log("Clicked: " + x);
}

returnHTML();

我预计控制台的输出是：

Clicked: TEST

但是，我得到：ReferenceError: Can't find variable: TEST

Answer 1

您的代码正在输出 onclick="myFunction(TEST)"，因为这是您生成 HTML 时 test 变量的值。

添加双引号（或单引号）应该可以解决问题：

<div class='box' id="${data.games.fps[i].name}" onclick="myFunction('${test}')">

模板文字函数传递的问题

Problem with Template Literal Function Passing

javascript

html

json

ecmascript-6

template-literals