如何在按钮中输出 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 中，您需要一个 selector 来解决这个新的 <span>。当前您的按钮没有 ID，因此以下 select 或者可能还有 select 其他按钮。由于您已经在使用 bootstrap，因此您可以使用 jQuery。这使得设置文本的代码相当短：

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

由于您现在只是在使用 vanilla JS，所以上面的行也可以这样重写

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

如何在按钮中输出 java 脚本变量

How to give output of a java script variable in a button

html

javascript

css

dom

twitter-bootstrap-3