如何在另一个 javascript 中创建然后使用自己的函数答案

【问题标题】：how to create and then use your own function inside another javascript如何在另一个 javascript 中创建然后使用自己的函数
【发布时间】：2020-08-03 03:55:29
【问题描述】：

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


}

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

谢谢大家

【问题讨论】：

标签： javascript function callback return

【解决方案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);
}

【讨论】：

哦，我的，它的工作，我比我想象的要近得多，非常非常高兴，谢谢你的帮助
非常非常接近，需要在点击按钮后获取input的值，否则会得到一个空值（input标签的初始值）
但是为什么它以前不起作用，我认为这与我的 cityToCheck var 等于值是不是一样的？

【解决方案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>

【讨论】：

【解决方案3】：

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

如果您有以下两个函数，则父级将保存您的数据，而子级将在其他任何地方使用该数据。您唯一需要做的就是确保在调用 parentFunction 之后，将结果存储在另一个变量中，以便在应用程序的其他地方使用。该“指针”将引用您可以访问原始状态的新函数，但该函数是一个函数定义，因此您需要使用所需的函数参数执行该函数。就像下面例子中的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())

【讨论】：