在innerHTML中的文本之間插入變量

Question

如果我希望這個 onClick function 生成具有正確文件名的標簽（即“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之后的結束符' 。