Question

对于作业，我无法触摸HTML代码并且正在编辑外部JS文件。我必须将代码引用到现有类并将其转换为运行脚本的按钮。

必须在加载时运行以将具有给定id的元素转换为也可以在单击时运行函数的按钮。

所以，让我们说id="bar"，我该怎么办呢？

我的代码根本不起作用。

document.getElementById("bar").onload = function () { myFunction() };

function myFunction() {
  document.getElementById("bar").innerHTML = "<button></button>";
}

Answer 1

为什么不在DOM准备好的情况下执行脚本？为此，

document.addEventListener('DOMContentLoaded', function () { 
    document.getElementById("bar").innerHTML = "<button></button>";
}, false);

Answer 2

Updated Codepen

我认为这有点你需要

var bar = document.getElementById('bar');

window.onload = function() {
  var barInner = bar.innerHTML;
  bar.innerHTML = '<button>' + barInner + '</button>';
}

bar.onclick = function() {
  alert("Hello\nHow are you?");
};

Answer 3

您只需要一个createElement函数。这有效：

document.addEventListener("DOMContentLoaded", function(){
var button = document.createElement("button");
button.innerHTML = "This is a button";
// assuming the Div's ID is bar
var div = document.getElementById('bar');
div.appendChild(button);
//the following function will alert a window when the button is clicked
button.addEventListener ("click", function() {
    alert("Button was clicked");
    });

});

Answer 4

document.getElementById("bar").onload = myFunction();

  function myFunction() {
    document.getElementById("bar").innerHTML = "<button>Button</button>";
  }

你去吧！

Answer 5

并非每个HTML元素都有加载事件。 其中只有一些是关注的，如窗口，图像......等请查看here on MDN以了解有关此内容的更多信息。

这是一个解决您提到的所有内容的简单代码段。

window.addEventListener("load", () => {
  // you can put your entire script in here.
  
  var elt = document.getElementById("bar"),
    button = document.createElement("button");
  
  button.textContent = elt.textContent;
  button.onclick = callback;
  
  elt.textContent = '';
  elt.appendChild(button);
  
  function callback() {
    console.log("The button has been clicked");
  }
});

<div id="bar" style="background: beige; height: 2em">Click me</div>

在上一个代码段中，我在元素中附加了按钮。但是，如果问题确实是将其转换为按钮，那么我们就去了：

window.addEventListener("load", () => {
  // you can put your entire script in here.
  
  var elt = document.getElementById("bar"),
    container = elt.parentNode,
    button = document.createElement("button");
  
  button.id = elt.id; // if you want to keep the id
  button.textContent = elt.textContent;
  button.onclick = callback;
  
  container.removeChild(elt);
  container.appendChild(button);
  
  function callback() {
    console.log("The button has been clicked");
  }
});

<div style="background: #fee; height: 2em">
  <div id="bar" style="background: beige; height: 2em">Click me</div>
</div>

如何在加载Javascript时向div类添加按钮？

5 个答案:

Updated Codepen