如何统计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'

你应该包括你的计算方法()

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

添加优先级较高的()并在表达式中首先计算。

当前评估

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

Answer 2

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

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

您必须在代码JS Fiddle中添加括号。 喜欢这个

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

Answer 4

不添加。只需像字符串一样。添加一些()。然后添加.try $(".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 5

这是因为最初Test + counter这会将counter int 2转换为string，因此在字符串尝试将其包含在括号中时会发生添加（counter + 1）

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

检查fiddle

有关+运算符的详细信息，请参阅此specification

Answer 6

只需使用Brackets，就可以了：

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

$(".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>