在javascript中，如何在两个输入之间留出空间？_Javascript_Html

在javascript中，如何在两个输入之间留出空间？

javascript html

在javascript中，如何在两个输入之间留出空间？,javascript,html,Javascript,Html,所以我对编码非常陌生，所以我希望有人能帮助我我正在尝试创建一个费用跟踪器类型的东西，结果是两个输入并排出现在一个添加和删除按钮上。当我点击“添加”时，两个输入被组合在一起，但它们粘在一起，我希望它们之间有一个空间比如说。如果我在第一个输入中单击“租金”，然后在第二个输入中单击“1000”，我将得到租金1000。但我想让它说“租1000”就值多少钱，我希望能把这些数字加起来，保持一个稳定的总数非常感谢您的帮助这是我到目前为止的代码函数addItem（）{ var ul=document

所以我对编码非常陌生，所以我希望有人能帮助我

我正在尝试创建一个费用跟踪器类型的东西，结果是两个输入并排出现在一个添加和删除按钮上。当我点击“添加”时，两个输入被组合在一起，但它们粘在一起，我希望它们之间有一个空间

比如说。如果我在第一个输入中单击“租金”，然后在第二个输入中单击“1000”，我将得到租金1000。但我想让它说“租1000”就值多少钱，我希望能把这些数字加起来，保持一个稳定的总数

非常感谢您的帮助

这是我到目前为止的代码

函数addItem（）{
var ul=document.getElementById（“收入列表”）；
var收入=document.getElementById（“收入”）；
var金额=document.getElementById（“金额”）；
var li=document.createElement（“li”）；
li.setAttribute（'id'，income.value）；
li.appendChild（document.createTextNode（income.value））；
li.appendChild（document.createTextNode（amount.value））；
ul.儿童（li）；
}
函数removietem（）{
var ul=document.getElementById（“收入列表”）；
var收入=document.getElementById（“收入”）；
var金额=document.getElementById（“金额”）；
var li=document.createElement（“li”）；
ul.移除儿童（项目）；
}




添加
去除

如果您想要/需要更多空间，请使用多个

 \u00A0

尝试此操作，注释中包含解释：

<!DOCTYPE html>
<html>
<body>

<table border="0px">

<ul id="income-list"></ul>
<ul id="expense-list"><ul>

<tr>
<td><input type="text" id="income" placeholder="Category"></td>
<td><input type="number" id="amount" placeholder="Amount"></td> <!--- input type should be number so you can add them -->
<td><button onclick="addItem()">add</button></td>
<td><button onclick="removeItem()">remove</button></td>
</tr>
</table>


<script>

    // initialize an array to keep track of all amounts 
    allAmounts = [];

    // initialize a total for summing purpose
    var total = 0;

    function addItem(){
    var ul = document.getElementById("income-list");
    var income = document.getElementById("income");
    var amount = document.getElementById("amount");
    var li = document.createElement("li");
    li.setAttribute('id',income.value);
    li.appendChild(document.createTextNode(income.value));
    // just add an empty space here
    li.appendChild(document.createTextNode(" "));
    li.appendChild(document.createTextNode(amount.value));
    li.appendChild(document.createTextNode(" Total:"));

    // parseFloat to convert string to floating point number
    // push amount added into an array
    allAmounts.push(parseFloat(amount.value));
    
    // reset the total otherwise it would be a wrong total
    total = 0; 

    // sum all amounts together in the array
    for(var i in allAmounts) {       
        total += allAmounts[i];
    }
    
    // create a new text node for total and append to li
    li.appendChild(document.createTextNode(total))
    ul.appendChild(li);
}

function removeItem(){
    var ul = document.getElementById("income-list");
    var income = document.getElementById("income");
    var amount = document.getElementById("amount");
    var li = document.createElement("li");
    ul.removeChild(item);
}

</script>
</body>
</html>




添加
去除
//初始化数组以跟踪所有金额
阿拉蒙特=[]；
//为求和而初始化总数
var合计=0；
函数addItem（）{
var ul=document.getElementById（“收入列表”）；
var收入=document.getElementById（“收入”）；
var金额=document.getElementById（“金额”）；
var li=document.createElement（“li”）；
li.setAttribute（'id'，income.value）；
li.appendChild（document.createTextNode（income.value））；
//只需在此处添加一个空白
li.appendChild（document.createTextNode（“”）；
li.appendChild（document.createTextNode（amount.value））；
li.appendChild（document.createTextNode（“总计：”）；
//parseFloat将字符串转换为浮点数
//将添加的数量推送到数组中
allAmounts.push（parseFloat（amount.value））；
//重置总数，否则将是错误的总数
总数=0；
//将数组中的所有金额相加
对于（第i个变量）
总数+=总数量[i]；
}
//为total和append to li创建新的文本节点
li.appendChild（document.createTextNode（总计））
ul.儿童（li）；
}
函数removietem（）{
var ul=document.getElementById（“收入列表”）；
var收入=document.getElementById（“收入”）；
var金额=document.getElementById（“金额”）；
var li=document.createElement（“li”）；
ul.移除儿童（项目）；
}

或者，如果要在单行而不是每行上显示总计，请执行以下操作：

<!DOCTYPE html>
<html>
<body>

<table border="0px">

<ul id="income-list"></ul>
<ul id="expense-list"><ul>

<!-- to display total income-->
<p id="total-income"></p>

<tr>
<td><input type="text" id="income" placeholder="Category"></td>
<td><input type="number" id="amount" placeholder="Amount"></td> <!--- input type should be number so you can add them -->
<td><button onclick="addItem()">add</button></td>
<td><button onclick="removeItem()">remove</button></td>
</tr>
</table>


<script>

    // initialize an array to keep track of all amounts 
    allAmounts = [];

    // initialize a total for summing purpose
    var total = 0;

    function addItem(){
    var ul = document.getElementById("income-list");
    var income = document.getElementById("income");
    var amount = document.getElementById("amount");
    var li = document.createElement("li");
    // p element for total income
    var p = document.getElementById("total-income");
    li.setAttribute('id',income.value);
    li.appendChild(document.createTextNode(income.value));
    // just add an empty space here
    li.appendChild(document.createTextNode(" "));
    li.appendChild(document.createTextNode(amount.value));

    // parseFloat to convert string to floating point number
    // push amount added into an array
    allAmounts.push(parseFloat(amount.value));
    
    // reset the total otherwise it would be a wrong total
    total = 0; 

    // sum all amounts together in the array
    for(var i in allAmounts) {       
        total += allAmounts[i];
    }
    
    // remove child if p already has a total, to reset the total
    if (p.hasChildNodes){
        p.innerHTML = "";
    }
    // create a new text node for total and append to li
    p.appendChild(document.createTextNode("Total: " +total));
    ul.appendChild(li);
}

function removeItem(){
    var ul = document.getElementById("income-list");
    var income = document.getElementById("income");
    var amount = document.getElementById("amount");
    var li = document.createElement("li");
    ul.removeChild(item);
}

</script>
</body>
</html>





添加
去除
//初始化数组以跟踪所有金额
阿拉蒙特=[]；
//为求和而初始化总数
var合计=0；
函数addItem（）{
var ul=document.getElementById（“收入列表”）；
var收入=document.getElementById（“收入”）；
var金额=document.getElementById（“金额”）；
var li=document.createElement（“li”）；
//p总收入的要素
var p=document.getElementById（“总收入”）；
li.setAttribute（'id'，income.value）；
li.appendChild（document.createTextNode（income.value））；
//只需在此处添加一个空白
li.appendChild（document.createTextNode（“”）；
li.appendChild（document.createTextNode（amount.value））；
//parseFloat将字符串转换为浮点数
//将添加的数量推送到数组中
allAmounts.push（parseFloat（amount.value））；
//重置总数，否则将是错误的总数
总数=0；
//将数组中的所有金额相加
对于（第i个变量）
总数+=总数量[i]；
}
//如果p已经有总计，则删除子项以重置总计
if（p.hasChildNodes）{
p、 innerHTML=“”；
}
//为total和append to li创建新的文本节点
p、 appendChild（document.createTextNode（“总计：+Total”）；
ul.儿童（li）；
}
函数removietem（）{
var ul=document.getElementById（“收入列表”）；
var收入=document.getElementById（“收入”）；
var金额=document.getElementById（“金额”）；
var li=document.createElement（“li”）；
ul.移除儿童（项目）；
}

这将是最简单的解决方案：

更改此项：

li.appendChild(document.createTextNode(income.value));
  li.appendChild(document.createTextNode(amount.value));

为此：

li.appendChild(document.createTextNode(income.value + ' ' + amount.value));

可以使用一个文本节点，而不是创建两个文本节点。类似于

document.createTextNode（income.value+''+amount.value）

。引号创建了一个带有空格的字符串，并连接字符串

li.appendChild（document.createTextNode（income.value+）或按照@charlietfl的建议组合它们。谢谢！！我把它们和+''结合起来，效果很好。正是我想要的。另一种方法：li.appendChild（document.createTextNode（income.value））；li.appendChild（document.createTextNode（“”）；li.appendChild（document.createTextNode（amount.value））谢谢你！我还有很多东西要学。
li.appendChild(document.createTextNode(income.value + ' ' + amount.value));