在innerHTML中的文本之间插入变量

Question

如果我希望这个 onClick 函数生成具有正确文件名的标签（即“img/18.png”），我的语法有什么问题？Chromium 控制台不会报告任何错误，也不会生成任何 HTML。

我正在使用一个名为 Seedrandom.min.js 的库来为随机生成器提供种子。

    function newCard() {
const randGeneratorFrom = seed => {
  const generator = new Math.seedrandom(seed)
  return (min, max) => Math.floor(generator() * max) + min
}

const now = new Date();
const seed = [now.getHours(), now.getMilliseconds(), now.getMinutes(), now.getSeconds(), now.getMilliseconds(), now.getDay()].join(':')
const rand = randGeneratorFrom(seed)

console.info(seed)
var firstCard = rand(1, 78);
document.getElementById("card1").innerHTML = "<img src='img/", firstCard, ".png>";
}

    <button onclick="newCard()">Click me</button>
    <div id="card1"></div>
    

Answer 1

这不是 javascript 中字符串连接的工作方式：

"<img src='img/", firstCard, ".png>"

您可以使用+运算符：

"<img src='img/" + firstCard + ".png'>"

或者使用模板文字（注意反引号）：

`<img src='img/${firstCard}.png'>"`

'注意：您的代码还缺少 .之后的结束语.png。