Javascript 联系我们表单-单击按钮时显示

我正在尝试获取一个按钮来运行JavaScript函数，该函数为我的网站打印一个联系人表单，但它不起作用。按钮会出现，但当您单击它时，表单不会显示

以下是我的JavaScript页面中的代码：

    function myFunction() {
    document.getElementById("demo").innerHTML = 
    '<div class="container">'
    +'<form action="/action_page.php">'
    +'<label for="fname">First Name</label>'
    +'<input type="text" id="fname" name="firstname" placeholder="Your 
    name..">'

    + '<label for="lname">Last Name</label>'
    +'<input type="text" id="lname" name="lastname" placeholder="Your last 
    name..">'

    +'<label for="country">Country</label>'
    +'<select id="country" name="country">'
    +'<option value="australia">Australia</option>'
    +'<option value="canada">Canada</option>'
    +'<option value="usa">USA</option>'
    +'</select>'

    +'<label for="subject">Subject</label>'
    +'<textarea id="subject" name="subject" placeholder="Write something.." 
    style="height:200px"></textarea>'

    +'<input type="submit" value="Submit">'
    +'</form>'
    +'</div>';
    }

函数myFunction（）{
document.getElementById（“demo”）.innerHTML=
''
+''
+“名字”
+''
+“姓”
+''
+“国家”
+''
+“澳大利亚”
+“加拿大”
+“美国”
+''
+“主题”
+''
+''
+''
+'';
}

以下是“联系我们”页面中的代码：

    <button onclick="myFunction()">If you have any questions, concerns, or 
    comments please click here to send us an email: </button>
    <p id="demo"></p>

如果您有任何问题、顾虑或
评论请单击此处向我们发送电子邮件：

我尝试过不使用连接，但也不起作用

---

任何帮助都将不胜感激。

不要使用函数创建HTML

//获取联系人表单按钮并为单击添加事件侦听器
document.getElementById（“显示联系人表单”）.addEventListener（“单击”，函数（e）{
//单击按钮时，删除隐藏的类，该类将显示联系人表单
document.getElementById（“联系人表单”）.classList.remove（“隐藏”）；
//隐藏“联系我们”按钮
this.classList.add（“隐藏”）；
});
/*用于隐藏内容*/
.隐藏{
显示：无；
}

名字
姓
国家
option value=“澳大利亚”>澳大利亚
加拿大
美国
主题
联系我们
htmlString未正确连接。我也更喜欢JavaScript绑定函数，而不是内联事件处理程序：


函数myFunction（）{
document.getElementById（“demo”）.innerHTML=
''
+''
+“名字”
+''
+“姓”
+''
+“国家”
+''
+“澳大利亚”
+“加拿大”
+“美国”
+''
+“主题”
+''
+''
+''
+'';
}
document.getElementById（'myBtn'）。addEventListener（'click'，myFunction）
如果您有任何问题、顾虑或
评论请单击此处向我们发送电子邮件：
您的代码工作正常，只存在不必要的
输入问题，就像您在
占位符中输入一样

检查下面的示例

function myFunction() {
        document.getElementById("demo").innerHTML = 
        '<div class="container">'
        +'<form action="/action_page.php">'
        +'<label for="fname">First Name</label>'
        +'<input type="text" id="fname" name="firstname" placeholder="Your name..">'

        + '<label for="lname">Last Name</label>'
        +'<input type="text" id="lname" name="lastname" placeholder="Your last name..">'

        +'<label for="country">Country</label>'
        +'<select id="country" name="country">'
        +'<option value="australia">Australia</option>'
        +'<option value="canada">Canada</option>'
        +'<option value="usa">USA</option>'
        +'</select>'

        +'<label for="subject">Subject</label>'
        +'<textarea id="subject" name="subject" placeholder="Write something.." style="height:200px"></textarea>'

        +'<input type="submit" value="Submit">'
        +'</form>'
        +'</div>';
    }

函数myFunction（）{
document.getElementById（“demo”）.innerHTML=
''
+''
+“名字”
+''
+“姓”
+''
+“国家”
+''
+“澳大利亚”
+“加拿大”
+“美国”
+''
+“主题”
+''
+''
+''
+'';
}
按钮会出现，但当您单击它时
哪个按钮？我也没有看到任何点击处理程序…很抱歉，我是新来的堆栈溢出，这学期我要上我的第一堂Web开发课，所以我还在学习。我可以在我的帖子中添加一张照片吗？请在你的问题中以文本形式发布所有相关代码-不要使用代码的图像。我做过，代码是文本，但我确实添加了一张照片来显示你询问的按钮谢谢你的建议和帮助，非常感谢！而是使用
+
将一个字符串与此字符一起使用`