неопределенная переменная ошибка в JQuery

Question

У меня есть этот код, и я хочу, чтобы показать il в элементах, которые будут созданы с помощью JQuery, но il не определено: это код:

<script> 
$(document).ready(function(){ 
    var il = 1 ; 
    $("#btn1").click(function(){ 
     $("p").append(" <b>Appended text</b>."); 
    }); 
    $("#btn2").click(function(){ 
     $("ol").append("<li>Appended item " + il + " </li>"); 
var il = il + 1; 
    }); 
}); 
</script> 


<p>This is a paragraph.</p> 
<p>This is another paragraph.</p> 
<ol> 
    <li>List item 1</li> 
    <li>List item 2</li> 
    <li>List item 3</li> 
</ol> 
<button id="btn1">Append text</button> 
<button id="btn2">Append list items</button> 

это выход:

List item 1 
List item 2 
List item 3 
Appended item undefined 
Appended item undefined 

Answer 1

Просто используйте иль ++.

$(document).ready(function(){ 
    var il = 1 ; 
    $("#btn1").click(function(){ 
     $("p").append(" <b>Appended text</b>."); 
    }); 
    $("#btn2").click(function(){ 
     $("ol").append("<li>Appended item " + il + " </li>"); 
     il++; 
    }); 
}); 

Answer 2

Просто удалите var от var il = il + 1;.

Используйте только var только для объявления новой переменной.

$(document).ready(function(){ 
    var il = 1 ; 
    $("#btn1").click(function(){ 
     $("p").append(" <b>Appended text</b>."); 
    }); 
    $("#btn2").click(function(){ 
     $("ol").append("<li>Appended item " + il + " </li>"); 
     il = il + 1; 
    }); 
}); 

JSFiddle