[HELP] Is it possible to add classes to html elements in lua?

FiveM Resource Development & Modding Discussion
, , ,
1

Hi all, I currently define all my animations using classList.toggle in js but I need to setup the animations in a way that SetNuiFocus is not needed. I want to setup a keypress event in lua which then adds classes to my html elements in order to make them animate.

2

You can just check in Lua if a key is pressed for example using IsControlJustPressed() and then when that happened you can use SendNuiMessage() with an json array telling which element to move for example

3

I’ve been trying this for days now and I can’t seem to figure out what i’m missing.

Here’s an example code practically identical to my actual js I just have far more classes in the list and my lua function. This actually works and the animation activates in game but obviously the "SetNuiFocus(true, false) disables my keyboard from being used entirely after the keybind is pressed. I’ve seen multiple in game ui’s not require SetNuiFocus so If I can do it without that would be perfect.
LUA:

> Citizen.CreateThread(function()
    while true do
        Citizen.Wait(0)
        if IsControlJustPressed(1, 311) then
            SetNuiFocus(true, false)
            SendNUIMessage({
                variable = true,
            })
        end
    end
end)

JS:

> window.addEventListener('message', function(event)
    {
        var item = event.data;
    if(item.variable){
      document.addEventListener("keydown", function(e) {
        let key = e.which || e.keyCode;
        if (key == 75 || key == 75) { 
          container.classList.add("containerMove");
          } else if(key == 77){
          container2.classList.add("container2Move");
          }
          })
        document.addEventListener("keyup", function(e) {
        let key = e.which || e.keyCode;
        if (key == 75 || key == 75) { 
            container.classList.remove("containerMove");
            } else if(key == 77){
            container2.classList.remove("container2Move");
        }
      })
    }
   });

I’ve tried simply using SendNuiMessage, but without SetNuiFocus, the animation simply doesnt work. It has completely baffled me. That’s why I was trying to scrap linking the js and lua together and hopefully just doing all the classList.add 'ing in lua instead.