时间戳

首页 > 解决方案 > 从具有唯一 onclick 参数的模板创建按钮的动态列表

javascript - 从具有唯一 onclick 参数的模板创建按钮的动态列表

问题描述

你好仁慈的互联网陌生人！我是一个从 c# 转过来的 js 菜鸟，并且已经为一些真正不应该那么困难的事情苦苦挣扎了好几天。我的意图如标题中所述，我的无能代码如下：

function Create_button () {
    let temp = document.getElementsByTagName("template")[0];
    clon = temp.cloneNode;
    clon.onclick = someFunction(someparam);
}
<!DOCTYPE html>
<html>
<body>
<script src="Test3.js"></script>

<button onclick="Create_button()">New</button>

<div id="entry_list">
</div>

<template>
    <button>Alert</button>
</template>

</body>
</html>

标签： javascripthtmltemplatesbutton

解决方案

我很感激你开始学习 JavaScript 的雄心。我建议您在此过程中学习现代前端框架，例如 VueJS。如果我正确理解了您的挑战，您希望创建一种方法来动态添加带有自定义处理程序的按钮。您可以在添加的代码段中查看它。祝你在学习 JavaScript 的道路上好运！

参考资料：
https ://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array

https://vuejs.org/v2/guide/events.html 

<!DOCTYPE html>
<html>

<head>
  <title>My first Vue app</title>
  <script src="https://unpkg.com/vue"></script>
</head>

<body>
  <div id="app">
    {{ message }}
    <div @click="addButton">Add button</div>
    <div v-for="(button, index) in buttonsWithData">
      <button @click="button.handler">{{ button.name }}</button>
    </div>
  </div>

  <script>
    var app = new Vue({
      el: "#app",
      data: {
        message: "Hello Vue!",
        buttonsWithData: [
          {
            name: 'foo',
            value: 42,
            handler: () => { console.log('some handler') }
          }
        ],
        buttons: [
          () => {
            console.log("first");
          },
          () => {
            console.log("second");
          },
          () => {
            console.log("third");
          }
        ]
      },
      computed: {
        buttonCount: function() {
          return this.buttons.length
        }
      },
      methods: {
        addButton: function() {
          this.buttons.push(() => {
            console.log(`button ${this.buttonCount}`)
          })
        }
      }
    });
  </script>
</body>

</html>

推荐阅读