Javascript 如何将主 js 文件中的数组用于不同的 js 文件

发布于05月15日

我有一个任务，从如下输入中创建一个博客缩略图和博客内容:blog.html

这是与输入表单位于同一HTML文件中的缩略图:blog.html

这是博客内容，也是我试图实现的，它位于不同的HTML文件中:blog-detail.html

我有两个js文件，博客.博客的js.html和博客细节.js提供博客详细信息.html.所有blog值都保存在blog中的let blogs = []中.js

以下是博客输入和缩略图中的片段:

let blogs = []



let month = [
    "Jan",
    "Feb",
    "Mar",
    "Apr",
    "May",
    "Jun",
    "Jul",
    "Aug",
    "Sept",
    "Oct",
    "Nov",
    "Dec"
]

function addBlog(event) {
    event.preventDefault()

    let inputName = document.getElementById("inputProjectName").value
    let inputContent = document.getElementById("inputDescription").value
    let inputImage = document.getElementById("inputImage").files[0]

    const projectDate = {

        startDate: document.getElementById("inputStartDate").value,
        endDate: document.getElementById("inputEndDate").value
    }

    inputImage = URL.createObjectURL(inputImage)

    let cardIcons = {
        html: document.querySelector('input[name="checkHtml"]').checked,
        css: document.querySelector('input[name="checkCss"]').checked,
        nodeJs: document.querySelector('input[name="checkNode"]').checked,
        reactJs: document.querySelector('input[name="checkReact"]').checked
    }

    let blog = {
        title: inputName,
        date: projectDate,
        content: inputContent,
        icons: cardIcons,
        image: inputImage
    }

    blogs.push(blog)

    console.table(blogs)

    renderCard()
}

function renderCard() {

    let containerBlog = document.getElementById("contents")
    containerBlog.innerHTML = '';

    for (let i = 0; i < blogs.length; i++) {

        containerBlog.innerHTML += `
        <div id="contents" class="mp-card">
            <!--MPC = My Project Card-->
            <div class="mpc-img">
                <img src="${blogs[i].image}" alt="">
            </div>
            <div class="mpc-title">
            <a href="blog-detail.html">
                <p>${blogs[i].title}</p>
            </a>
            </div>
            <div class="mpc-duration">
                <small>Durasi: 1 Bulan</small>
            </div>
            <div class="mpc-content">
                ${blogs[i].content}
            </div>
            <div class="mpc-icons">
                ${(blogs[i].icons.html === true) ? '<i class="fa-brands fa-html5"></i>' : ''}
                ${(blogs[i].icons.css === true) ? '<i class="fa-brands fa-css3-alt"></i>' : ''}
                ${(blogs[i].icons.nodeJs === true) ? '<i class="fa-brands fa-node-js"></i>' : ''}
                ${(blogs[i].icons.reactJs === true) ? '<i class="fa-brands fa-react"></i>' : ''}  
            </div>
            <div class="mpc-mod">
                <button>Edit</button>
                <button>Delete</button>
            </div>
        </div>
        `
    }
}

/* My Project */


/* FORM */

.mpi-title {
    width: 100%;
    margin: 50px 0px;
    font-size: 30px;
    text-align: center;
    font-family: 'Lato', sans-serif !important;
    font-weight: 700;
}

.mpi-form-container {
    display: flex;
    justify-content: center;
}

.mpi-form {
    width: 540px;
    display: flex;
    justify-content: center;
}

.mpi-form label {
    font-size: 25px;
    font-weight: bold;
}

.mpi-form .mpi-name input,
.mpi-date input {
    width: 100%;
    height: 50px;
    padding: 5px;
    box-sizing: border-box;
    font-size: 20px;
    font-weight: 400;
    padding-bottom: 5px;
    margin-top: 5px;
    margin-bottom: 20px;
    border: 1px solid #c4c4c4;
    border-radius: 8px;
    box-shadow: 0 5px 5px rgb(0 0 0 / 26%);
}

.mpi-date {
    flex-grow: 1;
    display: flex;
    gap: 10px;
}

.mpi-date .date-start {
    flex: 50%;
}

.mpi-date .date-end {
    flex: 50%;
}

[type="date"]::-webkit-datetime-edit {
    opacity: 0;
}

[type="date"]::-webkit-calendar-picker-indicator {
    opacity: 0;
    width: 100%;
}

.mpi-desc textarea {
    width: 100%;
    font-size: 20px;
    font-weight: 400;
    padding: 8px;
    margin-top: 5px;
    margin-bottom: 20px;
    border: 1px solid #c4c4c4;
    box-sizing: border-box;
    border-radius: 8px;
    height: 200px;
}

.mpi-check {
    display: flex;
    gap: 120px;
    margin: 20px 0px;
}

.mpi-check label {
    font-size: 20px;
}

.check-left {
    display: flex;
    flex-direction: column;
    row-gap: 20px;
}

.check-right {
    display: flex;
    flex-direction: column;
    row-gap: 20px;
}

.check-label {
    display: block;
    position: relative;
    padding-left: 35px;
    color: #514a4a;
    margin-bottom: 12px;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.check-label input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
    background-color: white;
    border-radius: 5px;
    box-shadow: 0 5px 5px rgb(0 0 0 / 26%);
}

.check-label:hover input~.checkmark {
    background-color: #ccc;
}

.check-label input:checked~.checkmark {
    background-color: #2196F3;
}

.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

.check-label input:checked~.checkmark:after {
    display: block;
}

.check-label .checkmark:after {
    left: 9px;
    top: 5px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.mpi-image {
    overflow: hidden;
    height: 50px;
    width: 100%;
    font-size: 20px;
    font-weight: 400;
    box-sizing: border-box;
    margin-top: 5px;
    margin-bottom: 20px;
    background: #f4f3f3;
    border: 1px solid #c4c4c4;
    border-radius: 8px;
    cursor: pointer;
    padding-right: 8px;
    box-shadow: 0 10px 10px rgb(0 0 0 / 26%);
}

.mpi-image label {
    width: 100%;
    height: 50px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.mpi-choose {
    margin-top: -2px;
    border-radius: 8px;
    align-items: center;
    padding: 13px 10px 13px 10px;
    background-color: #e4e4e4;
    color: #b2abab;
}

.mpi-attach {
    padding-right: 10px;
}

.mpi-submit button {
    margin-top: 30px;
    float: right;
    padding: 10px 30px;
    border: none;
    border-radius: 25px;
    background-color: var(--btn);
    color: white;
    font-size: 15px;
    font-weight: bold;
    cursor: pointer;
    margin-bottom: 110px;
}

.mpi-submit button:hover {
    background-color: var(--btn-hover)
}


/* x FORM */


/* CARDS */

.mp-container {
    width: 100%;
    background-color: #f8f8f8;
    padding-bottom: 70px;
}

.mp-card-container {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    gap: 20px 140px;
    padding: 0px 70px 0px 70px;
}

.mp-title {
    width: 100%;
    display: flex;
    font-size: 30px;
    font-weight: bold;
    justify-content: center;
    padding: 40px 0px;
}

.mp-card {
    width: 320px;
    height: 440px;
    max-width: 280px;
    max-height: 440px;
    padding: 10px 15px 10px 15px;
    border: none;
    border-radius: 10px;
    background-color: white;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}

.mpc-img img {
    border-radius: 10px;
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.mpc-title {
    overflow: hidden;
    margin-top: 10px;
    font-weight: 900;
}

.mpc-title a {
    text-decoration: none;
    color: black;
}

.mpc-title a:hover {
    text-decoration: underline
}

.mpc-content {
    height: 60px;
    overflow: hidden;
    margin: 20px 0px 20px 0px;
    text-align: justify;
    word-wrap: break-word;
    text-align: justify;
}

.mpc-icons {
    display: flex;
    font-size: 32px;
    gap: 15px;
}

.mpc-mod {
    display: flex;
    gap: 10px;
    text-align: center;
    margin-top: 20px;
}

.mpc-mod button {
    padding: 5px 10px;
    border: 0;
    border-radius: 4px;
    background: var(--btn);
    color: #fff;
    cursor: pointer;
    width: 50%;
}

.mpc-mod button:hover {
    background-color: var(--btn-hover)
}


/* x CARDS x */


/* x My Project x */

<!--MPI = My Project Input-->
    <div class="mpi-title">
        <p>ADD BLOG</p>
    </div>
    <!--Form-->
    <div class="mpi-form-container">
        <div class="mpi-form">
            <!--MP = My Project Input-->
            <form onsubmit="addBlog(event)">
                <div class="mpi-name">
                    <label for="inputProjectName">Project Name</label>
                    <input type="text" id="inputProjectName">
                </div>
                <div class="mpi-date">
                    <div class="date-start">
                        <label for="inputStartDate">Start Date</label>
                        <input type="date" id="inputStartDate">
                    </div>
                    <div class="date-end">
                        <label for="inputEndDate">End Date</label>
                        <input type="date" id="inputEndDate">
                    </div>
                </div>
                <div class="mpi-desc">
                    <label for="inputDescription">Description</label>
                    <textarea name="inputDescription" id="inputDescription"></textarea>
                </div>
                <div class="mpi-check-cont">
                    <label for="checkTitle">Technologies</label>
                    <div class="mpi-check">
                        <div class="check-left">
                            <div>
                                <label for="checkHtml" class="check-label">HTML
                                    <input type="checkbox" id="checkHtml" name="checkHtml"check>
                                    <span class="checkmark"></span>
                                </label>
                            </div>
                            <div>
                                <label for="checkNode" class="check-label">Node Js
                                    <input type="checkbox" id="checkNode" name="checkNode">
                                    <span class="checkmark"></span>
                                </label>
                            </div>
                        </div>
                        <div class="check-right">
                            <div>
                                <label for="checkCss" class="check-label">CSS
                                    <input type="checkbox" id="checkCss" name="checkCss">
                                    <span class="checkmark"></span>
                                </label>
                            </div>
                            <div>
                                <label for="checkReact" class="check-label">React Js
                                    <input type="checkbox" id="checkReact" name="checkReact">
                                    <span class="checkmark"></span>
                                </label>
                            </div>
                        </div>
                    </div>
                </div>
                <div>
                    <label>Upload Image</label>
                    <div class="mpi-image">
                        <label for="inputImage">
                    <div class="mpi-choose">Choose</div>
                    <div class="mpi-attach"><i class="fa-solid fa-paperclip"></i></div>
                    </label>
                        <input type="file" id="inputImage" hidden />
                    </div>
                </div>
                <div class="mpi-submit">
                    <button type="submit">Submit</button>
                </div>
            </form>
        </div>
    </div>
    <!--xFormx-->

<div class="mp-container">
        <div class="mp-title">
            <p>MY PROJECT</p>
        </div>
        <div id="contents" class="mp-card-container">
            <div class="mp-card">
                <!--MPC = My Project Card-->
                <div class="mpc-img">
                    <img src="assets/phone1.jpg" alt="">
                </div>
                <div class="mpc-title">
                    <a href="blog-detail.html">
                        <p>Dumbways Mobile App - 2022</p>
                    </a>
                </div>
                <div class="mpc-duration">
                    <small>Duration: 2 Month</small>
                </div>
                <div class="mpc-content">
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque temporibus excepturi deserunt consequuntur molestias adipisci corporis neque error. Delectus, dolorum dolorem neque vel earum ipsam ut fugiat quos distinctio blanditiis.
                </div>
                <div class="mpc-icons">
                    <i class="fa-brands fa-html5"></i>
                    <i class="fa-brands fa-css3-alt"></i>
                    <i class="fa-brands fa-node-js"></i>
                    <i class="fa-brands fa-react"></i>
                </div>
                <div class="mpc-mod">
                    <button>Edit</button>
                    <button>Delete</button>
                </div>
            </div>
        </div>

    </div>

以下是博客详细信息中的片段:

document.getElementById("blog-detail").innerHTML = `
    <div class="bd-title">
        <p>${blogs[i].title}</p>
    </div>
    <div class="bd-idc">
    <div class="idc-left">
        <img src="${blogs[i].image}" alt="Blog Image">
    </div>
    <div class="idc-right">
        <p>Duration</p>
        <div class="bd-duration">
            <div style="padding-left: 2px;">
                <i class="fa-solid fa-calendar-days"></i>
                <p>1 Jan 2021 - 1 Feb 2021</p>
            </div>
            <div>
                <i class="fa-solid fa-clock"></i>
                <p>1 Month</p>
            </div>
        </div>
        <div class="bd-tech">
            <p>Technologies</p>
            <div class="i-tech">
                <!--TI = Tech Icon-->
                <div class="ti-left">
                    <div>
                    ${(blogs[i].icons.html === true) ? '<i class="fa-brands fa-html5"></i>' : ''}
                        <p>HTML</p>
                    </div>
                    <div>
                    ${(blogs[i].icons.nodeJs === true) ? '<i class="fa-brands fa-node-js"></i>' : ''}
                        <p>nodeJs </p>
                    </div>
                </div>
                <div class="ti-right">
                    <div>
                    ${(blogs[i].icons.css === true) ? '<i class="fa-brands fa-css3-alt"></i>' : ''}
                        <p>CSS</p>
                    </div>
                    <div>
                    ${(blogs[i].icons.reactJs === true) ? '<i class="fa-brands fa-react"></i>' : ''}
                        <p>ReactJs</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="bd-content">
    <p>
        ${blogs[i].content}
    </p>
</div>
    `;

/* Blog Detail */

.bd-title {
    margin: 50px 0px;
    text-align: center;
    font-size: 40px;
    font-weight: bold;
}

.bd-idc {
    width: 100%;
    display: flex;
    padding: 0px 50px;
    gap: 20px;
}

.idc-left {
    flex: 55%;
    overflow: hidden;
    object-fit: cover;
    padding: 0px 20px
}

.idc-left img {
    width: 100%;
    height: 400px;
    object-fit: cover;
}

.idc-right {
    flex: 45%
}

.idc-right p {
    font-size: 30px;
    font-weight: bold;
}

.bd-duration {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.bd-duration p {
    font-size: 30px;
    font-weight: bold;
}

.bd-duration div {
    display: flex;
    align-items: center;
    gap: 10px;
}

.bd-duration div p {
    font-size: 20px;
}

.bd-duration div i {
    font-size: 30px;
}

.bd-tech {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.bd-tech p {
    font-size: 30px;
    font-weight: bold;
}

.i-tech {
    display: flex;
    gap: 0px 60px;
}

.ti-left div {
    display: flex;
    gap: 0px 20px;
    margin-bottom: 20px;
}

.ti-right div {
    display: flex;
    gap: 0px 20px;
    margin-bottom: 20px;
}

.bd-tech div p {
    font-size: 20px;
}

.bd-tech div i {
    font-size: 30px;
}

.bd-content {
    margin-top: 50px;
    padding: 0px 68px;
}

.bd-content p {
    font-size: 20px;
    text-align: justify;
}


/* x Blog Detail x */

<!--Blog Detail-->
    <div id="blog-detail">
        <!--BD = Blog Detail-->
        <div class="bd-title">
            <p>Blog Title</p>
        </div>
        <!--IDC = Image, Duration, Categories-->
        <div class="bd-idc">
            <div class="idc-left">
                <img src="assets/phone5.jpg" alt="Blog Image">
            </div>
            <div class="idc-right">
                <p>Duration</p>
                <div class="bd-duration">
                    <div style="padding-left: 2px;">
                        <i class="fa-solid fa-calendar-days"></i>
                        <p>1 Jan 2022 - 1 Aug 2022</p>
                    </div>
                    <div>
                        <i class="fa-solid fa-clock"></i>
                        <p>8 Month</p>
                    </div>
                </div>
                <div class="bd-tech">
                    <p>Technologies</p>
                    <div class="i-tech">
                        <!--TI = Tech Icon-->
                        <div class="ti-left">
                            <div>
                                <i class="fa-brands fa-html5"></i>
                                <p>HTML</p>
                            </div>
                            <div>
                                <i class="fa-brands fa-node-js"></i>
                                <p>nodeJs </p>
                            </div>
                        </div>
                        <div class="ti-right">
                            <div>
                                <i class="fa-brands fa-css3-alt"></i>
                                <p>CSS</p>
                            </div>
                            <div>
                                <i class="fa-brands fa-react"></i>
                                <p>ReactJs</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="bd-content">
            <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit libero sapiente, minus atque a nesciunt ipsum? Illum sapiente odio provident maxime aut nihil voluptatem officia voluptatibus vel! Necessitatibus, ipsam esse. Lorem ipsum dolor sit amet
                consectetur adipisicing elit. Suscipit libero sapiente, minus atque a nesciunt ipsum? Illum sapiente odio provident maxime aut nihil voluptatem officia voluptatibus vel! Necessitatibus, ipsam esse. Lorem ipsum dolor sit amet consectetur
                adipisicing elit. Suscipit libero sapiente, minus atque a nesciunt ipsum? Illum sapiente odio provident maxime aut nihil voluptatem officia voluptatibus vel! Necessitatibus, ipsam esse. Lorem ipsum dolor sit amet consectetur adipisicing
                elit. Suscipit libero sapiente, minus atque a nesciunt ipsum? Illum sapiente odio provident maxime aut nihil voluptatem officia voluptatibus vel! Necessitatibus, ipsam esse. Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit
                libero sapiente, minus atque a nesciunt ipsum? Illum sapiente odio provident maxime aut nihil voluptatem officia voluptatibus vel! Necessitatibus, ipsam esse. Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit libero sapiente,
                minus atque a nesciunt ipsum? Illum sapiente odio provident maxime aut nihil voluptatem officia voluptatibus vel! Necessitatibus, ipsam esse. Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit libero sapiente, minus atque
                a nesciunt ipsum? Illum sapiente odio provident maxime aut nihil voluptatem officia voluptatibus vel! Necessitatibus, ipsam esse.
            </p>
        </div>
    </div>

    <!--xBlog Detailx-->

我试图实现的是，当我点击缩略图标题时，我想要的是博客内容.html来显示我从博客输入的值.使用innerHTML的html

我试过使用这个模块.导出，script type="module"并导入博客详细信息中的两个js文件.html但没有任何效果:(

我试图浏览更多的解决方案，但我的英语不太适合浏览，我不知道搜索更多解决方案的关键字.

抱歉问了这么长时间，谢谢.

Javascript 如何将主 js 文件中的数组用于不同的 js 文件

推荐答案

Javascript相关问答推荐

一次仅播放一个音频

如何在不分配整个数组的情况下修改包含数组的行为主体？

通过在页面上滚动来移动滚动条

在React中获取数据后，如何避免不必要的组件闪现1秒？

无法在nextjs应用程序中通过id从mongoDB删除'

在网页上添加谷歌亵渎词

如何使用JavaScript将文本插入空div

v—自动完成不显示 Select 列表中的所有项目

从包含数百行的表中获取更改后的值(以表单形式发送到后端)的正确方法是什么？

单个HTML中的多个HTML文件

TypeError：无法分解'；React2.useContext(...)'；的属性'；basename'；，因为它为空

面对代码中的错误作为前端与后端的集成

如何用javascript更改元素的宽度和高度？

通过跳过某些元素的对象进行映射

我为什么要使用回调而不是等待？

如何在TransformControls模式下只保留箭头进行翻译？

为什么当雪碧的S在另一个函数中时，Phaser不能加载它？

Playwright：ReferenceError：browserContext未定义

鼠标进入，每秒将图像大小减小5%

我如何才能阻止我的球数以指数方式添加到我的HTML画布中？