I have two different functions and I created a third function which I use to display some pieces of information. What I am trying to do is: I want to display photographerPrice which is inside of the photographerProfil function and the sum of all the likes which is inside of the photographerWork function, those two elements I want to display inside my third function likesAndPrice.
I tried to call the function likesAndPrice inside two of the functions photographerProfil and photographerWork using two arguments and two parameters: it doesn't work, it only works when I use one single parameter either for likes or the price but not both. How can I display the two of them Price and Likes in one place ?
The result I want:
photographerProfil Function code
function photographerProfil(JsonData){
const id = window.location.search.split('id=')[1];
const photographers = !id ? JsonData.photographers : JsonData.photographers.filter(photographer => photographer.id == id);
photographers.forEach(element => {
const domDiv = document.getElementById('photographer-container');
const newDiv = document.createElement('div');
const photographerPrice = element.price;
const profilTemplate = `
<div class="profil-container">
<h2>${element.name}</h2>
<p>${element.city}, ${element.country}</p>
<p class="tagline">${element.tagline}</p>
<p>${element.tags.map(tag => `<button class='tags'>#${tag}</button>`).join(" ")}</p>
<button id="test">Contactez-moi</button>
<div class="photoBox">
<img src="${element.portrait}" alt="photo">
</div>
</div>
`
newDiv.innerHTML = profilTemplate;
domDiv.appendChild(newDiv);
showModal(); // function invoked here
photographerWork(JsonData, element) // function invoked here
})
}
photographerWork Function code
function photographerWork(JsonData, homeElement){
let sum = 0;
const homeElt = homeElement.id;
JsonData.media.forEach(element => {
if(homeElt == element.photographerId){
const domDiv = document.getElementById('photographer-work');
const newDiv = document.createElement("div");
sum += element.likes;
const workTemplate = `
<div class="photo-box">
<div class="photo">
${videoOrImage(element.image, element.video, element)}
</div>
<div class="text">
<p> ${element.tags}<b>${element.price} €   ${element.likes} <i class="fas fa-heart"></i></b></p>
</div>
</div>
`
newDiv.innerHTML = workTemplate;
domDiv.appendChild(newDiv);
}
})
likesAndPrice(sum) // function invoked here
}
And the Function in which I want to display the Likes and Price
//total likes and price
function likesAndPrice(sum){
const domDiv = document.getElementById('photographer-work');
const newDiv = document.createElement("div");
const likesAndPriceTemplate = `
<span>${sum} <i class="fas fa-heart"></i></span>
<span></span>
`
newDiv.classList.add('likesAndPriceContainer')
newDiv.innerHTML = likesAndPriceTemplate;
domDiv.appendChild(newDiv)
}
question from:
https://stackoverflow.com/questions/65915754/can-i-call-the-same-function-inside-of-two-other-functions 与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…