How to have a space between two inputs in javascript?
Question
So I'm very new to coding so I'm hoping that someone can help me.
I'm trying to create an expense tracker type of thing and have ended up with two inputs side by side with an add and remove button. when I click "add" the two inputs are combined but they stuck together and I'm wanting to have a space between them.
for example. If I click "Rent" in the first input and then "1000" in the second input, I get Rent1000. but I want it to say "Rent 1000" for what it's worth, I'm hoping to be able to add the numbers to keep a running total.
Any help is very much appreciated.
Here is the code I have so far.
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)); li.appendChild(document.createTextNode(amount.value)); 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); }
<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="text" id="amount" placeholder="Amount"></td> <td><button onclick="addItem()">add</button></td> <td><button onclick="removeItem()">remove</button></td> </tr> </table>
3 answers
solution1
0 2020-10-19 04:52:47
var li = document.createElement("li");
li.setAttribute('id', income.value);
li.appendChild(document.createTextNode(income.value));
li.appendChild( document.createTextNode( '\u00A0' ) );
li.appendChild(document.createTextNode(amount.value));
If you want/need more spaces, use several
\u00A0
solution2
0 2020-10-19 05:02:10
Try this, explanation is included in the comments:
<!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>
Or this if you want to display the total on a single line instead of on every row:
<!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>
solution3
0 2020-10-19 05:26:59
This would be the simplest solution :
Change this :
li.appendChild(document.createTextNode(income.value));
li.appendChild(document.createTextNode(amount.value));
to this :
li.appendChild(document.createTextNode(income.value + ' ' + amount.value));
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
javascript for time between two different inputs
Generating random integer between two inputs Javascript
How to associate two inputs in JavaScript?
How to match two patterns with a space between them in JavaScript?
JavaScript regex replace the space between two groups
Include space between two words Javascript if() statement
How to have Javascript function save two text inputs into one text (.txt) file?
Javascript - how to calculate difference between two time inputs automatically with bootstrap-datetimepicker?
How to calculate the difference between time inputs in javascript?
Have JavaScript send returned values to two inputs elements
Related Tags