如何統計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>