尝试通过 addEventListener 将点击事件添加到函数内的按钮，但 [object HTMLButtonElement] 出现了

Question

我尝试获取 3 个输入并通过单击一个按钮来存储它们，结果，我想显示一条消息并同时在消息旁边创建一个按钮。

我通过使用 createElement 创建按钮并在函数内通过 addEventListener 添加点击事件来完成第二部分，但是它在浏览器中显示 [对象 HTMLButtonElement] 而不是新按钮。

我已经阅读了相关问题，但我无法通过它们弄清楚。

HTML:

<h2>Enter keys</h2>
<input type="text" id="key1" placeholder="key1">
<input type="text" id="key2" placeholder="key2">
<input type="text" id="key3" placeholder="key3">
<button onclick="jsonSend()">Save</button>
<p id="demo"></p>

JS:

var obj, myJSON, showJSON, textSC, text2, outObj;

function jsonSend(){
    obj = {};
    obj.key1 = document.getElementById("key1").value;
    obj.key2 = document.getElementById("key2").value;
    obj.key3 = document.getElementById("key3").value;

    //storing data
    myJSON = JSON.stringify(obj);
    localStorage.setItem("testJSON", myJSON);

    //new button
    showJSON = document.createElement("button");
    showJSON.setAttribute("id", "showJSON");
    textSC = document.createTextNode("Show info");
    showJSON.appendChild(textSC);
    showJSON.addEventListener("click", showFunc);
    document.getElementById("demo").innerHTML = "data stored successfully... 
    <br>" + showJSON;
}

function showFunc(){
    text2 = localStorage.getItem("testJSON");
    outObj = JSON.parse(text2);
    console.log(outObj);
}

Answer 1

这是因为您试图将新的 DOM 对象连接到一个字符串，并使用 .innerHTML 将其插入到文档中，这仅适用于字符串。将这两个操作分开并附加 DOM 对象，而不是使用 .innerHTML 将其设置到文档中。

var obj, myJSON, showJSON, textSC, text2, outObj;

function jsonSend(){
    obj = {};
    obj.key1 = document.getElementById("key1").value;
    obj.key2 = document.getElementById("key2").value;
    obj.key3 = document.getElementById("key3").value;

    //storing data
    myJSON = JSON.stringify(obj);
    //localStorage.setItem("testJSON", myJSON);

    //new button
    showJSON = document.createElement("button");
    showJSON.setAttribute("id", "showJSON");
    textSC = document.createTextNode("Show info");
    showJSON.appendChild(textSC);
    showJSON.addEventListener("click", showFunc);
    document.getElementById("demo").innerHTML = 
       "data stored successfully... <br>"
    document.getElementById("demo").appendChild(showJSON);
}

function showFunc(){
    //text2 = localStorage.getItem("testJSON");
    outObj = JSON.parse(text2);
    console.log(outObj);
}

<h2>Enter keys</h2>
<input type="text" id="key1" placeholder="key1">
<input type="text" id="key2" placeholder="key2">
<input type="text" id="key3" placeholder="key3">
<button onclick="jsonSend()">Save</button>
<p id="demo"></p>

Answer 2

您不能通过向 innerHtml 添加文本来添加 button。 button 是对象，不是文本。因此，您必须使用 appendChild 方法将一个 HtmlElement 添加到另一个

var obj, myJSON, showJSON, textSC, text2, outObj;

// for testing only, delete localStorageF and use localStorage
var localStorageF = {
 setItem(key, value) {
    localStorageF[key] = value;
    console.log("stored key: ", key, "; value: ", value);
 },
 getItem(key) {
   return localStorageF[key];
 }
};

function jsonSend(){
  obj = {};
  obj.key1 = document.getElementById("key1").value;
  obj.key2 = document.getElementById("key2").value;
  obj.key3 = document.getElementById("key3").value;

  //storing data
   myJSON = JSON.stringify(obj);
  localStorageF.setItem("testJSON", myJSON);

  //new button
  showJSON = document.createElement("button");
  showJSON.setAttribute("id", "showJSON");
  textSC = document.createTextNode("Show info");
  showJSON.appendChild(textSC);
  showJSON.addEventListener("click", showFunc);
  var demo = document.getElementById("demo")
  demo.innerHTML = "data stored successfully...<br/>";
  demo.appendChild(showJSON)
}

function showFunc(){
  text2 = localStorageF.getItem("testJSON");
  outObj = JSON.parse(text2);
  console.log(outObj);
}

<h2>Enter keys</h2>
<input type="text" id="key1" placeholder="key1">
<input type="text" id="key2" placeholder="key2">
<input type="text" id="key3" placeholder="key3">
<button onclick="jsonSend()">Save</button>
<p id="demo"></p>

尝试通过 addEventListener 将点击事件添加到函数内的按钮，但 [object HTMLButtonElement] 出现了

Trying to add click event by addEventListener to a button inside function but [object HTMLButtonElement] showed up

javascript

ecmascript-5