Ah, Javascript.
I had been looking forward to learning Javascript since the very beginning of my Flatiron School journey. Going into Software Engineering, I knew that I liked frontend development and I was ready dive in.
The learning curve was very steep. Switching from Ruby brain to Javascript brain was not an easy transition for me. Although I kept up with the lessons and labs throughout the module, I didn't really start to put all the pieces together until I started on my project. The whole time, I just wanted to add my plants, and track their care, and make it all look pretty. But, I kept getting stuck on return values.
While coding out the plant "show" view of my application, I noticed a floating "undefined" at the bottom of the page. It wasn't coded in the HTML and I spent hours trying to make it go away. Turns out it was from my plantShowRender() function.
plantShowRender() {
this.plantIndex.style.display = 'none';
this.plantShow.style.display = 'block';
this.plantShow.innerHTML = `
<div class="section" id="top-button">
<button id="back-to-index" class="button">Back to All Plants</button>
</div>
<div class="plant-row" id="plant-info-row">
<div class="plant-col" id="plant-${this.id}-image">
<img class="displayimg" src="${this.image_url}" alt="${this.species}" width="100%">
</div>
<div class="plant-col" id="plant-${this.id}-care-info">
<h2>${this.nickname}</h2>
<h3>${this.species}</h3>
<p>${this.description}</p>
<p><strong>Current Planter:</strong> ${this.pot}</p>
<div id="plant-edit-buttons">
<button class="update button" data-id="${this.id}">Update</button>
<button class="delete button" data-id="${this.id}">Delete</button>
</div>
</div>
</div>
<div class="section" id="plant-care-row">
<div class="section" id="care-button-container">
<button id="care-button" class="give-care button" data-id="${this.id}">Give Plant Care</button>
</div>
<div class="care-title">
<h2>Plant Care History</h2>
</div>
</div>`
this.addPlantCares();
}
Above was my original code.
As I have learned, the value of your return will replace the function call. When I called plantsShowRender(), the return value was "undefined".
viewPlantInfo = (e) => {
const plant = Plant.all.find(p => p.id == e.target.dataset.id)
this.plantShow.append(plant.plantShowRender())
this.addButtonListeners()
}
Thus, the little floating "undefined" at the bottom of the page.
I updated my code to add a return statement to plantShowRender(), as seen here:
plantShowRender() {
this.plantIndex.style.display = 'none';
this.plantShow.style.display = 'block';
this.showElement.innerHTML = `
<div class="section" id="top-button">
<button id="back-to-index" class="button">Back to All Plants</button>
</div>
<div class="care-title">
<h2>Plant Care History</h2>
</div>
</div>`;
return this.showElement
}
Then, I called the function on this - the plant instance in this case - and called this.addPlantCares in the viewPlantInfo() function.
Return values certainly aren't thing only thing that I struggled with in this project, but the more I messed up, the more I learned. In the end, I am really proud of what I created and look forward to working on more frontend projects.
Top comments (1)
Good afternoon, if you are interested in large plant pots, then I can advise an excellent website getpotted.com, where you can find everything you need at a nice price. This is not the first year I have used this site and I can only leave a positive review. Many things related to plants at home and elsewhere, I have bought exclusively from this place. Good luck!!!