Question

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

第二部分是通过使用 createElement 创建按钮，然后通过 addEventListener 在函数内向其添加点击事件来完成的，但是它显示了 [object 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

您无法通过在button中添加文本来添加innerHtml。 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]

2 个答案: