Question

我正在将w3school的代码用于我自己的项目https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_todo

当单击添加按钮到两个不同的ID时如何放置结果

<div id="myDIV" class="header">
  <input type="text" id="myInput" placeholder="Title...">
  <span onclick="newElement()" class="addBtn">Add</span>
</div>

<ul id="myUL">

</ul>

<ol id="yourOL">

<ol>

我尝试将其放在newElement()内，但无济于事

else {
    document.getElementById("myUL").appendChild(li);
    document.getElementById("yourOL").appendChild(li);
}

我还尝试在#myUl中添加一个onchange事件，以使innerHTML中的内容与#yourOL相同，但也不起作用。

<ul id="myUL" onchange="change">

</ul>

<ol id="yourOL">

<ol>

<script>
  document.getElementById("myUL").addEventListener('change', change);

  function change() {
    let guests = document.getElementById('myUL').value;
      document.getElementById('yourOL') = guests;
  } 
</script>

Answer 1

您必须在添加元素之前创建元素（li）。同样在第一个解决方案中，您没有创建任何名称为newElement的函数：

function newElement(){
  var li = document.createElement('LI');
  li.textContent = 'some text';
  document.getElementById("myUL").appendChild(li);
  var li2 = document.createElement('LI');
  li2.textContent = 'some text';
  document.getElementById("yourOL").appendChild(li2);
}

<div id="myDIV" class="header">
    <input type="text" id="myInput" placeholder="Title...">
    <span onclick="newElement()" class="addBtn">Add</span>
</div>

<ul id="myUL">

</ul>

<ol id="yourOL">

<ol>

Answer 2

这是我的解决方案：

对于有效的HTML，请不要忘记将myInput值放在<li>元素内

let myInput = document.getElementById("myInput");
let yourOL = document.getElementById('yourOL')
let myUL = document.getElementById('myUL')
myInput.addEventListener('change', change);

  function change() {
    let value = document.getElementById('myInput').value;    
    let guests = "<li>"+value+"</li>";
    yourOL.innerHTML += guests;
    myUL.innerHTML += guests;
   
  }

<div id="myDIV" class="header">
            <input type="text" id="myInput" placeholder="Title...">
            <span class="addBtn">Add</span>
 </div>

      <ul id="myUL">

      </ul>

      <ol id="yourOL">

      <ol>

将新商品添加到两个不同的ID

2 个答案: