調用外部 .js 數組作為 HTML 中的按鈕

Question

我想將此數組稱為.html文件中的按鈕。

var besaetning = {
    'Koeer' : 50,
    'Hunde' : 1,
    'Grise' : 100,
    'Faar' : 20
};

該數組位於外部.js文件中，兩者都在同一文件夾中。

我需要按鈕將數組顯示為表格！

誰能幫我？

Answer 1

您可以使用模塊導入/導出語句。

出口

export 語句在創建 JavaScript 模塊時用於從模塊導出到函數、對象或原始值的實時綁定，以便其他程序可以使用 import 語句使用它們。 導入綁定的值可能會在導出它的模塊中發生變化。 當模塊更新它導出的綁定的值時，更新將在其導入的值中可見。

假設你有一個名為array.js的文件：

//Adding export to make array usable outside the .js file
export var besaetning = {
    'Koeer' : 50,
    'Hunde' : 1,
    'Grise' : 100,
    'Faar' : 20
};

進口

靜態導入語句用於導入由另一個模塊導出的只讀實時綁定。

導入的模塊處於嚴格模式，無論您是否聲明它們。 除非此類腳本具有 type="module"，否則無法在嵌入式腳本中使用 import 語句。 導入的綁定稱為實時綁定，因為它們由導出綁定的模塊更新。

還有一個類似函數的動態 import()，它不需要 type="module" 的腳本。

然后在您的 html 頁面中，只需使用 import 從您的 js 文件中獲取先前導出的數組

<script type="module">
    import {besaetning} from './array.js'
    console.log(besaetning)
</script>

在您的情況下，如果您想在單擊按鈕時將數組轉換為表格，您的代碼必須如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<button id="myBtn">Click</button>
<script type="module">
    import {besaetning} from './array.js';
    const table = document.createElement('table')
    document.querySelector('#myBtn').addEventListener('click',()=>{
        Object.keys(besaetning).map(k=>{
            let tr = document.createElement('tr'),th=document.createElement('th'),td=document.createElement('td');
            td.innerHTML = besaetning[k];
            th.innerHTML = k;
            tr.appendChild(th)
            tr.appendChild(td)
            table.appendChild(tr);
        })
        document.body.appendChild(table)
    })
</script>
</body>
</html>

縮小的 JS 版本：

import {besaetning} from "./array.js";
const table = document.createElement("table");
document.querySelector("#myBtn").addEventListener("click", (() => {
    Object.keys(besaetning).map((e => {
        let t = document.createElement("tr"), n = document.createElement("th"), a = document.createElement("td");
        a.innerHTML = besaetning[e], n.innerHTML = e, t.appendChild(n), t.appendChild(a), table.appendChild(t)
    })), document.body.appendChild(table)
}))

調用外部 .js 數組作為 HTML 中的按鈕

問題描述

1 個解決方案

解決方案1
0 2021-11-05 10:58:06

調用外部 .js 數組作為 HTML 中的按鈕

問題描述

1 個解決方案

解決方案1 0 2021-11-05 10:58:06

解決方案1
0 2021-11-05 10:58:06