如何统计innerHTML中的变量？

Question

如何计算innerHTML中的变量？

JS

var counter = 1; 
counter++; 
alert(counter); 

$(".end").html('Test ' + counter+1 + ' Test'); 

HTML

<p class="end"></p> 

在我JSfiddle例子，它的工作原理警报的例子，但不是在innerHTML的元素。为什么？它是如何工作的？

Answer 1

因为你在做字符串连接。

当前评估

'Test ' + counter+1 + ' Test' 
'Test 2' +1 + ' Test' 
'Test 21' + ' Test' 
'Test 21 Test' 

你应该换你calcualtion insde ()

$(".end").html('Test ' + (counter+1) + ' Test'); 

当您添加()这需要更高的优先级，并首先计算表达式。

当前评估

'Test ' + (counter+1) + ' Test' 
'Test ' + 3 + ' Test' 
'Test 3' + ' Test' 
'Test 3 Test' 

Answer 2

试试这个，
你必须用括号来覆盖它。否则，它会将其视为字符串，并将concat而不是评估表达式。

var counter = 1; 
 
counter++; 
 
alert(counter); 
 

 
$(".end").html('Test ' + (counter+1) + ' Test');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<p class="end"></p>

Answer 3

是不是adding.Just行为像string.Add一些()。然后它被添加。尝试这个$(".end").html('Test ' +(counter + 1) + ' Test');

var counter = 1; 
 
counter++; 
 
alert(counter); 
 

 
$(".end").html('Test ' +(counter + 1) + ' Test');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<p class="end"></p>

Answer 4

这是因为最初Test + counter这转换co温特INT 2串因此除了发生，因为串尝试包裹那些在括号内，因为（计数器+ 1）

$(".end").html('Test ' + (counter+1) + ' Test'); 

检查fiddle

欲了解更多信息有关+运营商看到这个specification

Answer 5

只需使用括号，它会工作：

var counter = 1; 
counter++; 
alert(counter); 

$(".end").html('Test ' + (counter+1) + ' Test'); 

Answer 6

你必须添加括号到您的代码JS Fiddle。 像这样

$(".end").html('Test ' +(counter + 1)+ ' Test'); 

Answer 7

使用parseInt的数学计算其他明智它唯一的字符串连接。

var counter = 1; 
 
counter++; 
 
alert(counter); 
 

 
$(".end").html('Test ' + parseInt(counter+1) + ' Test');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<p class="end"></p>