Помощь с HTML и JS связью

Question

Столкнулся с такой проблемой, что не могу правильно подстроиться или даже подвязать html и js вместе.

Делаю всё для игры, чисто человеческий интерес.

Собственно, в чём суть всего: С помощью js и html и хочу отправлять статус в Discord, через Discord Rich Presence. Человеку открывается самое приложение(пока что оно запускается у меня только через 'npm start', но хочу перевести в .exe), где он может выбрать себе организацию и должность. Мне необходимо сделать так, чтобы он должен был сначала выбрать организацию, а затем ему появлялись только доступные должности для этой организации.

Вот код, который я предоставляю, для возможной подсказки или совета, как лучше поступить. Спасибо Вам всем. HTML:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
  </head>
  <body>
    <p></p>
    <p>Author: <a href="" target="_blank"></a></p>
    <div style="text-align: center;">
      <p align="center">Выберите организацию и должность:</p>
      <select id="factions-list" style="width: 240px;">
      </select>
      <select id="jobs-list" style="width: 240px;">
      </select>
      <button id="set-job">Применить</button>
    </div>
  </body>
  <script src="app.js"></script>
</html>

JS:

const { ipcRenderer } = require('electron');


const factions = [
    {
        state: 'FIB',
        largeImageKey: 'vmp', 
        smallImageKey: 'fib', 
        smallImageText: 'FIB',
    },
    {
        state: 'LSPD',
        largeImageKey: 'vmp', 
        smallImageKey: 'fib', 
        smallImageText: 'FIB',
    }
];

const jobs = [
    {
        state: 'Trainee [1]',
        largeImageKey: 'vmp', 
        smallImageKey: 'fib', 
        smallImageText: 'FIB',
    },
    {
        state: 'Junior Agent [2]',
        largeImageKey: 'vmp', 
        smallImageKey: 'fib', 
        smallImageText: 'FIB',
    },
    {
        state: 'Agent [3]',
        largeImageKey: 'vmp', 
        smallImageKey: 'fib', 
        smallImageText: 'FIB',
    },
    {
        state: 'Senior Agent [4]',
        largeImageKey: 'vmp', 
        smallImageKey: 'fib', 
        smallImageText: 'FIB',
    },
    {
        state: 'Special Agent [5]',
        largeImageKey: 'vmp', 
        smallImageKey: 'fib', 
        smallImageText: 'FIB',
    },
    {
        state: 'Secret Agent [6]',
        largeImageKey: 'vmp', 
        smallImageKey: 'fib', 
        smallImageText: 'FIB',
    },
    {
        state: 'Deputy Head [7]',
        largeImageKey: 'vmp', 
        smallImageKey: 'fib', 
        smallImageText: 'FIB',
    },
    {
        state: 'Head [8]',
        largeImageKey: 'vmp', 
        smallImageKey: 'fib', 
        smallImageText: 'FIB',
    },
    {
        state: 'Deputy Director [9]',
        largeImageKey: 'vmp', 
        smallImageKey: 'fib', 
        smallImageText: 'FIB',
    },
    {
        state: 'Director [10]',
        largeImageKey: 'vmp', 
        smallImageKey: 'fib', 
        smallImageText: 'FIB',
    }
];

const fselectList = document.getElementById('factions-list');

factions.map((data, key) => {
    fselectList.options[fselectList.options.length] = new Option(data.state, key);
})

const selectList = document.getElementById('jobs-list');

jobs.map((data, key) => {
    selectList.options[selectList.options.length] = new Option(data.state, key);
})

document.getElementById('set-job').onclick = () => {
    ipcRenderer.send('set-rpc', jobs[selectList.value]);
}

JS вызов меню:

const { app, BrowserWindow, Tray, Menu, ipcMain } = require('electron');
const RPC = require('./rpc');

if (require('electron-squirrel-startup')) {
    app.quit();
}

const iconPath = './icon.png';

let mainWindow;

let tray = null;

const createWindow = () => {
    mainWindow = new BrowserWindow(
        {
            width: 1024,
            height: 768,
            webPreferences: {
                nodeIntegration: true,
                //devTools: true,
            },
            center: true,
            icon: iconPath,
        });

    mainWindow.setMenu(null);

    mainWindow.loadFile('index.html');

    mainWindow.webContents.on('new-window', (e, url) => {
        e.preventDefault();
        require('electron').shell.openExternal(url);
    });

    mainWindow.webContents.openDevTools();

    mainWindow.on('closed', () => {
        mainWindow = null;
    });

    tray = new Tray(iconPath);

    const contextMenu = Menu.buildFromTemplate([
        {
            label: 'Открыть', click: () => {
                mainWindow.show()
            }
        },

        {
            role: 'quit'
        },
    ]);

    tray.setToolTip('test');

    tray.setContextMenu(contextMenu);

    mainWindow.on('minimize', (e) => {
        e.preventDefault();
        mainWindow.hide();
    });
}

app.on('ready', createWindow);

app.on('window-all-closed', () => {
    if (process.platform !== 'darwin') {
        app.quit();
    }
});

ipcMain.on('set-rpc', (...data) => {
    RPC.updatePresence(data[1]);
})

app.on('activate', () => {
    if (mainWindow === null) {
        createWindow();
    }
});

И сам вывод в DRP:

const fetch = require('node-fetch');

class _RPC {
    constructor() {
        this.client = require('discord-rich-presence')('');
        this.state = {};
    }
    async getServerInfo() {
        const _request = await fetch('url');
        const request = await _request.json();

        return {
            players: request['PlayerCount'],
            maxPlayers: request['MaxPlayers'],
        };
    }

    async updatePresence(obj) {
        this.state = obj;
        const data = await this.getServerInfo();
        console.log(obj);
        this.client.updatePresence(
            {
                state: obj.state,
                details: ' ' + data.players + '/' + data.maxPlayers,
                largeImageKey: obj.largeImageKey,
                smallImageKey: obj.smallImageKey,
                largeImageText: '',
                smallImageText: obj.smallImageText,
                instance: true,
            });
    }
}

const RPC = new _RPC();

(() => {
    setInterval(() => {
        if (Object.keys(RPC.state).length === 0) return;

        RPC.updatePresence(RPC.state);
    }, 30000);
})();


module.exports = RPC;

@webDev_ спасибо доброму человеку за помощь. Хотелось бы узнать совета, как правильно сделать, чтобы в зависимости от выбора в factions-list - менялся выбор в jobs-list. Есть какие-то идеи или подсказки, как это сделать или же проверить?

Answer 1

const factions = [{
    state: 'FIB',
    largeImageKey: 'vmp',
    smallImageKey: 'fib',
    smallImageText: 'FIB',
  },
  {
    state: 'LSPD',
    largeImageKey: 'vmp',
    smallImageKey: 'fib',
    smallImageText: 'FIB',
  }
];

const jobs = [{
    state: 'Trainee [1]',
    largeImageKey: 'vmp',
    smallImageKey: 'fib',
    smallImageText: 'FIB',
  },
  {
    state: 'Junior Agent [2]',
    largeImageKey: 'vmp',
    smallImageKey: 'fib',
    smallImageText: 'FIB',
  },
  {
    state: 'Agent [3]',
    largeImageKey: 'vmp',
    smallImageKey: 'fib',
    smallImageText: 'FIB',
  },
  {
    state: 'Senior Agent [4]',
    largeImageKey: 'vmp',
    smallImageKey: 'fib',
    smallImageText: 'FIB',
  },
  {
    state: 'Special Agent [5]',
    largeImageKey: 'vmp',
    smallImageKey: 'fib',
    smallImageText: 'FIB',
  },
  {
    state: 'Secret Agent [6]',
    largeImageKey: 'vmp',
    smallImageKey: 'fib',
    smallImageText: 'FIB',
  },
  {
    state: 'Deputy Head [7]',
    largeImageKey: 'vmp',
    smallImageKey: 'fib',
    smallImageText: 'FIB',
  },
  {
    state: 'Head [8]',
    largeImageKey: 'vmp',
    smallImageKey: 'fib',
    smallImageText: 'FIB',
  },
  {
    state: 'Deputy Director [9]',
    largeImageKey: 'vmp',
    smallImageKey: 'fib',
    smallImageText: 'FIB',
  },
  {
    state: 'Director [10]',
    largeImageKey: 'vmp',
    smallImageKey: 'fib',
    smallImageText: 'FIB',
  }
];

const fselectList = document.getElementById('factions-list');

const selectList = document.getElementById('jobs-list');

factions.map((data, key) => {
  fselectList.options[key + 1] = new Option(data.state, key);
});

fselectList.addEventListener("change", () => {
  selectList.disabled = false;
  jobs.map((data, key) => {
    selectList.options[key] = new Option(data.state, key);
  })

});

document.getElementById('set-job').onclick = () => {
  ipcRenderer.send('set-rpc', jobs[selectList.value]);
}

<div style="text-align: center;">
  <p align="center">Выберите организацию и должность:</p>
  <select id="factions-list" style="width: 240px;">
    <option disabled selected>Должность</option>
  </select>
  <select id="jobs-list" disabled style="width: 240px;">
  </select>
  <button id="set-job">Применить</button>
</div>

Answer 2

@webDev_ спасибо доброму человеку за помощь. Хотелось бы узнать совета, как правильно сделать, чтобы в зависимости от выбора в factions-list - менялся выбор в jobs-list. Есть какие-то идеи или подсказки, как это сделать или же проверить?

БЛОГ НА HUSL

Помощь с HTML и JS связью

Ответы (2 шт):