I'm currently experimenting with Streamlabs and how to customize the chat box of a stream. I'm pretty new to HTML/CSS/Javascript and I'm having issue executing the code to modify elements of my CSS sheet through the custom HTML/CSS/JS option.
The goal of the JS script I'm trying to write is simply to randomize the appearance left/right of a border on the side of my div on every message.
The issue I'm encountering is that I'm not sure how to retrieve the div id="{messageId}" from the DOM in my JS script. That value is generated by streamlabs under that syntax. As you can see in the code I'm trying with :
document.getElementById(obj['detail']['messageId']).style.borderight = "7px solid";
But it doesn't seem to be working properly. I can't really find any documentation on the Streamlabs website or ressources on how to retrieve any of the values in brackets from the DOM so I was wondering if that was something that was standard and I just don't know how to manipulate it or i'm just missing something in my script in order to make it work.
document.addEventListener('onEventReceived', function(obj) {
var number = getRandomInt(1, 10);
if (isEven(number)) {
document.getElementById(obj['detail']['messageId']).style.borderight = "7px solid";
} else {
document.getElementById(obj['detail']['messageId']).style.borderLeft = "7px solid";
};
});
function getRandomInt(min, max) {
min = Math.ceil(min);
max = Math.floor(max);
return Math.floor(Math.random() * (max - min + 1)) + min;
}
function isEven(value) {
if (value % 2 == 0)
return true;
else
return false;
}
<div id="log" class="sl__chat__layout">
</div>
<script type="text/template" id="chatlist_item">
<div id="{messageId}" data-from="{from}" data-id="{messageId}">
<div class="wrapper" id="wrapper">
<span class="meta" style="color: {color}">
<span class="badges"></span>
<span class="name">{from}</span>
</span>
<span class="message">
{message}
</span>
</div>
</div>
</script>