Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

209
Vistas
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 la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda