hagay bar hagay bar - 3 months ago 7
Javascript Question

.replace is not a function - couldn't figure it out

This is a new edit to my question, hopefully it will meet the criteria and be considered eligible.

First, I managed to solve the problem. I will now describe the situation and what I think the solution that solve the problem.

My code gets a string (a call number) as an input, re-formats it, parse it to float, and return the call number location within a given set of ranges.

The code is composed of two functions: 1.

formatCallNumber(callNum)
which does the text manipulation to the input. 2.
SortCallNum(callNumInput)
- responsible on the sorting to ranges part.

The problem was in passing values of call number ranges from the sorting function (no.2) to the formatting function (no.1). Although I parsed those values as strings in the sorting function, the
.replace
function produced an error. The solution that I (think) worked, was to parse the values to strings in the formatting function.

The code of the two functions below is updated and seems to be working as expected:

function 1 - formatting function:

function formatCallNumber(callNum){
var formatedCallNum = String(callNum);
formatedCallNum = formatedCallNum.replace(/\D/g,''); // remove all but digits chars from the string (whitespace, dots, etc)
formatedCallNum = "0." + formatedCallNum; // add "0." to the callNumber string
formatedCallNum = parseFloat(formatedCallNum); // parse as float - so it could be compared with other decimals
return (formatedCallNum);
}


Function 2 - the sorting function:

function SortCallNum(callNumInput){
// data [test only]
var shelves = {
"S1" : {"callStart":"100","callEnd": "223.456", "id": 1},
"S2" : {"callStart":"223.457","callEnd": "334", "id": 2},
"S3" : {"callStart":"335","callEnd": "535", "id": 3},
"S4" : {"callStart":"536","callEnd": "638", "id": 4},
"S5" : {"callStart":"639","callEnd": "847", "id": 5}
};
var matchId = "";
document.getElementById("somthing").innerHTML += "you typed the number: " + callNumInput; // output of callNumInput (as inserted by user)
formatedCallNum = formatCallNumber(callNumInput);

// traverse into shelves object : iteration of objects (key = s1-s5)
for (var key in shelves) {
if (shelves.hasOwnProperty(key)) {
matchId = shelves[key].id;
document.getElementById("somthing").innerHTML += "<br>" + (" -- " + "CallEnd is: " + " -- " + shelves[key].callEnd); // display values of object shelves.key.callend
document.getElementById("somthing").innerHTML += "<br>" + (" -- " + "CallStart is: " + " -- " + shelves[key].callStart); // display values of object shelves.key.callend
var formatedCallRangeStart = formatCallNumber(shelves[key].callStart);
var formatedCallRangeEnd = formatCallNumber(shelves[key].callEnd);
console.log(formatedCallRangeStart);
console.log(formatedCallRangeEnd);
if ((formatedCallNum <= 0) || (formatedCallNum > 1)){alert('call number not in proper range'); break;}
if ((formatedCallRangeStart <= formatedCallNum)&&(formatedCallRangeEnd >= formatedCallNum)){break;}
}
}


Thanks for all the help.

Answer

As I can see, everythign should work as expected. It's important to pass a string into SortCallNum, and not a number.

function SortCallNum(callNumInput){
    // data [test only]
    var shelves = {
        "S1" : {"callStart":100,"callEnd": "223", "id": 1},
        "S2" : {"callStart":224,"callEnd": "334", "id": 2},
        "S3" : {"callStart":335,"callEnd": "535", "id": 3},
        "S4" : {"callStart":536,"callEnd": "638", "id": 4},
        "S5" : {"callStart":639,"callEnd": "847", "id": 5}
    };
    var matchId = "";
    document.getElementById("somthing").innerHTML += "you typed the number: " +     callNumInput; // output of callNumInput (as inserted by user) 
    formatedCallNum = formatCallNumber(callNumInput);

    // traverse into shelves object : iteration of objects (key = s1-s5)
    for (var key in shelves) {
        if (shelves.hasOwnProperty(key)) {
            matchId = shelves[key].id;
            document.getElementById("somthing").innerHTML += "<br>" + (" -- " + "CallEnd is: " + " -- " + shelves[key].callEnd); // display values of object shelves.key.callend
            document.getElementById("somthing").innerHTML += "<br>" + (" -- " + "CallStart is: " + " -- " + shelves[key].callStart); // display values of object shelves.key.callend
            var formatedCallRangeStart = String(shelves[key].callStart);
            formatedCallRangeStart = formatCallNumber(formatedCallRangeStart);
            var formatedCallRangeEnd = String(shelves[key].callEnd);
            formatedCallRangeEnd = formatCallNumber(formatedCallRangeEnd);
            matchId = shelves[key].id;
            if ((formatedCallRangeStart <= formatedCallNum)&&(formatedCallRangeEnd >= formatedCallNum)){
                break;
            }
        }
    }
    alert (matchId);
}

function formatCallNumber(callNum){

    // callNum = prompt('enter a call number: ');
    formattedCallNum = callNum.replace(/\D/g,''); // remove all but digits chars    from the string (whitespace, dots, etc)
    formattedCallNum = "0." + formattedCallNum; // add "0." to the callNumber string
    formattedCallNum = parseFloat(formattedCallNum); // parse as float - so it could be compared with other decimals
    return (formattedCallNum);
}

SortCallNum('1337')
<div id="somthing"></div>

So, this would work SortCallNum('1337'), this not SortCallNum(1337)...

Another possible cause is that you trust the return-value from prompt blindly.

<button type="button" onclick="var callNumInput = prompt('enter a call number: '); SortCallNum(callNumInput);"> SortCallNum(test)</button>

When the user clicks the OK button, text entered in the input field is returned. If the user clicks OK without entering any text, an empty string is returned. If the user clicks the Cancel button, this function returns null.
https://developer.mozilla.org/en-US/docs/Web/API/Window/prompt#Example

A bit of sanitization should help:

if (callNumInput == null) {
  throw new Error('You have to insert a number between 0 and 999.')
}
Comments