Changing a calculated column from text to number within a default display webpart by jslink

Question

I have a calculated column with the format of "number" in a list. However, within the display form webpart, the default settings actually returns a string with quotes " instead of returning it as a number on the screen.

Not wanting the quotes in this field, I have been trying to use some script to remove them. From looking at the page, I wrote something like this:

function calColFix() {
    var planLink = document.getElementById("SPFieldCalculated");

    if (planLink) {
        // RemoveChar is a custom function that returns a string with all
        // the designated character(s) eliminated (in this case, the quotes get removed)
        planLink.innerHTML = RemoveChar(planLink.innerHTML, '"');
    }
}

I then called this by putting this within the JS file:

_spBodyOnLoadFunctionNames.push("calColFix");

And, it isn't working. On checking the execution, the text apparently have not yet been generated by the time the code was ran. I am seeing what options there may be for removing the quotes for a particular calculated field on the display form view.

I also tried content editor instead of JSLink, and it is not cooperating either. So, seeing if there are other ways this can be achieved!

Thanks!! :>

---

Edits - added the line that we are dealing with...

So, I actually realized that the issue is because this really isn't innerHTML (shhhh, I know), it worked after I updated the function. The issue with execution was not replicated after I rewrited parts of the code, so I wasn't sure what might have prompted it to be span...../span when I was trying it initially.

Answer 1

So, I think it worked now after the edit when I no longer use innerHTML~

// This worked just fine in JSLink
_spBodyOnLoadFunctionNames.push("calColFix");

//-----------------------------------------------------------------------------
// Utility Functions
//
// Function Name        isNumeric
// Function Purpose:    Check if number is numeric or not
//
// Function Name:       RemoveChar
// Function Purpose:    Removes all characters from the string and returns it
//
// Function Name:       getAttrVal
// Function Purpose:    Get the value of a certain attribute of a HTML tag

function getAttrVal (tag, attr) {
    //tag is the DOM object
    //attr is the attribute name
    return BLABLABLA;
}

//
// Function Name:       getElementsById
// Function Purpose:    Returns array of all DOM elements with that ID
//
// Function Name:       calColFix
// Function Purpose:    Make plan link work again!

function calColFix() {
    var planLink;
    var arrCalCol = getElementsById("SPFieldCalculated");

    // Loop through all the items to find the ones I wanted (links)
    for (i=0; i < arrCalCol.length; i++) {
        // Custom criteria, all my links are in <a ...> tags
        if (arrCalCol[i].innerHTML.search("&lt;a") != -1 ||     arrCalCol[i].innerHTML.search("<a") != -1) {
            // Get the element & make some new ones
            var planLink = arrCalCol[i];
            var node = document.createElement("a");
            var pic = document.createElement("img");

            // Get the nice little link icon!
            pic.src = "/teams/tkstd/SiteAssets/link.png"
            pic.style = "height:35px; width:35px";

            // And add it to the <a> element, and put the rest of the stuff in
            node.appendChild(pic);
            node.href = getAttrVal(planLink.innerHTML,"href");
            node.target = getAttrVal(planLink.innerHTML,"target");
            node.alt = getAttrVal(planLink.innerHTML,"alt");

            // my getElementsByID() may have some bugs, catching if something went wrong. 
            if (planLink) {
                // Clean the text and add the new elements!
                planLink.innerHTML = "";
                planLink.appendChild(node);
            }
        }
    }
}