Question

enter image description here

我正试图获得一个按钮来运行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而不是内联事件处理程序来绑定函数：

<!-- Create the form with straight HTML -->
<div id="contact-form" class="container hidden">
  <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 to show contact form -->
<button id="show-contact-form">Contact us</button>

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

尽管我更喜欢使用Template Literals来替换 htmlString ，这更干净。

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

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

Answer 2

不要使用函数来创建HTML。

    {
  "id": "eeafa272cebfd4b22385bc4b645e762c",
  "token": "eeafa272cebfd4b22385bc4b645e762c",
  "line_items": [
    {
      "id": 704912205188288575,
      "properties": {
      },
      "quantity": 3,
      "variant_id": 704912205188288575,
      "key": "704912205188288575:33f11f7a1ec7d93b826de33bb54de37b",
      "discounted_price": "19.99",
      "discounts": [
      ],
      "gift_card": false,
      "grams": 200,
      "line_price": "59.97",
      "original_line_price": "59.97",
      "original_price": "19.99",
      "price": "19.99",
      "product_id": 788032119674292922,
      "sku": "example-shirt-s",
      "taxable": true,
      "title": "Example T-Shirt - ",
      "total_discount": "0.00",
      "vendor": "Acme",
      "discounted_price_set": {
        "shop_money": {
          "amount": "19.99",
          "currency_code": "USD"
        },
        "presentment_money": {
          "amount": "19.99",
          "currency_code": "USD"
        }
      },
      "line_price_set": {
        "shop_money": {
          "amount": "59.97",
          "currency_code": "USD"
        },
        "presentment_money": {
          "amount": "59.97",
          "currency_code": "USD"
        }
      },
      "original_line_price_set": {
        "shop_money": {
          "amount": "59.97",
          "currency_code": "USD"
        },
        "presentment_money": {
          "amount": "59.97",
          "currency_code": "USD"
        }
      },
      "price_set": {
        "shop_money": {
          "amount": "19.99",
          "currency_code": "USD"
        },
        "presentment_money": {
          "amount": "19.99",
          "currency_code": "USD"
        }
      },
      "total_discount_set": {
        "shop_money": {
          "amount": "0.0",
          "currency_code": "USD"
        },
        "presentment_money": {
          "amount": "0.0",
          "currency_code": "USD"
        }
      }
    }
  ],
  "note": null,
  "updated_at": "2018-10-26T17:55:20.401Z",
  "created_at": "2018-10-26T17:55:20.400Z"
}

// Get the contact form button and add an event listener for the click
document.getElementById("show-contact-form").addEventListener("click", function(e) {

  // When the button is clicked, remove the hidden class, which will show the contact form
  document.getElementById("contact-form").classList.remove("hidden");

  // Hide the contact us button
  this.classList.add("hidden");
});

/* Used to hide content */
.hidden {
  display: none;
}

Answer 3

您的代码可以正常工作，就像您在enter中输入一样，只会出现不必要的placeholder问题。

签出下面的示例

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

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

3 个答案: