Develop Reference

Click listener to update count

The below is part of a media player. Unfortunately, I cannot find the reason why the event listener is not registering the clicks on the hearts (when a user favorites a song). I have tried several implementations and I am researching for the last week with no success. Can you help?
How can I make the click listener to update the heart count?
HTML
<div class="player">
<div class="dashboard">
<header>
<p>Playing:</p>
</header>
<div class="cd">
<div class="cd-thumb">
</div>
</div>
<div class="control">
<div class="btn btn-random inactive">
<i class="fas fa-random"></i>
</div>
<div class="btn btn-prev">
<i class="fas fa-step-backward"></i>
</div>
<div class="btn btn-toggle-play">
<i class="fas fa-pause icon-pause"></i>
<i class="fas fa-play icon-play"></i>
</div>
<div class="btn btn-next">
<i class="fas fa-step-forward"></i>
</div>
<div class="btn btn-mute-unmute inactive">
<i class="fas fa-volume-up"></i>
</div>
</div>
</div>
<div class="playlist">
</div>
Script 1
render: function () {
let that = this;
fetch("hearts.txt")
.then(function(response) {
return response.json();
})
.then(function(heartCounts) {
let t = that.songs.map(
(t, e) => `
<div class="song ${
e === that.currentIndex ? "active" : ""
}" data-index="${e}">
<div class="thumb"
style="background-image: url('${t.image}')">
</div>
<div class="body">
<h3 class="title">${t.name}</h3>
<p class="author">${t.singer}</p>
</div>
<div class="heart" data-song-id="${e}">
<i class="fa fa-heart${
heartCounts[e] ? " active" : ""
}"></i> <span>${heartCounts[e] || 0}</span>
</div>
</div>
`
);
playlist.innerHTML = t.join("");
});
},
Script 2
const getHeartCounts = function () {
let xhr = new XMLHttpRequest();
xhr.open("GET", "return.php", true);
xhr.onreadystatechange = function () {
if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
let heartCounts = JSON.parse(xhr.responseText);
// Update the heart count displays
document.querySelectorAll(".heart i + span").forEach((countDisplay, i) => {
countDisplay.innerHTML = heartCounts[i];
});
// Update the active heart icons
document.querySelectorAll(".heart i").forEach((heart, i) => {
if (heartCounts[i] > 0) {
heart.classList.add("active");
}
});
}
};
xhr.send();
};
document.addEventListener("DOMContentLoaded", function () {
// Add click listener to update the heart count
document.querySelectorAll(".heart").forEach(function (heart) {
heart.addEventListener("click", function (e) {
let target = e.target,
songIndex = parseInt(target.dataset.songId),
countEl = target.querySelector("span"),
heartCount = countEl ? parseInt(countEl.innerHTML) : 0,
isActive = target.classList.contains("active");
// Update the heart count
heartCount = isActive ? heartCount - 1 : heartCount + 1;
if (countEl) {
countEl.innerHTML = heartCount;
}
let heartIcon = target.querySelector("i");
if (heartIcon) {
heartIcon.classList.toggle("active", !isActive);
}
// Update the heart count on the server
let xhr = new XMLHttpRequest();
xhr.open("POST", "store.php", true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send("index=" + songIndex + "&count=" + heartCount);
});
});
// Update the heart counts on page load
getHeartCounts();
});

TypeError: Cannot set property 'innerHTML' of null while using React.Js

I am new to React.js and I was creating a notes takign website using React.js and Bootstrap. I was saving the notes data in local storage for simplicity but I will upgrade this app to save the notes data in Firebase. However, when I was trying to load the notes from local storage and showing them in the a div element of id 'notes' it gives error that: TypeError: Cannot set property 'innerHTML' of null
I want to run the load notes function after all the html or every thing else is loaded.
When I run this function using button click listener after all the HTML is laoded it works.
The code is:
import React from 'react';
import './Home.css';
function Home() {
const loadNotes = () => {
let notes = localStorage.getItem('notes');
let titles = localStorage.getItem('titles');
let notesObj;
let titlesObj;
if (notes == null) {
notesObj = [];
}
else {
notesObj = JSON.parse(notes);
}
if (titles == null) {
titlesObj = [];
}
else {
titlesObj = JSON.parse(titles);
}
let html = '';
notesObj.forEach(function (element, index) {
html += `<div class="noteCard my-2 mx-2 card" style="width: 18rem;" id = ${index}>
<div class="card-body">
<h5 class="card-title">Note</h5>
<p class="card-text">${element}</p>
<button id = ${index} onclick = 'deleteNote(this.id)' class="btn btn-primary"><i class="fa fa-trash" style="margin-right: 10px;"></i>Delete Note</button>
</div>
</div>`
});
titlesObj.forEach(function (er, i) {
html = html.replace('<h5 class="card-title">Note</h5>', `<h5 class="card-title">${er}</h5>`);
});
let notesElm = document.getElementById('notes');
if (notesObj.length != 0) {
notesElm.innerHTML = html;
}
else {
notesElm.innerHTML = `<h4>Nothing to show here.</h4>`;
}
console.log('Notes shown.')
}
const addNote = () => {
let addTxt = document.getElementById('addTxt');
let notes = localStorage.getItem('notes');
let addTitle = document.getElementById('addTitle');
let titles = localStorage.getItem('titles');
let notesObj;
let titlesObj;
if (notes == null) {
notesObj = [];
}
else {
notesObj = JSON.parse(notes);
}
if (titles == null) {
titlesObj = [];
}
else {
titlesObj = JSON.parse(titles);
}
notesObj.push(addTxt.value);
titlesObj.push(addTitle.value);
localStorage.setItem('notes', JSON.stringify(notesObj));
localStorage.setItem('titles', JSON.stringify(titlesObj));
addTxt.value = '';
addTitle.value = '';
loadNotes();
console.log("Note added.")
}
return (
<div className="home">
<style type="text/css">
{`
.btn {
margin-right: 10px;t
}
.home__mainTitle {
margin-top: 60px;
}
`}
</style>
<div class="container my-3">
<h1 class='home__mainTitle'>Welcome to Magic Notes</h1>
<div class="card">
<div class="card-body" id = 'editor'>
<h5 class="card-title">Add title</h5>
<div class="form-group">
<input className='home__formInput' type="text" class="form-control" id="addTitle" rows="3" placeholder="Title"></input>
</div>
<h5 class="card-title">Add notes</h5>
<div class="form-group">
<textarea class="form-control" id="addTxt" rows="3" placeholder="Notes"></textarea>
</div>
<button class="btn btn-primary" onClick={ addNote } id='addBtn'><i class="fa fa-plus-square"></i>Add Note</button>
<button class="btn btn-primary" id='clearAllBtn'><i class="fa fa-eraser"></i>Clear All</button>
</div>
</div>
<h1 className='home__notesTitle'>Your Notes</h1>
<hr/>
<div id="notes" class="row container-fluid">
{/* <!-- <div class="noteCard my-2 mx-2 card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Note 1</h5>
<p class="card-text"></p>
Delete Note
</div>
</div> --> */}
{ loadNotes() }
</div>
</div>
</div>
);
}
export default Home;
Thanks and sorry from any bad mistakes in code or description of problem.

By trying to access the DOM and set innerHTML directly, you're sort of fighting against some of the general principals of React.
In this specific case, it's failing because the div doesn't actually exist in the DOM when you first try to mutate it.
Take a look at this very partial refactor:
import React, { useEffect, useState } from 'react';
import './Home.css';
function Home() {
const [notes, setNotes] = useState([]);
const [titles, setTitles] = useState([]);
useEffect(() => {
setNotes(JSON.parse(localStorage.getItem('notes')) ?? []);
setTitles(JSON.parse(localStorage.getItem('titles')) ?? []);
},[]);
const addNote = () => {
let addTxt = document.getElementById('addTxt');
let addTitle = document.getElementById('addTitle');
let newTitles = [...titles, addTitle.value];
let newNotes = [...notes, addTxt.value];
localStorage.setItem('notes', JSON.stringify(newNotes));
localStorage.setItem('titles', JSON.stringify(newTitles));
setNotes(newNotes)
setTitles(newTitles)
addTxt.value = '';
addTitle.value = '';
console.log("Note added.")
}
return (
<div className="home">
<style type="text/css">
{`
.btn {
margin-right: 10px;t
}
.home__mainTitle {
margin-top: 60px;
}
`}
</style>
<div class="container my-3">
<h1 class='home__mainTitle'>Welcome to Magic Notes</h1>
<div class="card">
<div class="card-body" id = 'editor'>
<h5 class="card-title">Add title</h5>
<div class="form-group">
<input className='home__formInput' type="text" class="form-control" id="addTitle" rows="3" placeholder="Title"></input>
</div>
<h5 class="card-title">Add notes</h5>
<div class="form-group">
<textarea class="form-control" id="addTxt" rows="3" placeholder="Notes"></textarea>
</div>
<button class="btn btn-primary" onClick={ addNote } id='addBtn'><i class="fa fa-plus-square"></i>Add Note</button>
<button class="btn btn-primary" id='clearAllBtn'><i class="fa fa-eraser"></i>Clear All</button>
</div>
</div>
<h1 className='home__notesTitle'>Your Notes</h1>
<hr/>
<div id="notes" class="row container-fluid">
{notes.map((note,index) => {
return <div class="noteCard my-2 mx-2 card" style={{width: '18rem'}} id={index}>
<div class="card-body">
<h5 class="card-title">{titles[index]}</h5>
<p class="card-text">{note}</p>
<button id={index} onclick='deleteNote(this.id)'
class="btn btn-primary"><i class="fa fa-trash" style={{marginRight: "10px;"}}></i>Delete Note</button>
</div>
</div>
})}
{notes.length === 0 ? <h4>Nothing to show here.</h4> : null}
</div>
</div>
</div>
);
}
export default Home;
Note how I'm using useState to store the notes and titles. Documentation: https://reactjs.org/docs/hooks-state.html
The useEffect is called when the component is mounted and loads the data from localStorage. https://reactjs.org/docs/hooks-effect.html
Then, in the body of the render, instead of calling loadNotes and trying to mutate a DOM that doesn't exist yet, I just map the notes and titles into the rendered content.
Note that this is not a complete refactor yet. For example, you may want to add listeners to your text area to keep track of the content automatically rather than pulling the content with document.getElementById. Also, delete hasn't been implemented yet, the test for localStorage content in useEffect is pretty minimal, etc. But, it's enough to get you started.

This error occurs because loadNotes() is wrapped inside notes div. So, you can check if the notes div is created in first place with if condition.
if (notesElm) {
if (notesObj.length != 0) {
notesElm.innerHTML = html;
}
else {
notesElm.innerHTML = `<h4>Nothing to show here.</h4>`;
}
}
Below is the working code:
import React from 'react';
import './Home.css';
function Home() {
const loadNotes = () => {
let notes = localStorage.getItem('notes');
let titles = localStorage.getItem('titles');
let notesObj;
let titlesObj;
if (notes == null) {
notesObj = [];
}
else {
notesObj = JSON.parse(notes);
}
if (titles == null) {
titlesObj = [];
}
else {
titlesObj = JSON.parse(titles);
}
let html = '';
notesObj.forEach(function (element, index) {
html += `<div class="noteCard my-2 mx-2 card" style="width: 18rem;" id = ${index}>
<div class="card-body">
<h5 class="card-title">Note</h5>
<p class="card-text">${element}</p>
<button id = ${index} onclick = 'deleteNote(this.id)' class="btn btn-primary"><i class="fa fa-trash" style="margin-right: 10px;"></i>Delete Note</button>
</div>
</div>`
});
titlesObj.forEach(function (er, i) {
html = html.replace('<h5 class="card-title">Note</h5>', `<h5 class="card-title">${er}</h5>`);
});
let notesElm = document.getElementById('notes');
if (notesElm) {
if (notesObj.length != 0) {
notesElm.innerHTML = html;
}
else {
notesElm.innerHTML = `<h4>Nothing to show here.</h4>`;
}
}
console.log('Notes shown.')
}
const addNote = () => {
let addTxt = document.getElementById('addTxt');
let notes = localStorage.getItem('notes');
let addTitle = document.getElementById('addTitle');
let titles = localStorage.getItem('titles');
let notesObj;
let titlesObj;
if (notes == null) {
notesObj = [];
}
else {
notesObj = JSON.parse(notes);
}
if (titles == null) {
titlesObj = [];
}
else {
titlesObj = JSON.parse(titles);
}
notesObj.push(addTxt.value);
titlesObj.push(addTitle.value);
localStorage.setItem('notes', JSON.stringify(notesObj));
localStorage.setItem('titles', JSON.stringify(titlesObj));
addTxt.value = '';
addTitle.value = '';
loadNotes();
console.log("Note added.")
}
return (
<div className="home">
<style type="text/css">
{`
.btn {
margin-right: 10px;t
}
.home__mainTitle {
margin-top: 60px;
}
`}
</style>
<div class="container my-3">
<h1 class='home__mainTitle'>Welcome to Magic Notes</h1>
<div class="card">
<div class="card-body" id = 'editor'>
<h5 class="card-title">Add title</h5>
<div class="form-group">
<input className='home__formInput' type="text" class="form-control" id="addTitle" rows="3" placeholder="Title"></input>
</div>
<h5 class="card-title">Add notes</h5>
<div class="form-group">
<textarea class="form-control" id="addTxt" rows="3" placeholder="Notes"></textarea>
</div>
<button class="btn btn-primary" onClick={ addNote } id='addBtn'><i class="fa fa-plus-square"></i>Add Note</button>
<button class="btn btn-primary" id='clearAllBtn'><i class="fa fa-eraser"></i>Clear All</button>
</div>
</div>
<h1 className='home__notesTitle'>Your Notes</h1>
<hr/>
<div id="notes" class="row container-fluid">
{/* <!-- <div class="noteCard my-2 mx-2 card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Note 1</h5>
<p class="card-text"></p>
Delete Note
</div>
</div> --> */}
{ loadNotes() }
</div>
</div>
</div>
);
}
export default Home;

Hyperhtml still re-renders whole dom

This is the code that I'm wiring which returns
var list = hyperHTML.wire(doc)`
<li class=${['chatEl', 'dropInChat', isUnsynced, docType, isChatShown, isUnread, userType].join(' ')} rel=${doc.id}>
<div class=${['chatAvatar', avatarNumCss].join(' ')} style=${avatarCss} >${[multiAvatar]}</div>
<div class='chatTypeIndicator'></div>
<div class='chatListItem'>
<div class='chatLastMessage'>
${wire(doc)`<h4><span class="userName">${name}</span>${handle !== '' ? wire(doc)`<span class="handle">#${handle}</span>` : ''}</h4>`}
${((hasEmojie) ? wire(doc)`<div class="has-emoji">${[emojione.shortnameToImage(content)]}</div>` : wire(doc)`<div class="media-attached-last-msg">${[emojione.unicodeToImage(doc.type === 'txt' ? msgTODisplay : content)]}</div>` )}
</div>
<div class=${['chat-list', 'chat-date-time'].join(' ')} data-livestamp=${posted}> ${outDate} </div>
${wire(doc)`<div class=${notifDiv}></div>`}
<div class='delBtn'>
<a class = 'blockFromChat' href="#"></a>
<a class = 'favFromChat' href="#"></a>
<a class = 'delFromChat' href="#"></a>
</div>
</div>
</li>`
return list;
Inside variables will calculate for desired output
var now = moment();
var posted = moment(doc.date);
var outDate = '';
if(now.date() === posted.date() && now.month() === posted.month() && now.year() === posted.year()){
outDate = posted.format('h:mm A');
}else if(now.date() - 7 <= posted.date() && now.month() === posted.month() && now.year() === posted.year()){
outDate = posted.format('ddd');
}else{
outDate = posted.format('MM/DD/YYYY');
}
The above is where the timestamp outDate is calculated and below is the multiavatar variable which is used in the wire()
multiAvatar.push(wire()<div class=${['groupAvatar', 'g_'+ avatarNum].join(' ')} style=${{backgroundImage: 'url(' + miniAvatarUrl + ')', backgroundSize: 'cover'}}></div>)
and the below code is the where I'm binding the dom.
bind(document.querySelector('#chatListDisplay'))`
${lastMessageList.map(function(doc){
return hyperRenderChatList(doc);
})}`
Here is the output of DOM:
<li class="chatEl dropInChat private isShown " rel="57abce9a0b4a520100a3e591" style="display: block;" __plugindomid="pgm272917962927">
<div class="chatAvatar undefined" style="background-image: url(img/ProfileIcon.svg); background-size: cover;" __plugindomid="pgm1289375326530"></div>
<div class="chatTypeIndicator"></div>
<div class="chatListItem" __plugindomid="pgm655347260182">
<div class="chatLastMessage" __plugindomid="pgm550534885881">
<h4 __plugindomid="pgm1452658781039"><span class="userName" __plugindomid="pgm188048463623">Displace Hashery </span><span class="handle" __plugindomid="pgm1268924787529">#Displace</span></h4>F
</div>
<div class="chat-list chat-date-time needs_to_be_rendered" datetime="2018-03-01T04:39:28.424Z" __plugindomid="pgm41746152612">7 minutes ago</div>
<div class="chat-message-status delivered" __plugindomid="pgm1045616861867"></div>
<div class="delBtn" __plugindomid="pgm1469370042923">
<a class="blockFromChat" href="#" __plugindomid="pgm1287760548168"></a>
<a class="favFromChat" href="#" __plugindomid="pgm648316158041"></a>
<a class="delFromChat" href="#" __plugindomid="pgm775096736090"></a>
</div>
</div>
The __plugindomid attribute is set by google-maps.

A block inside a block in React

I'm trying to do a text, a line and then a button like the following image:
I have this code and the functionality works fine but the css is wrong:
{ retrospectives.size > 0 &&
<div className='c-division-line u-margin-bottom'>
<h3>
<span> Last Retrospectives </span>
</h3>
</div>
}
{ retrospectives.size > 4 &&
<div className="c-division-line__button u-font-size--12px">
<RetroLink project={projectId} path={path}/>
</div>
}
Now, If I do this (a block of code inside other block) the css is correct but the functionality fails. How can I do this where both the css and functionality works fine?
{ retrospectives.size > 0 &&
<div className='c-division-line u-margin-bottom'>
<h3>
<span> Last Retrospectives </span>
</h3>
{ retrospectives.size > 4 &&
<div className="c-division-line__button u-font-size--12px">
<RetroLink project={projectId} path={path}/>
</div>
}
</div>
}
I thought about doing the following function but it didn't work:
buttonLink () {
const { retrospectives, projectId, path } = this.props
if (retrospectives.size > 4) {
return <div className="c-division-line__button u-font-size--12px">
<RetroLink project={projectId} path={path}/>
</div>
}
}
And calling it like this
{this.buttonLink()}

I'd recommend making your button element into a variable, like this:
const allRetrospectivesButton = retrospectives.size > 4 && (
<div className="c-division-line__button u-font-size--12px">
<RetroLink project={projectId} path={path}/>
</div>
);
return retrospectives.size > 0 && (
<div className='c-division-line u-margin-bottom'>
<h3>
<span> Last Retrospectives </span>
</h3>
{ allRetrospectivesButton }
</div>
);

VueJs not removing image after second button is clicked

So I'm trying to make a team comparison on my web app to compare their stats, the problem is that after I selected two teams then remove either one of the team, at first I succeed but when I try to remove the last one its doing nothing the last team logo is still showing up. Below is my code.
On the console it shows that selectedTeams values are undefined after remove-first and remove-second are clicked
undefined (2) [undefined, "TeamB", __ob__: Observer] 0
undefined (2) [undefined, undefined, __ob__: Observer] 1
Display Team Logo
<div class="col-md-6 first-selected">
<img id="firstteamlogo" :src="selectedTeams[0] | spacetodash | useLGLogo" v-if="selectedTeams[0] || selectedTeams[0] != undefined">
</div>
<div class="col-md-6 second-selected">
<img id="secondteamlogo" :src="selectedTeams[1] | spacetodash | useLGLogo" v-if="selectedTeams[1] || selectedTeams[1] != undefined">
</div>
Remove Team Logo
<div class="add-area">
<i class="fa fa-times remove-first" aria-hidden="true" v-if="selectedTeams[0]" v-on:click="removeTeams"></i>
<i class="fa fa-plus select-first" aria-hidden="true" v-else></i>
<span v-if="selectedTeams[0]">vs</span>
<span v-else>Comparison</span>
<i class="fa fa-times remove-second" aria-hidden="true" v-if="selectedTeams[1]" v-on:click="removeTeams"></i>
<i class="fa fa-plus select-second" aria-hidden="true" v-else></i>
</div>
Team Selection
<div class="team-selection" v-if="showTeamSelection">
<div class="team-row">
<div class="col-md-3" v-for="(team, index) in teams" v-if="index < 4">
<div class="team-logo">
<img class="team" :src="team.clubName | spacetodash | useMDLogo" :id="team.clubName | removespace" :data-team-name="team.clubName" :data-team-id="team.teamId" v-on:click="selectTeams">
</div>
</div>
</div>
<div class="team-row">
<div class="col-md-3" v-for="(team, index) in teams" v-if="index > 3">
<div class="team-logo">
<img class="team" :src="team.clubName | spacetodash | useMDLogo" :id="team.clubName | removespace" :data-team-name="team.clubName" :data-team-id="team.teamId" v-on:click="selectTeams">
</div>
</div>
</div>
</div>
VueJs Code
export default {
data: function(){
return {
teams: {},
isTeamsSelected: true,
isPlayersSelected: false,
showTeamSelection: true,
selectedTeams: [],
selectedPlayers: [],
}
},
mixins: [
filters,
methods
],
methods: {
selectTeams(e) {
if(this.selectedTeams.length < 2){
this.selectedTeams.push(e.target.dataset.teamName);
if(this.selectedTeams.length == 2){
this.showTeamSelection = false;
}
console.log(this.selectedTeams);
}
return false;
},
removeTeams(e) {
let removeTeam = e.target.classList.value;
this.showTeamSelection = true;
if(removeTeam.indexOf('remove-first') >= 0){
this.selectedTeams[0] = undefined;
console.log(this.selectedTeams[0], this.selectedTeams, 0);
}
if(removeTeam.indexOf('remove-second') >= 0){
this.selectedTeams[1] = undefined;
console.log(this.selectedTeams[1], this.selectedTeams, 1);
}
},
},
mounted: function() {
let self = this;
this.getCurrentSeasonTeams().then(function(response){
if( response.status == 200 && response.data.length > 0 ) {
self.teams = response.data;
}
});
}
}

Just pass the team you want to remove.
<i class="fa fa-times" aria-hidden="true" v-if="selectedTeams[0]" v-on:click="removeTeams(selectedTeams[0])"></i>
And change your removeTeam method.
removeTeams(team) {
this.selectedTeams.splice(this.selectedTeams.indexOf(team), 1)
this.showTeamSelection = true;
}