I'm adding a 'speaking' class to show a border when the user is speaking. When I speaking, the code working:
if (options.uid == volume.uid && volume.level > volumeLevel) {
document.getElementById(options.uid).classList.add("speaking");
}else if (options.uid == volume.uid && volume.level < volumeLevel) {
document.getElementById(options.uid).classList.remove("speaking");
}
But other users in other pages, get a error: TypeError: Cannot read property 'classList' of null
if(options.uid != volume.uid && volume.level > volumeLevel) {
document.getElementById(options.uid).classList.add("speaking");
}else if (options.uid != volume.uid && volume.level < volumeLevel) {
document.getElementById(options.uid).classList.remove("speaking");
}
Full code
var volumeLevel=15;
rtc.on("volume-indicator", volumes => {
volumes.forEach((volume) => {
if (options.uid == volume.uid && volume.level > volumeLevel) {
document.getElementById(options.uid).classList.add("speaking");
}else if (options.uid == volume.uid && volume.level < volumeLevel) {
document.getElementById(options.uid).classList.remove("speaking");
}
if (options.uid != volume.uid && volume.level > volumeLevel) {
document.getElementById(options.uid).classList.add("speaking");
}else if (options.uid != volume.uid && volume.level < volumeLevel) {
document.getElementById(options.uid).classList.remove("speaking");
}
});
})
It looks like options.uid isn't on the DOM if document.getElementById() is returning null