Onclick 使用外部 javascript “运行函数”答案

【问题标题】：Onclick "run a function" using external javascriptOnclick 使用外部 javascript “运行函数”
【发布时间】：2021-04-29 16:20:55
【问题描述】：

我创建了一个简单的项目，在该项目中单击一个按钮，然后应该创建另一个按钮（按钮 2），并且前一个按钮应该消失，这工作正常。但是当我点击按钮 2 时，应该执行一个特定的功能。我被困在这里了。

It says cannot set property to null.

function myFunction1() {
  var x = document.createElement("BUTTON");
  var t = document.createTextNode("button 2");
x.setAttribute('id','bt2');
  x.appendChild(t);
  document.body.appendChild(x);

var a= document.getElementById('bt1');  
a.style.display='none';

}
var item = document.getElementById('bt2');
item.onclick = myFunction;
function myFunction() {
  document.getElementsByTagName("BODY")[0].style.backgroundColor = "lime";
    }

<button id= 'bt1' onclick="myFunction1();">
 button 1
</button>

【问题讨论】：

实际上 item1 为 null，因为在您单击 button1 之前，示例中没有 #bt2 元素。因此，您不能将属性 onclick 分配给空引用。
我知道还有什么选择吗？

标签： javascript html css web

【解决方案1】：

您试图将onclick 属性设置为DOM 中尚不存在的元素（它将在您单击按钮1 后创建），因此将最终代码移动到myFunction1 中，在创建第二个按钮之后。

function myFunction1() {
  var b = document.body;
  var x = document.createElement("button");
  var t = document.createTextNode("button 2");

  x.id = 'bt2';
  x.appendChild(t);
  b.appendChild(x);

  var btt1 = document.getElementById('bt1');  
  btt1.style.display='none';

  var btt2 = document.getElementById('bt2');
  btt2.addEventListener('click', function() {
    b.style.backgroundColor = "lime";
  });
}

<button id= 'bt1' onclick="myFunction1();">
 button 1
</button>

【讨论】：

如果我想再次显示隐藏的按钮怎么办