Попытка добавить событие нажатия с помощью addEventListener к кнопке внутри функции, но обнаружился [объект 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

Вы не можете добавить 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>

Answer 2

Это потому, что вы пытаетесь объединить новый объект 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>