Question

我正在开展一个项目，我们正在努力创建一个网站，用于注册音乐试听。其中一部分涉及显示可用试听日的按钮，一旦点击，显示按钮，每个按钮都分配了一个时间。单击这些按钮后，它们会更改其功能，并且不会提交任何内容。

这是一个可行的概念吗？如果是这样，我该怎么执行呢？

Answer 1

这样的事情：

var btn = document.createElement('button');

或者：

var btn = document.createElement('input');
btn.type = 'button';

Answer 2

Look into the document.createElement() function in Javascript。示例用法是：

<html>
<head></head>
<body>
    <div id="div1"></div>

    <script>
    function createButton(id, text) {
      var b = document.createElement("input");
      b.type = "button";
      b.id = id;
      b.value = text;
      b.onclick += button_click; //assigns the button_click function to the click event of the button.
      var div1 = document.getElementById("div1");
      div1.appendChild(b); //add the button to the page in the div
    }

    function button_click(e) {
      e = window.event ? window.event : e;
      var b = e.target;
      b.disabled = true;
    }

    createButton("button1", "Click Me");
    </script>
</body>
</html>

此示例还使用元素的event object和disabled属性以及document.getElementById() function。

可以从任何其他函数调用createButton()函数示例，但在这种情况下，它将始终添加div元素的新按钮。

此处e.target用法允许您获取点击的按钮，实质上是该事件的目标。 e = window.event ? window.event : e;行是一种跨浏览器方式，用于确保已拾取JavaScript事件对象。

此示例可能无法解决您的具体问题，但它确实回答了您在HTML / JavaScript中是否可行的问题。

如何从javascript函数创建HTML按钮？

2 个答案: