如何使用反引号在点击时调用函数答案

【问题标题】：How to use backtick to call function on click如何使用反引号在点击时调用函数
【发布时间】：2020-09-04 06:23:53
【问题描述】：

尝试使用反引号，但它在加载时调用函数。 validateRequest() 函数应该在点击按钮时调用

<p id="demo"></p>

<script>

function validateRequest(){
    alert("");
}

const markUp = `<button onclick="${validateRequest()}">Click me</button>`;

document.getElementById("demo").innerHTML = markUp;

</script>

【问题讨论】：

这种方式一旦使用validateRequest()赋值，就会被执行，函数结果会添加到onclick事件中，即undefined。而是尝试onclick="validateRequest()"。
会调用 validateRequest，并将返回的值（未定义）插入到 HTML 中 - 不知道你为什么要诚实地使用这样的模式
eslint 在字符串模板中使用时会产生 no-unused-vars。 @norbitrial

标签： javascript html template-literals

【解决方案1】：

正如我在评论部分提到的，一旦你以这种方式使用模板文字，validateRequest 函数将被评估，这意味着它将返回undefined。因此，undefined 将被添加到 onclick 事件中，一旦您单击屏幕上的按钮，该事件将不起作用。

根据我的理解，一旦您按照建议的方式使用 onclick="validateRequest()"，您就会收到来自 ESLint 的 no-unused-vars 警告。

您可以尝试以下方法：

const validateRequest = () => alert("I'm working");
const button = document.createElement('button');
button.onclick = validateRequest;
button.innerHTML = 'Click me';

document.getElementById("demo").appendChild(button);

&lt;p id="demo"&gt;&lt;/p&gt;

我希望这会有所帮助！

【讨论】：

【解决方案2】：

反引号或模板文字使用“插值”来插入变量。因此，你的代码：

const markUp = `<button onclick="${validateRequest()}">Click me</button>`;

插值后

const markUp = `<button onclick="undefined">Click me</button>`;

如何解决这个问题？？ ~ 很简单，去掉占位符 ${} 即可。以下是工作代码：

 const markUp = `<button onclick="validateRequest()">Click me</button>`;

【讨论】：

当您以这种方式使用onclick 分配时，您是否看到no-unused-vars ESLint 警告的任何解决方案？我在评论部分提出了该解决方案，但 OP 指出了该警告。只是感兴趣。
嗨，我已经验证了上面的代码，它工作正常。据我所知，no-unused-vars ESLint 警告{与模板文字无关}。即使我们在 {ES Lint} 中使用了传统的双引号或单引号符号，它也会出现。为了消除警告，我们需要在纯 javascript 中调用函数 validateRequest()。查看此链接：eslint.org/docs/2.0.0/rules/no-unused-vars

【解决方案3】：

在 onclick 属性中调用函数时无需提及 ${}，如果您可以定义您的问题，那么我可能会提供帮助:)

<p id="demo"></p>

<script>

function validateRequest(){
    alert("");
}

const markUp = `<button onclick="validateRequest()">Click me</button>`;

document.getElementById("demo").innerHTML = markUp;

</script>

【讨论】：