Field Value of Loaded List Item is Unexpectedly Returning “NaN”

Question

I'm trying to query the last item in the current list where status = New, so I can auto-populate one of the fields based on the previous item's value. Executing "alert(collListItem);" displays "[object] [Object]", and the onQuerySucceeded function is in fact firing, however, the value it's inputing is "NaN" when it should be the previous number field value +1 (the previous value is 1).

var collListItem;
function QueryLastNewItem() {
    var clientContext = new SP.ClientContext();
    var List = clientContext.get_web().get_lists().getByTitle('Tracker');
    var query = new SP.CamlQuery();
    query.set_viewXml("<View><RowLimit>1</RowLimit><Query><OrderBy><FieldRef Name='ID' Ascending='False' /></OrderBy><Where><Eq><FieldRef Name='Status' /><Value Type='Choice'>New</Value></Eq></Where></Query></View>");
    collListItem = List.getItems(query);
    clientContext.load(collListItem);
    alert(collListItem);
    clientContext.executeQueryAsync(Function.createDelegate(this, 
this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed));         
}

function onQuerySucceeded(sender, args) { 
    //Once the list item is loaded, populate number field with the previous number field plus 1
    if ($("select[id^='Status']").val() == "New") 
        {
        $("input[id^='Number']").val(collListItem.get_item("Number")+1);
        }
} 

function onQueryFailed(sender, args) {
    alert('Request failed. \nError: ' + args.get_message() + '\nStackTrace: ' + args.get_stackTrace());
}

Since the query seems to be successful, I'm confused as to why the value isn't being assigned appropriately. I thought it may be because "collListItem" could be considered a collection of objects, but I have set the row limit to 1 in the CAML query, so it should only contain 1 item.

Any help or suggestions are much appreciated.

EDIT: Working code:

var collListItem;
function QueryLastNewItem() {
    var clientContext = new SP.ClientContext();
    var List = clientContext.get_web().get_lists().getByTitle('Tracker');
    var query = new SP.CamlQuery();
    query.set_viewXml("<View><RowLimit>1</RowLimit><Query><OrderBy><FieldRef Name='ID' Ascending='False' /></OrderBy><Where><Eq><FieldRef Name='Status' /><Value Type='Text'>New</Value></Eq></Where></Query></View>");
    collListItem = List.getItems(query);
    clientContext.load(collListItem);
    clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed));        
}

function onQuerySucceeded(sender, args) { 
    //Once the list item is loaded for the most recent New Lead, populate the subject number field with the previous subject number plus 1
    var listItemEnumerator = collListItem.getEnumerator();
    while (listItemEnumerator.moveNext()) {
        var oListItem = listItemEnumerator.get_current();       
    }
    if ($("select[id^='Status']").val() == "New Lead")
        {
        $("input[id^='Number']").val(oListItem.get_item('Number')+1);
        }
} 

function onQueryFailed(sender, args) {
    //Alert error message if list item above fails to load
    alert('Request failed. \nError: ' + args.get_message() + '\nStackTrace: ' + args.get_stackTrace());
}

Answer 1

Even collListItem contains one item only, it's a collection https://docs.microsoft.com/en-us/previous-versions/office/sharepoint-visio/jj245102(v=office.15).

So iterate the collection to get the first one.

var collListItem;
function QueryLastNewItem() {
    var clientContext = new SP.ClientContext();
    var List = clientContext.get_web().get_lists().getByTitle('Tracker');
    var query = new SP.CamlQuery();
    query.set_viewXml("<View><RowLimit>1</RowLimit><Query><OrderBy><FieldRef Name='ID' Ascending='False' /></OrderBy><Where><Eq><FieldRef Name='Status' /><Value Type='Choice'>New</Value></Eq></Where></Query></View>");
    collListItem = List.getItems(query);
    clientContext.load(collListItem);
    alert(collListItem);
    clientContext.executeQueryAsync(Function.createDelegate(this, 
this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed));         
}

function onQuerySucceeded(sender, args) { 
    var listItemInfo = '';

    var listItemEnumerator = collListItem.getEnumerator();

    while (listItemEnumerator.moveNext()) {
        var oListItem = listItemEnumerator.get_current();
         alert(oListItem.get_item('Number'));        
    }
} 

function onQueryFailed(sender, args) {
    alert('Request failed. \nError: ' + args.get_message() + '\nStackTrace: ' + args.get_stackTrace());
}

Answer 2

You should first convert string to Int using parseInt function. Below is your modified code.

var collListItem;
function QueryLastNewItem() {
    var clientContext = new SP.ClientContext();
    var List = clientContext.get_web().get_lists().getByTitle('Tracker');
    var query = new SP.CamlQuery();
    query.set_viewXml("<View><RowLimit>1</RowLimit><Query><OrderBy><FieldRef Name='ID' Ascending='False' /></OrderBy><Where><Eq><FieldRef Name='Status' /><Value Type='Choice'>New</Value></Eq></Where></Query></View>");
    collListItem = List.getItems(query);
    clientContext.load(collListItem);
    alert(collListItem);
    clientContext.executeQueryAsync(Function.createDelegate(this, 
this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed));         
}

function onQuerySucceeded(sender, args) { 
    //Once the list item is loaded, populate number field with the previous number field plus 1
    if ($("select[id^='Is_x0020_this_x0020_item_x002']").val() == "New") 
        {
        var previousValue = parseInt(collListItem.get_item("Number"));
        $("input[id^='Number']").val(previousValue+1);
        }
} 

function onQueryFailed(sender, args) {
    alert('Request failed. \nError: ' + args.get_message() + '\nStackTrace: ' + args.get_stackTrace());
}