Возникли проблемы при использовании локального хранилища для тумблера css

Question

Отрывок:

/* LOCAL STORAGE */
const searchUser=document.getElementById('autocomplete');
const messageUser=document.getElementById('message-user');
const timezone=document.getElementById('timezone');
const send=document.querySelector('.send');
const save=document.querySelector('.save');
const switch1=document.querySelectorAll('input[type="checkbox]')[0];
const switch2=document.querySelectorAll('input[type="checkbox]')[1];

send.addEventListener('click', function() {
    if (searchUser.value && messageUser.value) {
        localStorage.setItem("user",searchUser.value);
        localStorage.setItem("message",messageUser.value);
        window.alert("Your settings have been saved to local storage");
        location.reload();
    } else if (searchUser.value || messageUser.value) {
        window.alert("Please fill in all required fields");
    }
});

save.addEventListener('click', function() {
    if (timezone.value) {
        localStorage.setItem("timezone",timezone.value);
        localStorage.setItem("switch1", switch1.checked);
        localStorage.setItem("switch2", switch2.checked);
        window.alert("Your settings have been saved to local storage");
        location.reload();
    }
});

/* MESSAGE USERS */
/* SETTINGS */
.message-users,
.settings {
    display: flex;
    flex-direction: column;
    padding: 0 15px;
    border-top: 1px grey solid;
}
.settings {
    border-left: 1px grey solid;
}
.message-users > * {
    padding: 5px;
    margin-bottom: 10px;
}
.settings > * {
    margin-bottom: 10px
} 
.settings > label {
    padding: 10px 0;
}

select[id="timezone"] {
    margin-top: auto;
    padding: 10px;
}
.settings-buttons {
    width: 100%;
    display: flex;
    justify-content: space-between;
}
.save,
.cancel {
    flex-basis: 48%;
}
.button {
    color: white;
    background-color: #7279C2;
    padding: 5px;
}
.cancel {
    background-color: #B2B2B2;
}

<!-- MESSAGE USERS -->
        <section class="message-users section">
            <h2>Message User</h2>
            <input type="search" id="autocomplete" tabindex="1" placeholder="Search for User">
            <textarea id="message-user" rows="10" cols="50" placeholder="Message for User"></textarea>
            <button class="button send">Send</button>  
        </section>

        <!-- SETTINGS -->
        <section class="settings section">
            <h2>Settings</h2>

            <label class="switch-light switch-ios" onclick="">
                <input type="checkbox">
                <strong class="switch-light-text">
                    Send Email Notifications
                </strong>
                <span class="switch-light-span">
                    <span>Off</span>
                    <span>On</span>
                    <a></a>
                </span>
            </label>

            <label class="switch-light switch-ios" onclick="">
                <input type="checkbox">
                <strong class="switch-light-text">
                    Set Profile to Public
                </strong>
                <span class="switch-light-span">
                    <span>Off</span>
                    <span>On</span>
                    <a></a>
                </span>
            </label>

            <select id="timezone">
                <option value="volvo" selected>Select a Timezone</option>
                <option value="volvo">Volvo</option>
                <option value="volvo">Volvo</option>
                <option value="saab">Saab</option>
                <option value="fiat">Fiat</option>
                <option value="audi">Audi</option>
            </select>

            <div class="settings-buttons">
                <button class="button save">Save</button>
                <button class="button cancel">Cancel</button>
            </div>   

        </section>

Я хочу проверить значение часового пояса и две кнопки включения / выключения, а затем вывести предупреждение "Ваши настройки были сохранены на локальномЯ знаю, что должен сохранить состояние кнопок переключения, как проверено, и я исследовал подобные вопросы в стеке, но, похоже, ничего не работает.

Второй абзац кода - это тот, над которым я работаю.

Answer 1

обнаружена ошибка консоли:
document.querySelectorAll('input[type="checkbox]'), [0] и [1].
это должно быть:
document.querySelectorAll('input[type=checkbox]').
(без двойных кавычек.

(консоль включена F12 каждого браузера)

, а также:
else if (searchUser.value || messageUser.value).
должно быть:
else if (searchUser.value=='' || messageUser.value=='')

---

Значения локального хранилища также отображаются в инспекторе браузера ( F12 ), в разделе хранилища

завершение JS:

/* LOCAL STORAGE */
const searchUser  = document.getElementById('autocomplete')
  ,   messageUser = document.getElementById('message-user')
  ,   timezone    = document.getElementById('timezone')
  ,   send        = document.querySelector('.send')
  ,   save        = document.querySelector('.save')
  ,   switch1     = document.querySelectorAll('input[type=checkbox]')[0]
  ,   switch2     = document.querySelectorAll('input[type=checkbox]')[1]
  ;

send.addEventListener('click', function ()
{
  if (searchUser.value && messageUser.value)
  {
    localStorage.setItem("user", searchUser.value);
    localStorage.setItem("message", messageUser.value);
    window.alert("Your settings have been saved to local storage");
    location.reload();
  }
  else if (searchUser.value=='' || messageUser.value=='')
  {
    window.alert("Please fill in all required fields");
  }
});

save.addEventListener('click', function ()
{
  if (timezone.value) {
    localStorage.setItem("timezone", timezone.value);
    localStorage.setItem("switch1", switch1.checked);
    localStorage.setItem("switch2", switch2.checked);
    window.alert("Your settings have been saved to local storage");
    location.reload();
  }
});