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

Question

我试图获取一个按钮来运行一个 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>';
    }

这是“联系我们”页面中的代码:

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

我试过在没有连接的情况下这样做，但这也不起作用。

如有任何帮助，我们将不胜感激。

Answer 1

htmlString 未正确连接。我也更喜欢 JavaScript 来绑定(bind)函数而不是内联事件处理程序:

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>';
    }
    
document.getElementById('myBtn').addEventListener('click',myFunction);

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

虽然我更喜欢使用 Template Literals从更干净的htmlString。

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>`;
}
 document.getElementById('myBtn').addEventListener('click',myFunction);

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