как создать, а затем использовать свою собственную функцию внутри другого javascript - PullRequest
Новая
       53

как создать, а затем использовать свою собственную функцию внутри другого javascript

2 голосов
/ 03 августа 2020 
 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);


}

Я изо всех сил пытаюсь понять концепцию создания функции, а затем использовать ее где-то еще в программе, может кто-нибудь скажет мне, что не так с моим кодом и почему я получаю пустую строку, а не заглавное значение что было в текстовом поле, которое я ввел? Я явно неправильно понимаю всю концепцию, несмотря на то, что я много часов пытался заставить это работать

спасибо всем

Ответы [ 3 ]

2 голосов
/ 03 августа 2020

Если вы проверите этот код, 

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>
2 голосов
/ 03 августа 2020

вместо этого вызывайте значение, когда вы определяете переменную 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);
}
1 голос
/ 03 августа 2020

Я просто отвечу на ваш концептуальный вопрос, поскольку другие подробно рассмотрели ваш вопрос.

Если у вас есть две функции, как показано ниже, родитель будет хранить ваши данные, а ребенок будет использовать эти данные в любом другом месте . Единственное, что вам нужно сделать, это убедиться, что после вызова 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())
...