Issue
I'm trying to make an expense tracker. I want to add the values from the three input bars so that they appear in a new row. I want to make it so that once the user clicks the Add expense button, the three values name (string), date (number) and amount (number) appear in a newly created row in the table element.
<body>
<div class="container">
<h2>Expense Tracker</h2>
<h3>Add New Item</h3>
<div class="input-item">
<label >Name</label>
<input type="text" id="myName">
</div>
<div class="input-item">
<label >Date</label>
<input type="number" id="myDate">
</div>
<div class="input-item">
<label>Amount</label>
<input type="number" name="myAmount">
</div>
<div class="button">
<button type="button">Add Expense</button>
</div>
<table class="table" id="myTable">
<tr id="myRow">
<th>Name</th>
<th>Date</th>
<th>Amount</th>
<tr/>
<tr>
<th>value 1</th>
<th>value 2</th>
<th>value 3</th>
</tr>
</table>
</div>
</body>
Solution
To do that in Vanilla JS, you have to be able to access and create DOM elements. Typically, building an UIs with vanilla JS is an excruciating process and can get really crazy for a complex case hence the need for UI frameworks/libraries like React. JQuery can also make that a lot easier :)
In your case, you will likely proceed as follows.
- Select the input elements, button and table from the DOM
- Add an event listener to the button to create a new row The event listener will
- Extract the values of the input fields and check that those are not empty. This is where you might also check the input data types if it is really important.
- create a
trelement - create 3
thelements to contain thetrelement and set their content to the values extracted from the input fields - Add the
thelements to thetrelement - Add the
trelement to the table that was selected -
- Now you are done
Here is a rundown of the code
const nameInput = document.getElementById("myName")
const dateInput = document.getElementById("myDate")
const amountInput = document.querySelector("[name='myAmount']") //check in your code.. Perhaps you wanted to set the ID in which case you will still use document.getElementById
const addButton = document.getElementsByTagName("button")[0] // check in your code.. Perhaps you wanted to set the ID in which case you will still use document.getElementById [Using IDs or Classes is advised]
const expenseTable = document.getElementById("myTable")
//Add event listener to the button
addButton.addEventListener('click', function(event){
//extract values from input
const name = nameInput.value
const date = dateInput.value
const amount = amountInput.value
if(!name || !date || !amount) return
const $row = document.createElement('tr')
const $name = document.createElement('th')
$name.innerHTML = name
const $date = document.createElement('th')
$date.innerHTML = date
const $amount = document.createElement('th')
$amount.innerHTML = amount
//add to row
$row.append($name, $date, $amount)
//finally add the row to the table
expenseTable.appendChild($row)
})
Answered By - NGY
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.