Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

210
Views
Using custom Javascript in Streamlabs

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>

about 4 years ago · Juan Pablo Isaza
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!