Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

212
Visualizações
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
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda