时间戳

首页 > 解决方案 > 我正在尝试在 javascript 生成的 html 中生成一个 onclick 方法，它给了我一些非常奇怪的结果

javascript - 我正在尝试在 javascript 生成的 html 中生成一个 onclick 方法，它给了我一些非常奇怪的结果

问题描述

所以这是行

'<button onclick="deleteElement("' + instrument.name + '")">Delete this instrument</button>'

当给定乐器“Clean Male Tenor Vocals”时，我希望这只会输出到以下html

<button onclick="deleteElement("Clean Male Tenor Vocals")">Delete this instrument</button>

但是，事情停止了工作，当我在检查器中检查它实际生成的 html 时，它决定生成以下内容。 

<button onclick="deleteElement(" clean="" tenor="" male="" vocals")"="">Delete this instrument</button>

我很困惑，无法弄清楚这里发生了什么。

我认为我缺少一些小东西，或者不了解 javascript 或 html，我对 web 开发人员还是相当陌生。

标签： javascripthtml

解决方案

您过度使用双引号，这会使 HTML 解析器感到困惑。

一个好的经验法则：对 HTML 元素使用双引号，对 JavaScript 使用单引号。或者更好的是，使用反引号来制作模板文字。

使用反引号的示例：

let instrument = { name: 'Clean Male Tenor Vocals' };
let myString =
  `<button onclick="deleteElement('${instrument.name}')">Delete this instrument</button>`

这将产生：

<button onclick="deleteElement('Clean Male Tenor Vocals')">Delete this instrument</button>

推荐阅读