如何将此值导出到另一个 JS 文件中？答案

【问题标题】：How can I export this value into another JS file?如何将此值导出到另一个 JS 文件中？
【发布时间】：2021-05-10 07:17:32
【问题描述】：

我正在尝试将变量从一个 JavaScript 文件导出到另一个

const ticketsForFilm = document.querySelector(".film-list")

// FUNCTION FOR GETTING THE FILM ID FOR BUYING TICKETS
export let filmID 
function choosingFilmForTickets(e){
    let target = e.target
    if(target.classList.contains("fa-ticket-alt")){
        filmID = target.parentElement.parentElement.parentElement.id
    }
} 

// LISTENER FOR GETTING THE FILM ID WHEN CLICKING ON THE TICKET ICON
ticketsForFilm.addEventListener("click", choosingFilmForTickets)

这是我在单击图标后获取电影 ID 的代码，但是这也是我的 html 文件更改为另一个以进行下一步的代码。

当我尝试在另一个 JS 文件中导出和导入 filmID 变量时

import {filmID} from "../films.js"

console.log(filmID)

我得到了错误

我做错了什么？提前谢谢你

【问题讨论】：

你的ticketsForFilm是null所以没有.film-list类的元素，要么是因为你没有任何这样的元素，要么你在DOM初始化之前执行JS
在点击时触发事件的第一个 html 中不为空。例如，当我将 console.log(filmID) 放在 if 语句中时，就在更改 html 页面之前，控制台中记录了正确的值。错误来自第二个 html 页面。
问题是这一行ticketsForFilm.addEventListener("click", choosingFilmForTickets)，错误表明您的ticketsForFilm 为空，至少我可以从您提供的代码中推断出这一点。 “就在html页面更改之前”是什么意思？通过更改或刷新页面，您会丢失每个变量值

标签： javascript html import export

【解决方案1】：

尝试将值保存在本地存储中，然后它可以跨所有js文件访问

这里有一些链接 https://www.w3schools.com/html/html5_webstorage.asp https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

【讨论】：

是的，这就是我所做的，而且效果很好。谢谢