如何在按钮中输出 javascript 变量

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;