通过单击提交添加新元素

Question

我有两个div来收集字符串和数字。我应该怎么做才能允许在div中只添加一个以上的元素？

​

let button = document.querySelector('.buttonClass');
let ctn1 = document.querySelector('.ctn1');
let ctn2 = document.querySelector('.ctn2');


button.addEventListener('click', function() {
  let myValue = document.querySelector('.inputClass').value;

  if (!isNaN(parseInt(myValue))) {
    ctn1.innerHTML = myValue;
  } else if (typeof myValue == 'string') {
    ctn2.innerHTML = myValue;
  }

  document.querySelector('.inputClass').value = "";
});

<input type="text" class='inputClass' />
<input type="button" value="Wyślij" class="buttonClass" />

<div class="wrapper">
  <div class="container-2">
    <p class="ctn1">Tu będzie number</p>
  </div>
  <div class="container-2">
    <p class="ctn2">Tu będzie string</p>
  </div>
</div>

​

Answer 1

您需要使用addition assignment operator (+=)，它除了旧的值之外还会添加新的值。

例如:从abc.innerHTML = myValue;更改为abc.innerHTML += myValue;，以停止覆盖内部stop内容。

​

let button = document.querySelector('.buttonClass');
let ctn1 = document.querySelector('.ctn1');
let ctn2 = document.querySelector('.ctn2');


button.addEventListener('click', function() {
    let myValue = document.querySelector('.inputClass').value;

    if(!isNaN(parseInt(myValue))){
        ctn1.innerHTML += myValue;
    } else if (typeof myValue == 'string') {
        ctn2.innerHTML += myValue;
    }

    document.querySelector('.inputClass').value = "";
});

<input type="text" class='inputClass' />
<input type="button" value="Wyślij" class="buttonClass"/>

<div class="wrapper">
 <div class="container-2">
    <p class="ctn1">Tu będzie number: </p>
 </div>
 <div class="container-2">
    <p class="ctn2">Tu będzie string: </p>
 </div>
</div>

​

Answer 2

我不确定你的要求到底是什么。尽管如此，我还是试图根据我对这个问题的理解给你一个答案。似乎你想在每次点击Submit按钮时添加一个新的项目(数字或字符串)。记住这一点，我用以下方式编辑了你的代码：

超文本标记语言代码：

<input type="text" class='inputClass' />`
<input type="button" value="Submit" class="buttonClass" />

<div class="wrapper">
  <div class="container-2">
  </div>
  <div class="container-2">
  </div>
</div>

JavaScript代码：

let button = document.querySelector('.buttonClass');
let containers = document.getElementsByClassName('container-2');
let container1 = containers[0];
let container2 = containers[1];

button.addEventListener('click', function() {
  let myValue = document.querySelector('.inputClass').value;

  let para = document.createElement("p");
    let node = document.createTextNode(myValue);

  if (!isNaN(parseInt(myValue))) {
    container1.appendChild(node);
  } else if (typeof myValue == 'string') {
    container2.appendChild(node);
  }

  document.querySelector('.inputClass').value = "";
});

说明：我正在搜索基于类container-2的所有<div>元素，并且基于您识别输入值的type的逻辑，我将添加一个新的<p> HTML元素作为相应的<div>元素的子元素。我正在放置JSFiddle链接here，以便您可以测试它。