JS - zwróć wartość i wywołaj funkcję ze zwróconą wartością

Question

Cześć, w js potrzebuję dwóch funkcji. Pierwsza robi obliczenia i zwraca wartość zmiennej przez return, a następnie wywołuje drugą funkcję. Ta druga, używa parametru z pierwszej funkcji do swoich obliczeń. Problem jest w tym, że nie mogę jednocześnie przekazać wartości do drugiej funkcji i jej wywołać przez pierwszą :/

Jak to rozwiązać? Poniżej załączam kod

		function addition () {
				var first = 1;
				var second = 2;
				var sum = first + second;
				console.log(sum);
				//nie można jednocześnie zwrócić wartości i wywołać funkcji?
				multiplication();
				return sum
		}
		function multiplication () {
				var multiSum = addition;
				var multi2 = addition * 2;
				console.log(multi2); //nan :(
		}
		addition();

 

Comments

W drugiej funkcji podstawiasz zmienną (addition), która nie jest wcześniej zadeklarowana.

Answer 1

function multiplication (sum) {
        var multi2 = sum * 2;
        console.log(multi2); //6
        return multi2
}

function addition () {
        var first = 1;
        var second = 2;
        var sum = first + second;
        console.log(sum); //3
        return multiplication(sum);
}

console.log(addition()); //6

Czy o to chodziło?
Funkcja addition zwraca jako swój return wynik funkcji multiplication, do której wpierw przekazuje wynik swojej operacji sumowania.

Comments

Tak, wpadałem na podobną odpowiedź, dziękuję za naprowadzenie. Wywołujemy w kodzie 2 funkcję, a pierwsza znajduje się w kodzie tej drugiej. Błędem był brak nawiasu. Dziękuję i pozdrawiam

function costam (num) {
		return num;
}
function alertcos () {
		var myNum = costam(5);
		alert(myNum);
}

alertcos();

 

---

Cieszę się, powodzenia :)

---

Podczas rozbudowy kodu, napotkałem kolejną trudność. W aplikacji chciałbym zrobić proste menu w formie listy w której każdy element, ma cyfrowe ID.

	<nav class="nav">
		<ul class="main-menu">
			<li id="100">100</li>
			<li id="200">200</li>
			<li id="300">300</li>
		</ul>
	</nav>

Następnie ustawiam event listenera na każdy z tych elementów (wiem, że można zrobić w pętli, ale dajny dla uproszczenia w ten sposób);

    var liElement = document.getElementById("100");
       liElement.addEventListener("click", getDimension);
   //kolejne dla następnych

Funkcja getDimensions ma wykorzystać id klikniętego elementu, jako parametru, do stworzenia diva o odpowiednich wymiarów. W jaki sposób przekazać jej parametr ID, pobrany z klikniętego elementu?

Przykładowy kod mógłby wyglądać tak (ale nie działa). 

function getDimensions () {
    newDiv = document.createElement('div');//tutaj wartość klikniętego elementu
    var num = eventListeners();
    canvasDiv.style.width = num + "px";
    canvasDiv.style.height = num + "px";
    //potem dodać element do drzewa dom
}
function eventListeners () {
    //jak przekazać, który element był kliknięty?
    var liElement = document.getElementById("100");
        liElement.addEventListener("click", getDimensions);
    var liElement2 = document.getElementById("200");
        liElement2.addEventListener("click", getDimensions);
    var liElement3 = document.getElementById("300");
        liElement3.addEventListener("click", getDimensions);
}
eventListeners();

Gdy dostaję się do wydarzenie przez this, jslint wyrzuca błąd o naruszeniu trybu strict.

---

function getDimension(event){
	console.log(event.currentTarget.id); //100
}

var liElement = document.getElementById("100");
liElement.addEventListener("click", getDimension);

Gdy podpinasz pod event jakąś funkcję, do niej przekazywany jest atrybut który zawiera dane obecnego wydarzenia - w tym obiekt, który bierze w nim udział - "currentTarget". Używając kodu powyżej możesz dostać się do jego ID.

---

Dziękuję, kod działa. Czy to rozwiązanie, jest lepsze od użycia this.id, które także działa?

---

 przekazywany jest atrybut który zawiera dane obecnego wydarzenia - w tym obiekt, który bierze w nim udział - "currentTarget"

Nie. Przekazywany jest obiekt event, którego atrybutem jest currentTarget.

Co do event.target vs event.currentTarget, to miej świadomość, że jest pomiędzy nimi różnica spowodowana istnieniem zjawiska "bąbelkowania" zdarzeń w DOM:

http://www.quirksmode.org/js/events_order.html

https://developer.mozilla.org/en-US/docs/Web/API/Event/target

https://developer.mozilla.org/en-US/docs/Web/API/Event/currentTarget

Przykład: http://codepen.io/ChrissP92/pen/RGNRxZ?editors=1010

Jest jeszcze parę innych: https://developer.mozilla.org/en-US/docs/Web/API/Event/Comparison_of_Event_Targets

Answer 2

Nie bardzo rozumiem co chcesz osiągnąć.

var multiSum = addition; <- w tym miejscu przypisujesz funkcję do zmiennej.

 var multi2 = addition * 2; <- a tutaj próbujesz pomnożyć funkcję przez 2 -> stąd NaN

Comments

Chodzi o przekazanie funkcji, jako parametru drugiej funkcji i jej wywołanie.

---

że tak?

function addition ( callback ) {
  var first = 1;
  var second = 2;
  var sum = first + second;
  
  callback( sum );
  return sum;
}
function multiplication ( arg ) {
  var multi2 = arg * 2;
  console.log(multi2); 
}

addition( multiplication );