如何在另一个 javascript 中创建并使用您自己的函数

Question

 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);


}

我很难理解创建一个函数然后在程序的其他地方使用它的概念，有人告诉我我的代码有什么问题以及为什么我得到一个空字符串而不是什么的大写值在我输入的文本框中吗？尽管我花了很多时间试图让它发挥作用，但我显然误解了整个概念

谢谢大家

Answer 1

而是在定义变量 cityToCheck 时调用值，只需调用 add() 函数块内的值（当按钮事件被触发时）。它的工作。

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);
}

Answer 2

如果您检查此代码，

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

您在加载页面时初始取了该字段的值，默认为空字符串("")。每次单击按钮时，您都是用相同的旧值 ("") 一次又一次地执行操作，而不是每次单击按钮时都检索新值。

准确地说，检查下面代码中 add 函数的第一行，其中检索了值。

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>

Answer 3

鉴于其他人已经详细介绍了您的问题，我将只回答您的概念性问题。

如果您有如下两个函数，父项将保存您的数据，而子项将在其他任何地方使用该数据。您唯一需要做的就是确保在调用 parentFunction 之后，将结果存储在另一个变量中，以便在应用程序的其他地方使用。 'pointer' 将引用可以访问原始状态的新函数，但该函数是一个函数定义，因此您需要使用所需的函数参数来执行该函数。就像下面例子中的 pointerName()

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

     return childFunction
}

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

这是一个有趣的模式，使用相同的想法但方式略有不同。

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())

如何在另一个 javascript 中创建并使用您自己的函数

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

javascript

return

function

callback