如何动态生成clickTag变量并在HTML锚点中使用

不用手动维护每个clickTag变量和按钮标签，直接通过遍历buttons数组就能完成自动化生成，具体实现如下：

实现思路 #

• 遍历buttons数组，给全局window对象动态添加clickTag1、clickTag2这类变量
• 同时根据数组数据动态创建对应的<a>和<div>元素，插入到页面容器中

完整代码示例 #

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="ad.size" content="width='320',height='320'" />
    <link rel="stylesheet" href="css/styles.css" />
    <title>Interactive Images</title>
</head>

<body>
    <div class="container">
        <!-- 按钮会在这里动态生成 -->
    </div>

    <script>
        let buttons = [
            {
                buttonId: 103676,
                link: "www.google.com",
            },
            {
                buttonId: 432549,
                link: "www.yahoo.com",
            },
            // 可直接新增按钮配置，无需修改其他代码
            {
                buttonId: 789012,
                link: "www.example.com",
            }
        ];

        // 获取页面容器
        const container = document.querySelector('.container');

        // 遍历数组生成变量和按钮
        buttons.forEach((button, index) => {
            // 生成全局clickTag变量：clickTag1、clickTag2...
            const clickTagName = `clickTag${index + 1}`;
            window[clickTagName] = button.link;

            // 创建a标签
            const anchor = document.createElement('a');
            anchor.href = `javascript:window.open(window.${clickTagName})`;

            // 创建按钮div
            const buttonDiv = document.createElement('div');
            buttonDiv.dataset.id = button.buttonId;
            buttonDiv.className = 'button-simple';
            buttonDiv.textContent = 'first points'; // 若需不同按钮文本，可给数组对象加text属性替换此处

            // 组装元素并插入容器
            anchor.appendChild(buttonDiv);
            container.appendChild(anchor);
        });
    </script>
</body>

</html>

补充说明 #

• 数组新增按钮配置后，代码会自动生成对应的clickTag变量和按钮元素，无需手动修改其他代码
• 修正了原代码里的拼写错误：conatiner改为container，ww.google.com补全为www.google.com

内容的提问来源于stack exchange，提问作者The Dead Man