Question

我在表单下有一个用户输入，我正在尝试将输入添加为ul下的li。到目前为止，这是我的代码：

var button = document.querySelector("#lagre");
var reminderList = document.querySelector("#reminderList");
var input = document.forms.reminderForm.reminder;

button.addEventListener("click", function(e) {
  e.preventDefault();

  //console.log(input.value); 
});

<main class="container">
  <div class="reminderContainer">
    <div class="left">
      <h1>Min huskeliste</h1>
      <ul id="reminderList">

      </ul>
    </div>
    <div class="right">
      <form action="#" name="reminderForm">
        <div class="reminderInput">
          <label for="reminder">Jeg må huske...</label>
          <input autofocus type="text" name="reminder">
        </div>

        <input id="lagre" type="submit" name="submit" value="Lagre">
      </form>
    </div>
  </div>
</main>
<script type="text/javascript" src="script.js"></script>

Answer 1

button.addEventListener("click", function(e) {
  e.preventDefault();

  var li = document.createElement("li"); // create an li
  li.textContent = input.value;          // set its text content to input's value
  reminderList.appendChild(li);          // add it to the ul
});

示例：

＆＃13;
＆＃13;
var button = document.querySelector("#lagre"); var reminderList = document.querySelector("#reminderList"); var input = document.forms.reminderForm.reminder; button.addEventListener("click", function(e) { e.preventDefault(); var li = document.createElement("li"); // create an li li.textContent = input.value; // set its text content to input's value reminderList.appendChild(li); // add it to the ul });
＆＃13;
<main class="container"> <div class="reminderContainer"> <div class="left"> <h1>Min huskeliste</h1> <ul id="reminderList"> </ul> </div> <div class="right"> <form action="#" name="reminderForm"> <div class="reminderInput"> <label for="reminder">Jeg må huske...</label> <input autofocus type="text" name="reminder"> </div> <input id="lagre" type="submit" name="submit" value="Lagre"> </form> </div> </div> </main>
＆＃13;
＆＃13;
＆＃13;

Answer 2

试试这个https://jsfiddle.net/tLx48h5L/
它将值传递给函数，并使用输入值在ul内创建选项。

function createLis(option){
    var template = "<option>"+option+"</option>";
    var content = document.querySelector("#reminderList").innerHTML;
    document.querySelector("#reminderList").innerHTML = content + template;
}

干杯

Answer 3

您可以选择提醒输入元素：

var reminderValue = document.querySelector("#reminder");

并将它的值添加到你的li元素

reminderList.innerHTML = reminderValue.value;

var button = document.querySelector("#lagre");
var reminderList = document.querySelector("#reminderList");
var reminderValue = document.querySelector("#reminder");
var input = document.forms.reminderForm.reminder;

button.addEventListener("click", function(e) {
  e.preventDefault();
 reminderList.innerHTML = reminderValue.value;

  //console.log(input.value); 
});

<main class="container">
  <div class="reminderContainer">
    <div class="left">
      <h1>Min huskeliste</h1>
      <ul id="reminderList">

      </ul>
    </div>
    <div class="right">
      <form action="#" name="reminderForm">
        <div class="reminderInput">
          <label for="reminder">Jeg må huske...</label>
          <input autofocus type="text" name="reminder" id="reminder">
        </div>

        <input id="lagre" type="submit" name="submit" value="Lagre">
      </form>
    </div>
  </div>
</main>

https://jsfiddle.net/4wfrkvxs/

Answer 4

检查此解决方案。

var button = document.querySelector("#lagre");
var reminderList = document.querySelector("#reminderList");
var input = document.forms.reminderForm.reminder;

button.addEventListener("click", function(e) {
  e.preventDefault();
  
  var li = document.createElement('li');
  li.innerText = document.getElementById('reminder').value;

  document.getElementById('reminderList').appendChild(li);
});

<main class="container">
  <div class="reminderContainer">
    <div class="left">
      <h1>Min huskeliste</h1>
      <ul id="reminderList">

      </ul>
    </div>
    <div class="right">
      <form action="#" name="reminderForm">
        <div class="reminderInput">
          <label for="reminder">Jeg må huske...</label>
          <input autofocus type="text" id="reminder" name="reminder">
        </div>

        <input id="lagre" type="submit" name="submit" value="Lagre">
      </form>
    </div>
  </div>
</main>
<script type="text/javascript" src="script.js"></script>

将表单中的输入值添加到ul

4 个答案: