如何在按钮中提供Java脚本变量的输出

Question

我有一个JavaScript变量“ len”，我想在按钮中获取其值，这是我的按钮代码：

<button type="button" class="btn btn-primary">
   Pending Task
   <span class="badge badge-light"></span>
   <span class="sr-only"></span> 
</button>

Answer 1

在您的情况下，我建议添加另一个<span>以使按钮的文本可寻址，而无需更改图标。因此您的按钮变为

<button type="button" class="btn btn-primary">
   <span class="content">Pending Task</span>
   <span class="badge badge-light"></span>
   <span class="sr-only"></span> 
</button>

然后在您的JavaScript中，您需要一个选择器来解决这个新的<span>。当前您的按钮没有ID，因此以下选择器也可能选择其他按钮。由于您已经在使用引导程序，因此可以使用jQuery。这使得设置文本的代码相当短：

 $( 'nav button .content' ).text( len );

---

由于您现在仅使用Vanilla JS，所以也可以像这样重写上面的行

 document.querySelector( 'nav button .content' ).textContent = len;