Javascript 试图通过addEventListener将click事件添加到函数内的按钮，但出现了[object HtmlButtoneElement]

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

我做了第二部分，创建了一个带有createElement的按钮，并通过addEventListener在函数中添加了一个点击事件，但它在浏览器中显示了[object HtmlButtoneElement]，而不是新按钮

我读过相关的问题，但我无法从中理解

HTML:

输入键
拯救

JS:

var obj、myJSON、showJSON、textSC、text2、outObj；
函数jsonSend（）{
obj={}；
obj.key1=document.getElementById（“key1”）.value；
obj.key2=document.getElementById（“key2”）.value；
obj.key3=document.getElementById（“key3”）.value；
//存储数据
myJSON=JSON.stringify（obj）；
setItem（“testJSON”，myJSON）；
//新按钮
showJSON=document.createElement（“按钮”）；
setAttribute（“id”，“showJSON”）；
textSC=document.createTextNode（“显示信息”）；
appendChild（textSC）；
addEventListener（“单击”，showFunc）；
document.getElementById（“demo”）.innerHTML=“数据已成功存储…”。。。

“+showJSON；
}
函数showFunc（）{
text2=localStorage.getItem（“testJSON”）；
outObj=JSON.parse（text2）；
控制台日志（outObj）；
}

这是因为您正在尝试将新DOM对象连接到字符串，并使用

.innerHTML

将其插入文档中，该方法仅适用于字符串。将这两个操作分开并附加DOM ojbect，而不是使用

.innerHTML

将其设置到文档中

var obj、myJSON、showJSON、textSC、text2、outObj；
函数jsonSend（）{
obj={}；
obj.key1=document.getElementById（“key1”）.value；
obj.key2=document.getElementById（“key2”）.value；
obj.key3=document.getElementById（“key3”）.value；
//存储数据
myJSON=JSON.stringify（obj）；
//setItem（“testJSON”，myJSON）；
//新按钮
showJSON=document.createElement（“按钮”）；
setAttribute（“id”，“showJSON”）；
textSC=document.createTextNode（“显示信息”）；
appendChild（textSC）；
addEventListener（“单击”，showFunc）；
document.getElementById（“demo”）.innerHTML=
“数据已成功存储…”
document.getElementById（“demo”）.appendChild（showJSON）；
}
函数showFunc（）{
//text2=localStorage.getItem（“testJSON”）；
outObj=JSON.parse（text2）；
控制台日志（outObj）；
}

输入键
拯救

这是因为您试图将新的DOM对象连接到字符串，并使用

.innerHTML

将其插入文档中，后者仅适用于字符串。将这两个操作分开并附加DOM ojbect，而不是使用

.innerHTML

将其设置到文档中

var obj、myJSON、showJSON、textSC、text2、outObj；
函数jsonSend（）{
obj={}；
obj.key1=document.getElementById（“key1”）.value；
obj.key2=document.getElementById（“key2”）.value；
obj.key3=document.getElementById（“key3”）.value；
//存储数据
myJSON=JSON.stringify（obj）；
//setItem（“testJSON”，myJSON）；
//新按钮
showJSON=document.createElement（“按钮”）；
setAttribute（“id”，“showJSON”）；
textSC=document.createTextNode（“显示信息”）；
appendChild（textSC）；
addEventListener（“单击”，showFunc）；
document.getElementById（“demo”）.innerHTML=
“数据已成功存储…”
document.getElementById（“demo”）.appendChild（showJSON）；
}
函数showFunc（）{
//text2=localStorage.getItem（“testJSON”）；
outObj=JSON.parse（text2）；
控制台日志（outObj）；
}

输入键
拯救

您不能通过将文本添加到

innerHtml

中来添加

按钮<代码>按钮

是一个对象，而不是文本。因此，必须使用

appendChild

方法将一个

HtmlElement

添加到另一个

var obj、myJSON、showJSON、textSC、text2、outObj；
//仅用于测试，请删除localStorageF并使用localStorage
var localStorageF={
setItem（键、值）{
localStorageF[key]=值；
日志（“存储的键：，键，“值：，值”）；
},
getItem（键）{
返回localStorageF[key]；
}
};
函数jsonSend（）{
obj={}；
obj.key1=document.getElementById（“key1”）.value；
obj.key2=document.getElementById（“key2”）.value；
obj.key3=document.getElementById（“key3”）.value；
//存储数据
myJSON=JSON.stringify（obj）；
setItem（“testJSON”，myJSON）；
//新按钮
showJSON=document.createElement（“按钮”）；
setAttribute（“id”，“showJSON”）；
textSC=document.createTextNode（“显示信息”）；
appendChild（textSC）；
addEventListener（“单击”，showFunc）；
var demo=document.getElementById（“demo”）
demo.innerHTML=“数据已成功存储…
”；
appendChild（showJSON）
}
函数showFunc（）{
text2=localStorageF.getItem（“testJSON”）；
outObj=JSON.parse（text2）；
控制台日志（outObj）；
}

输入键
拯救

您不能通过将文本添加到

innerHtml

中来添加

按钮<代码>按钮

是一个对象，而不是文本。因此，必须使用

appendChild

方法将一个

HtmlElement

添加到另一个

var obj、myJSON、showJSON、textSC、text2、outObj；
//仅用于测试，请删除localStorageF并使用localStorage
var localStorageF={
setItem（键、值）{
localStorageF[key]=值；
日志（“存储的键：，键，“值：，值”）；
},
getItem（键）{
返回localStorageF[key]；
}
};
函数jsonSend（）{
obj={}；
obj.key1=document.getElementB
<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>

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);
}