how to create and then use your own function inside another javascript

Admin 1
Viewed 39
 var cityToCheck = document.getElementById("text").value;

 var btn = document.querySelector("button");
 btn.addEventListener('click', add);



 function makeCapital(str) {

var firstChar= str.slice(0,1); 
var otherChars = str.slice(1);
firstChar = firstChar.toUpperCase(); 
otherChars = otherChars.toLowerCase(); 
var cappedString = firstChar + otherChars; 
 return cappedString;
}

function add() { 

cityToCheck = makeCapital(cityToCheck);
console.log(cityToCheck);


}

Im struggling to understnad the concept of creating a function and then using it somewhere else in the program, cna someone tell me what is wrong with my code and why I am getting an empty string and not a capitalised value of what was in the text box i typed in? im clearly mis understanding the whole concept despite my hours of trying to get this to work

thanks all

return callback function javascript
3 Answers

instead call the value when you define the variable cityToCheck just call the value inside the add() function block (when the event of the button is triggered). Its working.

var cityToCheck = document.getElementById("text");
var btn = document.querySelector("button");
btn.addEventListener('click', add);

function makeCapital(str) {
    var firstChar = str.slice(0,1); 
    var otherChars = str.slice(1);
    firstChar = firstChar.toUpperCase(); 
    otherChars = otherChars.toLowerCase(); 
    var cappedString = firstChar + otherChars; 
    console.log(cappedString);
    return cappedString;
}

function add() { 
cityToCheck = makeCapital(cityToCheck.value);
}

user_136623390

If you check this code,

var cityToCheck = document.getElementById("text").value;

You have taken the value of the field initially when the page is loaded which is an empty string("") by default. And each time when you click the button, you have done the operation with the same old value("") again and again instead of retrieving the new value each and every time when the button is clicked.

To be precise, check the first line of add function in the code below where the value is retrieved.

var btn = document.querySelector("button");
 btn.addEventListener('click', add);
var cityField = document.getElementById("text");


 function makeCapital(str) {

var firstChar= str.slice(0,1); 
var otherChars = str.slice(1);
firstChar = firstChar.toUpperCase(); 
otherChars = otherChars.toLowerCase(); 
var cappedString = firstChar + otherChars; 
 return cappedString;
}

function add() { 
var cityToCheck = cityField.value;
cityToCheck = makeCapital(cityToCheck);
console.log(cityToCheck);


}
<input id='text'/>
<button> makeCapital </button>

user_68618380

I will just answer your conceptual question seeing as others have covered your question in detail.

If you have two functions like below, the parent will hold your data, and the child will use that data anywhere else. The only thing you need to do is make sure that after you call parentFunction, you store the result in another variable, to use elsewhere in the application. That 'pointer' will refer to your new function which will have access to the original state, but the function is a function definition, so you need to execute the function using the desired function arguments. Like pointerName() in the below example

const parentFunction = (dataToStoreAndCanBeUsedLater) => {
     //can access parent state 
     const childFunction = () => {
         console.log(dataToStoreAndCanBeUsedLater)
     }

     return childFunction
}

const pointerName = parentFunction('data')
pointerName()

Here's an interesting pattern using that same idea but in a slightly different way.

const addMinusChain = (initialNumber) => {

    const add = (n) => {
        initialNumber = initialNumber + n
        return addMinusChain(initialNumber)
    }

    const minus = (n) => {
        initialNumber = initialNumber - n
        return addMinusChain(initialNumber)
    }

    const getNumber = () => {
        return initialNumber
    }


    return {
        add,
        minus,
        getNumber
    }

}

console.log(addMinusChain(20).add(5).minus(25).getNumber())
user_48307180
Related