通过单击提交添加新元素

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

您需要使用加法赋值运算符(+=(，它在旧值的基础上添加新值。

例如：从abc.innerHTML = myValue;更改为abc.innerHTML += myValue;以停止覆盖innerhtml内容。

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按钮都要添加一个新项目(数字或字符串(。记住这一点，我以以下方式编辑了您的代码：

HTML代码：

<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链接放在这里，这样你就可以测试它了