Javascript-generated html elements doesn't render properly

Help
1

I’m building a simple blog to learn SSG and also for fun.

I came from Python. I have no knowledge in Ruby, no knowledge in Liquid, no knowledge in JavaScript.
I just picked up javascript a few days ago and only learnt some of the syntax I needed.

I want to make a table but I don’t want to hardcode everything in html, so I decided to write the table in javascript.

THE CODE 
<script>
    let table_labels, uploaders, resolutions, encodings, bit_depths, audios, subtitles, download_urls, aired_episode;
    
    table_labels = ['Source', 'Resolution', 'Encoding', 'Bit Depth', 'Audio', ' Subtitle'];
    uploaders = ['AkihitoSubs Weekly (WEB)', 'Judas (WEB)'];
    resolutions = ['1920 x 1080'];
    encodings = ['HEVC'];
    bit_depths = ['10 bits'];
    audios = ['Japanese'];
    subtitles = ['English'];
    download_urls = [
        'https://drive.shiro39.tk/0:/Anime/Lycoris%20Recoil/%5BASW%5D%20(WEB%20-%201080p%20-%20HEVC%20-%2010-bit%20-%20AAC)',
        'https://drive.shiro39.tk/0:/Anime/Lycoris%20Recoil/%5BJudas%5D%20(WEB%20-%201080p%20-%20HEVC%20-%2010-bit%20-%20AAC)'
    ];
    aired_episode = 7;

    document.write(`
        <h2>Mediainfo</h2>
        <div class="mdui-table-fluid">
        <table class="mdui-table mdui-color-grey-900">
        <thead>
        <tr>
    `);

    for (const table_label of table_labels) {
        document.write(`<th class="mdui-text-color-white-secondary" style="text-align: center;">${table_label}</th>`);
    }

    document.write(`
        </tr>
        </thead>
        <tbody>
    `);

    for (i = 0; i < uploaders.length; i++) {
        if (uploaders.length === 1) {
            document.write(`
                <tr>
                <td class="mdui-text-color-white" style="text-align: center;">${uploaders[0]}</td>
            `);
        } else {
            document.write(`
                <tr>
                <td class="mdui-text-color-white" style="text-align: center;">${uploaders[i]}</td>
            `);
        }
        
        if (resolutions.length === 1) {
            document.write(`<td class="mdui-text-color-white" style="text-align: center;">${resolutions[0]}</td>`);
        } else {
            document.write(`<td class="mdui-text-color-white" style="text-align: center;">${resolutions[i]}</td>`);
        }
        
        if (encodings.length === 1) {
            document.write(`<td class="mdui-text-color-white" style="text-align: center;">${encodings[0]}</td>`);
        } else {
            document.write(`<td class="mdui-text-color-white" style="text-align: center;">${encodings[i]}</td>`);
        }
        
        if (bit_depths.length === 1) {
            document.write(`<td class="mdui-text-color-white" style="text-align: center;">${bit_depths[0]}</td>`);
        } else {
            document.write(`<td class="mdui-text-color-white" style="text-align: center;">${bit_depths[i]}</td>`);
        }
        
        if (audios.length === 1) {
            document.write(`<td class="mdui-text-color-white" style="text-align: center;">${audios[0]}</td>`);
        } else {
            document.write(`<td class="mdui-text-color-white" style="text-align: center;">${audios[i]}</td>`);
        }
        
        if (subtitles.length === 1) {
            document.write(`
                <td class="mdui-text-color-white" style="text-align: center;">${subtitles[0]}</td>
                </tr>
            `);
        } else {
            document.write(`
                <td class="mdui-text-color-white" style="text-align: center;">${subtitles[i]}</td>
                </tr>
            `);
        }
    }

    document.write(`
        </tbody>
        </table>
        </div>
        <h2>Download</h2>
    `);

    uploaders.forEach((uploader, i) => {
        document.write(`
            <div class="mdui-table-fluid">
            <table class="mdui-table mdui-color-grey-900">
            <thead>
            <tr>
            <th class="mdui-text-color-white-secondary" style="text-align: center;">${uploader}</th>
            <th class="mdui-text-color-white-secondary" style="text-align: center;">Downlad</th>
            </tr>
            </thead>
            <tbody>
        `);

        for (let index = 0; index < aired_episode; index++) {
            document.write(`
                <tr>
                <td class="mdui-text-color-white" style="text-align: center;">Episode ${("0" + (index + 1)).slice(-2)}</td>
                <td class="mdui-text-color-white" style="text-align: center;">
                <a href="${download_urls[i]}/Episode ${('0' + (index + 1)).slice(-2)}.mkv">Download</a>
                </td>
                </tr>
            `);
        }

        document.write(`
            </tbody>
            </table>
            </div>
        `);
    })
</script>

I put the code into the markdown file.
only the table loaded, not the whole page.

but if I added it as an external file in the /assets/, the page loads but the table won’t load.

image
image1366×768 54.7 KB

after I manually refreshed the page, everything is loaded.
I have no idea what’s wrong…

the blog hosted on netlify and the source code on GitHub

2

I understand the problem you are having, but since I’m not a JavaScript expert, I would like to step back a moment and ask what you are trying to accomplish because there may be an easier way to handle what you are trying to do.

Since you are using Markdown, you can of course create HTML tables, but you might consider using Markdown-flavored tables.

For example, this code:

| Content | download |
|---| ---|
| Episode 1 | [download](https://somelinks) |
| Episode 2 | [download](https://somelinks) |
| Episode 3 | [download](https://somelinks) |

Produces this markdown table:

Content download
Episode 1 download
Episode 2 download
Episode 3 download

Here is some good documentation on markdown tables that show you how to do things like center and align content.

Also, are you pulling the content using JavaScript from your website or some other website? If it is your website, then I highly recommend you use Jekyll’s Data option. You can read from CSV, TSV, JSON, and YAML. By using both of these methods (markdown tables and data), you can do things the “Jekyll” way and avoid using Javascript/

Here are the docs that outline how to use data:

There are a number of types of data in Jekyll, so I created a 3-part series on it. Here is the start of the series:

And here is the video I think is most pertinent to you, since it shows how to create your own data:

Now if your JavaScript is indeed calling from another site and you want to keep doing that, I think it would be super helpful if you explain your code in more detail, explaining the use case for what you are trying to accomplish and how the code works as reading your JavaScript and your post as it stands, it is a little hard to parse our your question.