Как сделать кнопку конверсии, которая сохраняет загрузку / обновление страницы - PullRequest
Новая
       7

Как сделать кнопку конверсии, которая сохраняет загрузку / обновление страницы

0 голосов
/ 04 ноября 2019

Я строю преобразование, которое изменяется от ми до км и наоборот. Я могу успешно конвертировать между двумя. Однако, когда я добавил 10-секундные перезагрузки страницы для обновления содержимого моего сайта, я изо всех сил пытался: (1) сохранить состояние текущего блока (т. Е. Если кнопка отображает км -> сохранить км при перезагрузке страницы) (2) изменить состояние текста при нажатии кнопки.

У меня есть две рабочие части: (1) цифровая кнопка с единицей измерения (2), которая изменяет текст

Я пытался использовать хранилище сеансов, но у меня были проблемы с этим.

Моя идея для реализации заключалась в использовании атрибута data-value в HTML для кнопки. Установите значение «mi» в качестве значения по умолчанию, и при нажатии кнопки «km» будет отключать и включать «mi» для преобразования.

Моя страница Github предоставит больше ресурсов и доступ к полной кодовой базе: https://github.com/tyler-morales/iss

Мое развертывание netlify, чтобы взглянуть на макет: https://adoring -johnson-35b0cf.netlify.com / 

// switch between conversions
btn.addEventListener('click', () => {

    // No storage exists
    if (sessionStorage.getItem('velocity') == null) {
        //convert mi -> km
        btn.dataset.value = 'km'

        velStr = velEl.textContent
        let velClean = velStr.split(' ');
        velClean = Number(velClean[0].split(',').join(''))
        velClean = convertMiToKm(velClean).toFixed(2)
        velClean = formatNumber(velClean)
        velClean = velClean.substring(0, 9)
        sessionStorage.setItem('velocity', `${velClean} km/hr`)

        velEl.textContent = `${sessionStorage.getItem('velocity')}`

        console.log('storage now exists and switched to km')
    }
    // Storage exists
    else {
        console.log('session loaded')

        //convert mi -> km
        if (btn.dataset.value == 'mi') {
            btn.dataset.value == 'km'

            velStr = velEl.textContent
            let velClean = velStr.split(' ');
            velClean = Number(velClean[0].split(',').join(''))
            velClean = convertMiToKm(velClean).toFixed(2)
            velClean = formatNumber(velClean)
            velClean = velClean.substring(0, 9)
            sessionStorage.setItem('velocity', `${velClean} km/hr`)

            velEl.textContent = `${sessionStorage.getItem('velocity')}`

            console.log('storage exists and switched to km')
        }

        //convert km -> mi
        if (btn.dataset.value == 'km') {
            btn.dataset.value == 'mi'

            velStr = velEl.textContent
            let velClean = velStr.split(' ');
            velClean = Number(velClean[0].split(',').join(''))
            velClean = convertMiToKm(velClean).toFixed(2)
            velClean = formatNumber(velClean)
            velClean = velClean.substring(0, 9)
            sessionStorage.setItem('velocity', `${velClean} mi/hr`)

            velEl.textContent = `${sessionStorage.getItem('velocity')}`

            console.log('storage exists and switched to mi')
        }
    }
})

getISS()
        .then(function ({
            latitude,
            longitude,
            velocity,
            visibility,
        }) {
            //update lat/ long coords
            marker.setLatLng([latitude, longitude]);

            // format data
            let lat = roundNumber(latitude)
            let lon = roundNumber(longitude)

            let velKm = roundNumber(velocity)
            velKm = formatNumber(velKm)

            let velMi = convertKmToMi(velocity)
            velMi = roundNumber(velMi)
            velMi = formatNumber(velMi)

            //add elements to DOM
            latEl.textContent = `${lat}°`
            lonEl.textContent = `${lon}°`
            velEl.textContent = `${velMi} mi/hr`

            visibility == 'daylight' ? regularMode() : darkMode()

            return getGeoLocation(latitude, longitude)
        })
 }

Выше две части моего кода. Кнопка, которая вносит изменения и текст, который изменяется при нажатии кнопки.

Если есть какие-либо вопросы, взгляните на развертывание netlify и Github, чтобы получить более полное представление о том, что я пытаюсь сделать. Спасибо за помощь. Я пытался заставить это работать много-много часов и не могу понять.

...