Ответы пользователя по тегу JavaScript
  • Как сделать, чтобы встроенный обработчик события убрал сам себя?

    muscimolus
    @muscimolus
    Так это не делается. Запомни элемент, назначь строковый обработчик, и в конце этого обработчика назначь этому же обработчику то же событие, но со значением null.

    P.S. Если примером, то так:
    <html>
        <head></head>
        <body>
            <button id="someButton">Click me</button>
            <script type="module">
                const someButton = document.querySelector('#someButton')
                someButton.onclick = e => {
                    console.log(e)
                    // сам себя открепляет
                    someButton.onclick = null
                }
            </script>
        </body>
    </html>

    После того, как ты используешь обработчик - ты его затрёшь в элементе значением null.
    Но я бы на твоём месте посмотрел в сторону addEventListener с параметром once: true, т.к. на одной кнопке может висеть как одно событие, так и несколько побочных которые, которые никогда не открепятся.
    Ответ написан
    Комментировать
  • Как сделать чтобы при наведении на блок не скроллило?

    muscimolus
    @muscimolus
    Там всё проще:

    <body style="height: 200vh;">
        <div class="swiper" style="width: 50vw; height: 50vh; margin: auto; background-color: black;"></div>
    </body>

    const swiper = document.querySelector('.swiper')
            if(swiper){
                swiper.onmouseenter = () => {
                    const X = window.scrollX
                    const Y = window.scrollY
                    window.onscroll = () => {
                        window.scrollTo(X, Y)
                    }
                    swiper.onmouseleave = () => {
                        window.onscroll = () => null
                    }
                }
            }


    А прокрутку окна как таковую - отменить вообще нельзя, поэтому просто скроллишь окно в предыдущее положение.
    Ответ написан
  • Как лучше сделать переключение языков на многостр. сайте?(без бэка)?

    muscimolus
    @muscimolus
    Если просто и грязно, и для (*поправка) пары страниц, то:

    <html>
        <head>
            <style>
                :root[lang="ru-RU"] [lang="ru-RU"] {
                    display: block;
                }
                :root[lang="ru-RU"] [lang="en-US"] {
                    display: none;
                }
                :root[lang="en-US"] [lang="en-US"] {
                    display: block;
                }
                :root[lang="en-US"] [lang="ru-RU"] {
                    display: none;
                }
            </style>
        </head>
        <body>
            <div id="root">
                <div lang="ru-RU">
                    Содержимое на русском
                </div>
                <div lang="en-US">
                    Content in english
                </div>
                <button id="languageSwitcher"></button>
                <script type="module">
                    const { documentElement } = document
                    documentElement.setAttribute('lang', navigator.language)
                    const languageSwitcherButton = documentElement.querySelector('button#languageSwitcher')
                    const determineLanguage = () => documentElement.getAttribute('lang') === 'ru-RU' ? 'Switch to English' : 'Переключить на Русский'
                    languageSwitcherButton.textContent = determineLanguage()
                    languageSwitcherButton.onclick = ({ target }) => {
                        documentElement.getAttribute('lang') === 'en-US' ? (
                            documentElement.setAttribute('lang', 'ru-RU')
                        ) : documentElement.setAttribute('lang', 'en-US')
                        target.textContent = determineLanguage()
                    }
                </script>
            </div>
        </body>
    </html>
    Ответ написан
    Комментировать
  • Как перезагружать страницу при появлении определённого элемента?

    muscimolus
    @muscimolus
    const mutationObserver = new MutationObserver(records => {
        records.forEach(record => record.addedNodes.forEach(({ classList }) => {
            classList?.contains('taskblackout') ? location.reload() : undefined
        }))
    })
    mutationObserver.observe(
        document.querySelector('body'), {
            childList: true
        }
    )
    setTimeout(() => {
        document.body.appendChild(
            document.createElement('div')
        ).classList.add('taskblackout')
    }, 5000)


    P.S. Ну а вообще, Vitsliputsli в комментарии правильно сказал. То есть, вместо создания обсервера для отслеживания одного элемента - можно же просто изменить логику события, которое создаёт этот элемент (поп-ап с затмением) и ожидает действий пользователя на простую принудительную перезагрузку страницы.
    Ответ написан
  • Как найти начальную точку для определения маршрутов в двумерном массиве?

    muscimolus
    @muscimolus
    const routes = [
        ['USA', 'BRA'], ['JPN', 'PHL'], ['BRA', 'UAE'], ['UAE', 'JPN']
    ]
    
    const length = routes.length
    const start = routes.shift()
    const chain = [ start ]
    
    while(chain.length !== length){
        const [ _, to ] = chain[ chain.length -1 ]
        routes.forEach(([ from ], index) => {
            if(to === from){
                chain.push(routes[index])
            }
        })
    }
    
    const set = new Set()
    
    chain.forEach(([ from, to ]) => set.add(from).add(to))
    
    const route = []
    
    set.forEach(any => route.push(any))
    
    const string = route.join(',')
    
    console.log(string)


    Так?

    P.S.: Пропустил, что в строку надо, поправил.
    Ну и это не сработает с вариантом, когда ты отправной точкой (start) будешь объявлять массив, значение to (второе) которого не присутствует в from (первом значении) других массивов.

    Если ты ниндзя

    const data = [
        ['A', 'B'], ['O', 'P'], // [начало], [конец (возможно)]
        ['E', 'F'], ['J', 'K'],
        ['F', 'G'], ['K', 'L'],
        ['N', 'O'], ['M', 'N'],
        ['L', 'M'], ['G', 'H'],
        ['B', 'C'], ['H', 'I'],
        ['M', 'N'], ['C', 'D'],
        ['D', 'E'], ['I', 'J']
    ]
    
    const [ length, chain, [ start, end ], routes ] = [ data.length, [ ], [ ...data ], data.slice(2) ]
    
    chain.push(start)
    
    while(chain.length !== length -1){
        const [ , to ] = chain[ chain.length -1 ]
        routes.forEach(([ from ], index) => to === from ? chain.push(routes[ index ]) : void(0))
    }
    
    chain.push(end)
    
    console.log(chain.map(([ from, to ], index) => index === chain.length -1 ? [ from, to ].join(',') : from).join(', '))

    Ответ написан
  • Как обновить страницу в браузере после изменения в js скрипт?

    muscimolus
    @muscimolus
    Если это в окружении разработки и сама страница не кэшируется, то как вариант, можно просто этот скрипт при каждом запросе считывать и инлайнить тегом.

    Если модуль или асинхронный скрипт, то:
    // $script = file_get_contents(...);
    ?><script type="module"><?=$script;?></script><?


    Если обычный скрипт, то без атрибута type.
    Ответ написан
    Комментировать
  • Не видит переменную js. Как получить?

    muscimolus
    @muscimolus
    const ws = new WebSocket("wss://stream.binance.com:9443/ws/xrpusdt@bookTicker")
    let dd = null
    
    ws.onmessage = (event) => {
        const obj = JSON.parse(event.data)
        if(obj.s=='XRPUSDT'){ /* ... */ }
        dd = obj.s
        console.log(dd)
    }
    
    let vv = dd
    console.log(vv)


    Область видимости переменных
    Ответ написан
    7 комментариев