從輸入文本區域獲取值並將它們放在一個<div>

Question

HTML代碼

<form novalidate>
  <div class="list">
    <div class="list list-inset">
      <label class="item item-input" id="descriptions">
        <input type="text" height: "90" class="description" placeholder="Description ..." ng-model="describe">
      </label>
      <label input="email" class="item item-input" id="email" ng-model="email">
        <span class="input-label">Email</span>
        <input type="email">
      </label>
      <label class="item item-input" ng-model="date">
        <span class="input-label">Date</span>
        <input type="date">
      </label>
    </div>
    <button class="button button-block button-balanced" ng-click="insertData(describe,email, date); AddItem()">Add Task</button>

    <button class="button button-block button-assertive" ng-click="closeModal()">cancel</button>
  </div>
</form>

我想要一個函數，當單擊“添加任務”按鈕時，該函數接受這些輸入文本字段的值並將它們傳遞到<div> 。

Answer 1

因此，您需要為復制數據的按鈕設置單擊事件處理程序。 請參閱下面的內聯評論：

 // Get references to DOM elements needed to solve problem: var addTask = document.querySelector(".button-balanced"); var description = document.querySelector(".description"); var email = document.querySelector("[type=email]"); var date = document.querySelector("[type=date]"); // Set up click event handling function for button addTask.addEventListener("click", function(){ // Create an new "row" for data var div = document.createElement("div"); // populate the "row" with the values from the text fields div.textContent = description.value + ", " + date.value + ", " + email.value; // Add the row to the document document.body.appendChild(div); });

 <form novalidate> <div class="list"> <div class="list list-inset"> <label class="item item-input" id="descriptions"> <input type="text" height: "90" class="description" placeholder="Description ..." ng-model="describe"> </label> <label input="email" class="item item-input" id="email" ng-model="email"> <span class="input-label">Email</span> <input type="email"> </label> <label class="item item-input" ng-model="date"> <span class="input-label">Date</span> <input type="date"> </label> </div> <button class="button button-block button-balanced" ng-click="insertData(describe,email, date); AddItem()">Add Task</button> <button class="button button-block button-assertive" ng-click="closeModal()">cancel</button> </div> </form>

Answer 2

我相信您的問題是 ID 重復：

<label id="email">
  <input id="email">
</label>

這是無效代碼，因為 ID 在同一文檔中必須是唯一的。 如果您訪問<input>的內容，如果您使用 ID 訪問元素，您將獲得 undefined，因為 ID 已被標簽占用。

標簽使用for屬性關聯：

<label for="email">
  <input id="email">
</label>

這可能會解決它。

如果沒有，您可以使用純 JavaScript 和 DOM：

<label for="email">Email: <input id="email"></label>
<label for="date">Date: <input id="date" type="date"></label>
<button id="add">Add</button>
<script>
  document.getElementById("add").addEventListener('click', function() {
    var div = document.createElement('div');
    div.textContent = document.getElementById('email').value + ' on the ' + document.getElementById('date').value;
    document.body.appendChild(div);
  });
</script>