Как сделать генератор случайных ключей JavaScript?

Question

[Дмитрий]

Вообщем есть код:

randomKeyGenerator() {
            const letters = 'abcdefghijklmnopqrstuvwxyz0123456789'
            let word = ''

            for (let i = 0; i < 15; i++) {
                word += letters.charAt(Math.floor(Math.random() * letters.length))
            }

            this.randomKey = word.substr(0, 5) + '-' + word.substr(5, 5) + '-' + word.substr(10, 5)

            return this.randomKey.toUpperCase()
        },

Но как вывести его в html.

Answer 1

[Алексей Ярков]

document.querySelector('селектор DOM элемента, куда будем выводить ключ').innerHTML = randomKeyGenerator();

Comments

[Дмитрий]

А можно по подробней

[Алексей Ярков]

Дмитрий, Я готовый код привел. Куда подробнее? Что именно вы не понимаете?

[Дмитрий]

Алексей Ярков, Ну не работает, видимо в самом коде или как?

[Алексей Ярков]

Дмитрий, У меня в консоли работает. Значит пример, который вы привели, неполный.

[Дмитрий]

Алексей Ярков, Я нашел этот код, можете поправить?

[Алексей Ярков]

Дмитрий, вы читали что я написал? Код рабочий, у меня все работает.
Как вы его используете - я не знаю, а вы не показываете. Тут нечего исправлять.

[Дмитрий]

Подключаю скрипт : <script src="js/test.js"></script>

А вывожу так <span id="testscript" class="h5"></span>

[Алексей Ярков]

Дмитрий, ну судя по вашим вопросам надо как минимум скрипт подключать ПОСЛЕ разметки, в конце body.

[Дмитрий]

Алексей Ярков, Подключал в конце body.

В консоле такая ошибка: Uncaught SyntaxError: Unexpected token {

[Алексей Ярков]

Дмитрий, тогда полный листинг скрипта в студию

[Дмитрий]

Алексей Ярков,

Vue.http.options.emulateJSON = true;
let app = new Vue({
    el: '#app',
    watch: {
        object(newName) {
            localStorage.object = newName
        }
    },
    async mounted() {
        await this.randomList()
        await this.rollFreeKeys()
        if (localStorage.object) this.freeItem = localStorage.object
        setInterval(() => {
            let rand = 6 - 0.5 + ((Math.random() - 0.5) * 1.2)
            let plusOrMinus = Math.random() < 0.5 ? -(rand / 2) : rand;
            plusOrMinus = Math.round(plusOrMinus);
            return this.online += plusOrMinus;
        }, 4500)
        setInterval(() => {
            this.keysOpened += 1
        }, 4500)
        setInterval(() => {
            return this.fullItems.unshift(this.liveItems[Math.floor(Math.random() * this.liveItems.length)])
        }, 4500)
        this.fetchAsync()
    },
    data() {
        return {
            db: [],
            rollKeys: [
                { name: "Sekiro™: Shadows Die Twice", appid: "814380", link: "https://vk.com/feed", price: "99", oldprice: "1999" },
            ],
            liveItems: [
                { name: "Sekiro™: Shadows Die Twice", appid: "814380" },
            ],
            locationName: location.hostname,
            online: 103,
            keysOpened: 65473,
            fullItems: [],
            freeItem: null,
            randomKey: '',
            showBlock: true,
            roll: false,
            rolledFreeKeys: [],
            players: [
                {invited: 4611, keys: 557, name: 'Alex Blue' , image: 'https://steamcdn-a.akamaihd.net/steamcommunity/public/images/avatars/9a/9a5db4e0255fb2f12860d59cd476e4c4a3acd060_medium.jpg'},
                {invited: 3967, keys: 449, name: 'PullAnxiety' , image: 'https://steamcdn-a.akamaihd.net/steamcommunity/public/images/avatars/06/0619bcf6a337458e5aeadf8d11ef5963c126695d_medium.jpg'},
                {invited: 3215, keys: 397, name: 'Jaquim Chan' , image: 'https://steamcdn-a.akamaihd.net/steamcommunity/public/images/avatars/bb/bbf7f3a915933b898e061aad817c900fa00cc684_medium.jpg'},
                {invited: 2087, keys: 257, name: 'KaisMan (Trading)' , image: 'https://steamcdn-a.akamaihd.net/steamcommunity/public/images/avatars/6c/6cd1d824f7929a139ab31b563cca0743f23b3c73_medium.jpg'},
                {invited: 1732, keys: 193, name: 'karabiˈnjɛːri' , image: 'https://steamcdn-a.akamaihd.net/steamcommunity/public/images/avatars/9d/9d92e7c708e0ad117b6d27db2b9448a7b2bfa7ce_medium.jpg'},
                {invited: 1243, keys: 147, name: 'Kraska CSGO-SKINS.COM' , image: 'https://steamcdn-a.akamaihd.net/steamcommunity/public/images/avatars/7a/7ace6bd604668710be2d1dfc8e8b748e43e1a42d_medium.jpg'},
                {invited: 1197, keys: 138, name: 'Neil Long-Dong Tyson' , image: 'https://steamcdn-a.akamaihd.net/steamcommunity/public/images/avatars/68/68a3bfcc2fb0544a6101de5b89adf912459c1fbc_medium.jpg'},
                {invited: 946, keys: 101, name: 'フラッシュバング' , image: 'https://steamcdn-a.akamaihd.net/steamcommunity/public/images/avatars/bd/bd683ada493795f471d1c4b3050425b53ca4603b_medium.jpg'},
                {invited: 785, keys: 96, name: '✪ Ho-Lee Fak' , image: 'https://steamcdn-a.akamaihd.net/steamcommunity/public/images/avatars/20/20b352d3e40d4396a245d1c5679bc7a1c788dc44_medium.jpg'},
                {invited: 400, keys: 70, name: 'Killer^' , image: 'https://steamcdn-a.akamaihd.net/steamcommunity/public/images/avatars/d6/d6b6aa1dfaf1934867094d7e5349bfc2f9d2bd63_medium.jpg'},
            ],
            showMenu: false
        }
    },
    methods: {
        rollFreeKeys() {
            this.rolledFreeKeys = this.rollKeys
            return this.shuffle(this.rolledFreeKeys)
        },
        randomList() {
            this.fullItems = this.liveItems
            return this.shuffle(this.liveItems)
        },
        shuffle(arra1) {
            let ctr = arra1.length;
            let temp;
            let index;

            // While there are elements in the array
            while (ctr > 0) {
                // Pick a random index
                index = Math.floor(Math.random() * ctr);
                // Decrease ctr by 1
                ctr--;
                // And swap the last element with it
                temp = arra1[ctr];
                arra1[ctr] = arra1[index];
                arra1[index] = temp;
            }
            return arra1;
        },
        async fetchAsync() {
            const response = await fetch('js/db.json')
            const json = await response.json()
            const db = await json.items

            db.forEach(item => {
                item.image = `https://steamcdn-a.akamaihd.net/steam/apps/${item.appid}/header.jpg`
            })
            this.db = db
            return this.db
        },
        randomKeyGenerator() {
            const letters = 'abcdefghijklmnopqrstuvwxyz0123456789'
            let word = ''

            for (let i = 0; i < 15; i++) {
                word += letters.charAt(Math.floor(Math.random() * letters.length))
            }

            this.randomKey = word.substr(0, 5) + '-' + word.substr(5, 2) + '***-**' + word.substr(12, 3)

            return this.randomKey.toUpperCase()
        },
        openFreeKey() {
            setTimeout(() => {
                this.roll = true
            }, 500)

            setTimeout(() => {
                this.showBlock = !this.showBlock

                this.freeItem = {
                    appid: this.rollKeys[21].appid,
                    name: this.rollKeys[21].name,
                    link: this.rollKeys[21].link,
                    price: this.rollKeys[21].price,
                    oldprice: this.rollKeys[21].oldprice,
                    image: `https://steamcdn-a.akamaihd.net/steam/apps/${this.rollKeys[21].appid}/header.jpg`,
                    key: this.randomKeyGenerator()
                }

                this.fullItems.unshift(this.freeItem)
            }, 10000)
        }
    }
})

[Алексей Ярков]

Дмитрий, чтоб вам так все в жизни объясняли, как вы вопросы задаете =)
Где тег Vue? Это во-первых.
А во-вторых как вы дошли до использования Vue и не знаете элементарных вещей?
Или документация для слабаков?
<span>{{ randomKeyGenerator() }}</span>