как из глобальной переменной сделать глобальную и передать её в соседний файл js

"use strict";
let passwordUser;
let loginUser;
const loginInput = document.getElementById("login");
const passwordInput = document.getElementById("password");

const passwordForm = document.getElementById("passwordForm");
const submitButton = document.getElementById("submitPassword");

// U S E R S
const user = {
  firstName: "Nicolay",
  lastName: "Kovalenco",
  passtworld: 111,
};
const user1 = {
  firstName: "Nicolay",
  lastName: "Kovalenco",
  login: "Nicolay111",
  passtworld: 111,
};

const user2 = {
  firstName: "Ivanov",
  lastName: "Ivan",
  login: "Ivanov222",
  passtworld: 222,
};

const user3 = {
  firstName: "Petrov",
  lastName: "Petr",
  login: "Petrov333",
  passtworld: 333,
};

const user4 = {
  firstName: "Sidorov",
  lastName: "Serdey",
  login: "Sidorov444",
  passtworld: 444,
};
// Создаем массив из всех пользователей
let users = [user1, user2, user2, user4];

submitButton.addEventListener("click", () => {
  passwordUser = passwordInput.value;
  loginUser = loginInput.value;
  console.log(loginUser);
  console.log(passwordUser);
  let found = false;
  for (let i = 0; i < users.length; i++) {
    console.log(users[i].passtworld, users[i].login);
    if (
      passwordUser == users[i].passtworld &&
      loginUser == users[i].login
    ) {
      // Если пароль верный то показывает nav, и скрываем форму// если запаролить весь nav
      passwordForm.style.display = "none";
      nav.classList.remove("non-menu");
      console.log("совпал", users[i].passtworld, users[i].login);
      found = true;
      break;
    }
  }
  if (!found) {
    // Если пароль неверный, выводим сообщение об ошибке
    alert("Неверный логин или пароль!");
    console.log("НЕ совпал", users[i].passtworld, users[i].login);
  }
});

// попытка сделать переменные passwordUser и loginUser глобальными
let passwordUser1 = passwordUser;
let loginUser1 = loginUser;
console.log(passwordUser1, loginUser1);

//попытка экспортировать
//export { users, passwordUser1, loginUser1 } from "./class.js";

@font-face {
  font-family: "Robot-bobot";
  src: url(../fonts/Roboto/Roboto-Black.ttf);
}

@font-face {
  font-family: "Robot-light";
  src: url(../fonts/Roboto/Roboto-medium.ttf);
}

*,
 ::after,
 ::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 62.5%;
  font-family: "Robot-bobot";
  scroll-behavior: smooth;
}

html:target {
  scroll-margin-top: 2rem;
}

body {
  background-color: #af0f0f;
  padding: 0.7rem;
  height: 100vh;
}

.container {
  min-height: 100%;
  margin: 0 auto;
  position: relative;
}

.container__main {
  display: grid;
  grid-template-rows: 45% 1fr;
  background: url(../img/background.jpg) center/cover no-repeat;
}

.container__second {
  background-color: #f2edc3;
}

.title__1,
.title__2 {
  text-align: center;
  color: white;
  letter-spacing: 0.5vw;
  padding: 1rem;
  box-shadow: 0rem 1rem 2rem #af0f0f;
  border: 0.2rem solid #af0f0f;
  display: inline-block;
  background-color: black;
  font-size: clamp(2.8rem, 8vw, 5rem);
}

@media only screen and (min-width: 479px) {
  .title__1,
  .title__2 {
    font-size: clamp(3rem, 6vh, 5rem);
  }
}

.title__3 {
  padding-top: 1rem;
  text-align: center;
  font-size: clamp(2rem, 5vw, 4rem);
  margin-bottom: 2rem;
  color: #af0f0f;
}

.title__4 {
  margin: 0 3vw;
  text-align: center;
  font-size: clamp(1.8rem, 3vw, 3rem);
  color: #031ab0;
}

.title__4:not(:last-child) {
  margin-bottom: 1rem;
}

.article__wrapper:not(:last-child) {
  margin-bottom: 3rem;
}

.article__span {
  color: #af0f0f;
  font-weight: bold;
}

.article__span-data {
  color: #af0f0f;
  font-weight: bold;
  letter-spacing: 0.1rem;
  font-size: clamp(1.6rem, 2vw, 2rem);
}

.article__p {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  letter-spacing: 0.1rem;
  font-size: clamp(1.6rem, 2vw, 2rem);
  text-align: justify;
  padding-left: 2vw;
}

.article__p:not(:last-child) {
  margin-bottom: 1rem;
}

.article__p-data {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  letter-spacing: 0.1rem;
  font-size: clamp(1.6rem, 2vw, 2rem);
  text-align: justify;
}

.article__list {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  letter-spacing: 0.1rem;
  font-size: clamp(1.6rem, 2vw, 2rem);
  margin-bottom: 1rem;
  list-style-type: none;
  counter-reset: item;
  text-align: justify;
  padding-left: 4vw;
}

.article__list_item::before {
  content: counter(item) ")";
  counter-increment: item;
  margin-right: 0.5rem;
}

.article__list_item:not(:last-child) {
  margin-bottom: 1rem;
}

.article__link:link,
.article__link:visited {
  color: #af0f0f;
  border: none;
  font: inherit;
  font-weight: bold;
}

.form {
  animation-name: departure_form;
  animation-duration: 1s;
  animation-delay: 2s;
  animation-timing-function: ease linear;
  backface-visibility: hidden;
  animation-fill-mode: backwards;
  animation-iteration-count: 1;
  transition: all;
  position: absolute;
  top: 55%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.form__group {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 1rem 0;
  background: url(../img/pngwing.com.png) center/cover no-repeat;
}

.form__button {
  height: 6rem;
  border: 0.2rem solid #af0f0f;
  font-size: 2rem;
  text-transform: uppercase;
  letter-spacing: 0.2rem;
  font-weight: bold;
  background: black;
  color: white;
}

.form__button:active {
  transform: translateY(0.5rem);
}

.form__input {
  opacity: 0.8;
  text-align: center;
  font-size: 2rem;
  letter-spacing: 0.2rem;
  font-weight: 200;
  color: black;
  padding: 2rem;
  background: #867f7f;
  border: none;
  border-bottom: 0.3rem solid transparent;
  width: 100%;
  height: 2rem;
  position: relative;
  border: 0.2rem solid #af0f0f;
  z-index: 1;
}

.form__input:-moz-placeholder {
  color: white;
}

.form__input:-ms-input-placeholder {
  color: white;
}

.form__input::-moz-placeholder {
  color: white;
}

.form__input::-webkit-input-placeholder {
  color: white;
  font-size: 2rem;
}

.form__input:focus {
  outline: none;
  border-bottom: 0.5rem solid #66D763;
}

.form__input:focus:invalid {
  border-bottom: 0.5rem solid #D76363;
}

.form__label {
  opacity: 0.7;
  text-align: center;
  font-size: 1.4rem;
  letter-spacing: 0.1rem;
  display: block;
  transition: 0.5s all;
  background-color: black;
  color: white;
  border: 0.2rem solid #af0f0f;
  padding: 1rem 0;
}

.form__input:placeholder-shown+.form__label {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-3rem);
}

.nav-menu {
  position: fixed;
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  -webkit-tap-highlight-color: transparent;
  min-height: 15rem;
  width: 100%;
  z-index: 7;
  transition: 1s all;
  flex-direction: column;
  justify-content: space-evenly;
  top: -100%;
  right: 0;
}

@media only screen and (min-width: 479px) {
  .nav-menu {
    top: 1vh;
    right: -100vw;
    min-height: 15rem;
  }
}

@media only screen and (min-width: 991px) {
  .nav-menu {
    top: 1vh;
    right: -100%;
  }
}

.nav-menu_active {
  top: 1rem;
}

@media only screen and (min-width: 479px) {
  .nav-menu_active {
    top: 1vh;
    right: 0;
  }
}

@media only screen and (min-width: 991px) {
  .nav-menu_active {
    top: 1vh;
    right: -48.5rem;
  }
}

.hamburger {
  width: 5rem;
  height: 5rem;
  position: fixed;
  top: 1.5rem;
  left: 2.5vw;
  z-index: 11;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.hamburger__span {
  border: 0.1rem white solid;
  height: 0.6rem;
  width: 3rem;
  display: block;
  background: #031ab0;
  -webkit-tap-highlight-color: transparent;
  transition: 1s all;
  backface-visibility: hidden;
}

.hamburger__span:not(:last-child) {
  margin-bottom: 0.3rem;
}

.hamburger_active .hamburger__span {
  -webkit-tap-highlight-color: transparent;
  margin-bottom: -2px;
}

.hamburger_active .hamburger__span:nth-last-child(1) {
  transform: translateY(2px) rotate(-45deg);
}

.hamburger_active .hamburger__span:nth-last-child(2) {
  display: none;
}

.hamburger_active .hamburger__span:nth-last-child(3) {
  transform: translateY(4px) rotate(45deg);
}

@keyframes departure_title-2-X {
  0% {
    opacity: 0;
    transform: translateX(10rem);
  }
  60% {
    opacity: 1;
    transform: translateX(-3rem);
  }
  100% {
    transform: translateX(0rem);
  }
}

@keyframes departure_title-1-X {
  0% {
    opacity: 0;
    transform: translateX(-10rem);
  }
  60% {
    opacity: 1;
    transform: translateX(2rem);
  }
  100% {
    transform: translateX(0rem);
  }
}

@keyframes departure_page {
  0% {
    opacity: 0;
    transform: translateY(3rem);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes departure_form {
  0% {
    opacity: 0;
    top: 65%;
  }
  60% {
    top: 52%;
  }
  100% {
    opacity: 1;
  }
}

.main-menu {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  max-height: 35rem;
  padding: 0 2rem;
  gap: 2rem;
}

@media only screen and (min-width: 479px) {
  .main-menu {
    justify-content: space-evenly;
    flex-flow: wrap;
    max-height: 15rem;
  }
}

.main-menu__button {
  -webkit-tap-highlight-color: transparent;
  text-align: center;
  color: white;
  letter-spacing: 0.3rem;
  font-size: clamp(2.8rem, 3vw, 3rem);
  padding: 0.5rem;
  text-decoration: none;
  background-color: black;
  display: inline-block;
  border: 0.2rem solid #af0f0f;
  text-transform: uppercase;
  font-weight: normal;
  min-width: 20rem;
  box-shadow: 0rem 0.5rem 1rem #af0f0f;
}

.main-menu__button_1 {
  animation-name: departure_title-1-X;
  animation-duration: 1s;
  animation-delay: 0.5s;
  animation-timing-function: ease linear;
  backface-visibility: hidden;
  animation-fill-mode: backwards;
  animation-iteration-count: 1;
  transition: all;
}

.main-menu__button_2 {
  animation-name: departure_title-1-X;
  animation-duration: 1s;
  animation-delay: 1s;
  animation-timing-function: ease linear;
  backface-visibility: hidden;
  animation-fill-mode: backwards;
  animation-iteration-count: 1;
  transition: all;
}

.main-menu__button_3 {
  animation-name: departure_title-1-X;
  animation-duration: 1s;
  animation-delay: 1.5s;
  animation-timing-function: ease linear;
  backface-visibility: hidden;
  animation-fill-mode: backwards;
  animation-iteration-count: 1;
  transition: all;
}

.main-menu__button_4 {
  animation-name: departure_title-1-X;
  animation-duration: 1s;
  animation-delay: 2s;
  animation-timing-function: ease linear;
  backface-visibility: hidden;
  animation-fill-mode: backwards;
  animation-iteration-count: 1;
  transition: all;
}

.main-menu__button_5 {
  animation-name: departure_title-1-X;
  animation-duration: 1s;
  animation-delay: 2.5s;
  animation-timing-function: ease linear;
  backface-visibility: hidden;
  animation-fill-mode: backwards;
  animation-iteration-count: 1;
  transition: all;
}

.main-menu__button:active {
  transform: translateY(0.5rem);
  box-shadow: 0rem 0.2rem 1rem #af0f0f;
  -webkit-tap-highlight-color: transparent;
}

.non-menu {
  display: none;
}

.nav-menu__button:link,
.nav-menu__button:visited {
  margin-right: calc(50vw - 7.5rem);
  margin-left: calc(50vw - 7.5rem);
  background: rgba(0, 0, 0, 0.7);
  color: white;
  text-decoration: none;
  padding: 1rem;
  border: 0.2rem #af0f0f solid;
  -webkit-tap-highlight-color: transparent;
  width: 17.5rem;
  height: 4rem;
  box-shadow: 0rem 0.3rem 0.5rem #af0f0f;
  font-family: "Robot-light", "Robot-bobot", "sans-serif";
  font-size: 1.5rem;
  text-align: center;
  letter-spacing: 0.2rem;
  text-transform: uppercase;
}

.nav-menu__button:link:not(:last-child),
.nav-menu__button:visited:not(:last-child) {
  margin-bottom: 0.8rem;
}

.nav-menu__button:hover {
  box-shadow: 0rem 0.7rem 0.7rem #af0f0f;
  transform: translateY(-0.2rem);
}

.nav-menu__button:active {
  box-shadow: 0rem 0.1rem 0.2rem #af0f0f;
  transform: translateY(0.5rem);
}

.buffer-3rem {
  height: 3rem;
}

.margin-bottim-footer {
  margin-bottom: 1.5rem;
}

.main-section {
  height: 100%;
}

.header-first {
  display: grid;
  grid-template-rows: 1fr 1fr;
  justify-items: center;
}

.title__1 {
  animation-name: departure_title-1-X;
  animation-duration: 1s;
  animation-delay: 1s;
  animation-timing-function: ease linear;
  backface-visibility: hidden;
  animation-fill-mode: backwards;
  animation-iteration-count: 1;
  transition: all;
}

.title__2 {
  animation-name: departure_title-2-X;
  animation-duration: 1s;
  animation-delay: 1s;
  animation-timing-function: ease linear;
  backface-visibility: hidden;
  animation-fill-mode: backwards;
  animation-iteration-count: 1;
  transition: all;
}

.title__wrapper_1 {
  grid-row: 1/2;
  align-self: center;
}

.title__wrapper_2 {
  grid-row: 2/3;
  align-self: start;
}

@media only screen and (min-width: 479px) {
  .title__wrapper_2 {
    align-self: center;
  }
}

.lectur {
  animation-name: departure_page;
  animation-duration: 2s;
  animation-delay: 1s;
  animation-timing-function: ease linear;
  backface-visibility: hidden;
  animation-fill-mode: backwards;
  animation-iteration-count: 1;
  transition: all;
}

.lectur__wrapper:not(:last-child) {
  margin-bottom: 2rem;
}

.lectur__title {
  padding-top: 1rem;
  text-align: center;
  font-size: clamp(2rem, 5vw, 3rem);
  margin-bottom: 2rem;
  color: #af0f0f;
}

.lectur__title_second {
  text-align: center;
  font-size: clamp(1rem, 3vw, 2rem);
  color: #031ab0;
}

.lectur__title_span {
  font-weight: normal;
  color: #af0f0f;
}

.second-section {
  min-height: 100%;
  width: 100%;
}

.signals {
  min-height: 50rem;
  width: 100%;
  padding: 1rem;
}

.signals__title {
  padding-top: 1rem;
  text-align: center;
  font-size: clamp(2rem, 5vw, 3rem);
  margin-bottom: 2rem;
  color: #af0f0f;
}

.signals__title_second {
  text-align: center;
  font-size: clamp(1rem, 3vw, 2rem);
  color: #031ab0;
}

.second-section {
  min-height: 100%;
  width: 100%;
}

.fz {
  animation-name: departure_page;
  animation-duration: 2s;
  animation-delay: 1s;
  animation-timing-function: ease linear;
  backface-visibility: hidden;
  animation-fill-mode: backwards;
  animation-iteration-count: 1;
  transition: all;
  min-height: 50rem;
  width: 100%;
  padding: 1rem;
}

.fire {
  animation-name: departure_page;
  animation-duration: 2s;
  animation-delay: 1s;
  animation-timing-function: ease linear;
  backface-visibility: hidden;
  animation-fill-mode: backwards;
  animation-iteration-count: 1;
  transition: all;
  padding: 1rem;
}

.fire__tth-pm {
  width: 100%;
}

@media only screen and (min-width: 991px) {
  .fire__tth-pm {
    width: 70vw;
    margin: 0 auto;
  }
}

.fire__tth-pm_img {
  width: 100%;
}

.personal-area {
  min-height: 98dvh;
}

.personal-area__title {
  padding-top: 1rem;
}

.personal-area__wrapper {
  display: grid;
  grid: repeat(4, minmax(3rem, max-content))/minmax(9rem, 12rem) 1fr;
  word-wrap: break-word;
  padding: 0 1rem;
}

.personal-area__wrapper>* {
  align-self: center;
}


/*# sourceMappingURL=style.css.map */

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />

  <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;700&display=swap" rel="stylesheet" />
  <link rel="stylesheet" href="css/style.css" />

  <title>мой сайт</title>
</head>

<body>
  <main class="main-section">
    <div class="container container__main">
      <header class="header-first">
        <div class="title__wrapper title__wrapper_1">
          <h1 class="title__1">заголовой 1<br /></h1>
        </div>

        <div class="title__wrapper title__wrapper_2">
          <h2 class="title__2">заголовок 2</h2>
        </div>
      </header>
      <nav id="nav" class="main-section__nav main-menu non-menu">
        <a class="main-menu__button main-menu__button_1" id="myLink" href="lectures.html">пункт 1</a
                    >
                    <a
                        class="main-menu__button main-menu__button_2"
                        href="FZ.html"
                        >пункт 2</a
                    >
                    <a
                        class="main-menu__button main-menu__button_3"
                        href="fire.html"
                        >пункт 3</a
                    >
                    <a
                        class="main-menu__button main-menu__button_4"
                        href="personal-area.html"
                        >кабинет</a
                    >
                    <a
                        class="main-menu__button main-menu__button_5"
                        href="info.html"
                        >пункт 4</a
                    >
                </nav>

                <!-- форма -->
                <form class="form" id="passwordForm">
                    <div class="form__group">
                        <input
                            type="name"
                            class="form__input"
                            placeholder="введите логин"
                            maxlength="20"
                            id="login"
                            required
                        />
                       
                        <label
                            for="password"
                            class="form__label form__label_login"
                            >вводите логин
                        </label>
                        <input
                            type="password"
                            class="form__input"
                            placeholder="введите пароль"
                            maxlength="5"
                            id="password"
                            required
                        />
                       
                        <label
                            for="password"
                            class="form__label form__label_password"
                            >вводите пароль
                        </label>
                        <!-- подсказка в поле формы -->
                        <button
                            class="form__button"
                            type="button"
                            id="submitPassword"
                        >
                            Отправить
                        </button>
                    </div>
                </form>
            </div>
        </main>
        <script src="#" type="module" defer></script>
    </body>
</html>