0

Столкнулся с такой проблемой не могу отключить function по нажатию кнопки в function прописана система звука по нажатию. По умолчанию звук должен быть включен.

Значение False сохраняется в localStorage, что бы когда пользователь перезагрузит страницу у него сохранялись настройки.

Что мы имеем

let settings_sound = localStorage.getItem('settings_sound') || true;

Код звука при нажатии кнопки

function clicksound(){
    if (settings_sound = true) {
        var audio = document.createElement('audio');
        audio.src = 'sound/clickmenu.mp3'
        audio.autoplay = true;
        return true;
    }
}

Систему которая присваивает False чтобы отключить функцию

const clicksBTsoundOff = () => {
    if (settings_sound = true) {
        settings_sound = false
        updateStorageSetSound(settings_sound);
    }
}

function updateStorageSetSound(settings_sound) {
    localStorage.setItem('settings_sound', settings_sound);
}

document.getElementById('sound_off').addEventListener('click', clicksBTsoundOff)

Пробовал вывести за предел clicksBTsoundOff

updateStorageSetSound(settings_sound);

Что бы шла запись в localStorage, что значение settings_sound = True. Когда нажать на кнопку что бы отключить звук, значение в localStorage меняется на False. Но звук остается и даже если перезагрузить страницу значение все равно будет False и будет звук.

1
  • if (settings_sound = true) { вы присваиваете переменной true,... для проверки нужно if (settings_sound === true) { в обеих местах
    – Jour
    15 сен 2022 в 12:57

1 ответ 1

0

Ошибки у вас в сравнениях:

 if (settings_sound = true) { // = - оператор присваивания, а не сравнения

Должно быть:

 if (settings_sound === true) { // === - оператор сравнения

Вообще можно просто оставить так:

 if (settings_sound) {

Метод Storage.getItem() возвращает string или null, поэтому нужно привести результат к типу boolean

Вместо такого выражения:

let settings_sound = localStorage.getItem('settings_sound') || true;

Можно использовать что-то такое:

let settings_sound = (localStorage.getItem('settings_sound') || 'true') === 'true';

Зачем каждым кликом создавать новый элемент <audio> чтобы единоразово воспроизвести звук? У вас так DOM забьется мусором. Можно же один раз создать и уже сколько угодно раз воспроизводить звук с помощью этого элемента.

Сделайте лучше как-то так:

let settings_sound = (localStorage.getItem('settings_sound') || 'true') == 'true'; // всегда вернет boolean

const audio = new Audio('sound/clickmenu.mp3'); // создаем HTMLAudioElement
document.append(audio); // добавляем HTMLAudioElement в document

function clicksound () {
    if (!settings_sound) return; // если звук отключем, завершаем выполнение функции, возвращаем void 
    audio.play(); // иначе проигрываем аудио
}

function clicksBTsoundOff() {
    if (!settings_sound) return; // если settings_sound false, возвращаем void
    settings_sound = false;
    updateStorageSetSound(settings_sound);
}

function updateStorageSetSound(settings_sound) {
    localStorage.setItem('settings_sound', settings_sound); // boolean будет приведен к типу string
}

Ознакомьтесь дополнительно с материалом:

1
  • Спасибо за расширенный ответ, с материалами обязательно ознакомлюсь. 15 сен 2022 в 14:57

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.