How do I use an array from main js file for different js file?

Question

I have a task to make a blog thumbnail and blog content from input that looks like this: blog.html

This is the thumbnails which is located in the same HTML file as the input form: blog.html

This is the blog content and what I'm trying to achieve which is located in the different HTML file: blog-detail.html

I have 2 js files, blog.js for blog.html and blog-detail.js for blog-detail.html. All of the blog value is saved in let blogs = [] in blog.js

This is the snippet from the blog input and thumbnails:

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>

This is the snippet from the blog detail:

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-->

What I'm trying to achieve is when I click the thumbnail title and when directed I want the blog-content.html to show the value that I input from blog.html using innerHTML

I've tried to use module.exports, script type="module" and importing both js files in blog-detail.html but nothing work :(

and I've tried to browse for more solutions but my English isn't very good for browsing, I don't know the keyword to search for more solutions.

Sorry for the long question, Thanks.

You can try saving these blog values in the localStorage and retrieve them insids another page. Another option would be to store it in a cloud — T. Jony
– T. Jony, Commented May 14, 2022 at 23:26

Yogesh · Accepted Answer · 2022-05-15 02:34:49Z

1

you can use local Storage. You can pass you blogs array to from you blogs.js file to local Storage by using localStorage.setItem(); function and now you can retrive value from your another js file (blog-detail.js) by using localStorage.getItem().

If you want to learn more about how to use them Go Here

I hope this solves your problem.

answered May 15, 2022 at 2:34

Yogesh

511 silver badge5 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Greg Droge Over a year ago

It solved my problem but not in they way I wanted it to be, I have to innerHTML whole same page because I can't get the key name for the key in localStorage. I use "const objectBlogString = JSON.stringify(blogs);" to stringify my blogs object then I use "localStorage.setItem(${blogs[i].title}, objectBlogString);" to set the Item key and value. How can I get the key name from another page because the key name is based on the name input on the different page?

Collectives™ on Stack Overflow

How do I use an array from main js file for different js file?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related