Getting table information previously inputted to table in js - javascript

Trying to add a new table row and info for every function trigger. The problem is that i need to extract the previous information inputted into the new rows. How would i go about getting this information, to then calculate other stuff with it?
HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<meta charset="utf-8">
<title>Rabattvarsleren</title>
<script src="script.js"></script>
</head>
<body>
<input type="text" id="input">
<button onclick="leggtil()" id="leggtil">Legg til</button><br><br><br><br>
<br><br>
<table id="yeet">
<tr>
<th id="total">Total: </th>
</tr>
</table>
</body>
</html>
JS:
function leggtil() {
var input = parseInt(document.getElementById("input").value);
var table = document.getElementById("yeet");
var row = table.insertRow(0);
var cell1 = row.insertCell(0);
cell1.innerHTML = input;
}

Related

remove Atrribute "hidden" from a table using DOM shows removeAttribute is not a function [duplicate]

This question already has answers here:
What do querySelectorAll and getElementsBy* methods return?
(12 answers)
Closed 4 months ago.
i'm having problems using the dom "removeattribute" when i click on a button i need that the table shows up in the HTML i'm using the next HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="form-group">
<label for="">Título</label>
<input type="text" class="form-control" name="" id="titleInput" aria-describedby="helpId"
placeholder="Título del juego">
</div>
<button id="btnIncrementar" onclick="incrementar()">Incrementar</button>
<button id="btnDecrementar">decrementar</button>
<button id="pofavo">alertas</button>
<p id="pcontador">0</p>
<p id="clickcontador">0</p>
<table class="table mt-3" hidden>
<thead>
<tr>
<th>Valores </th>
<th>Tema1</th>
<th>Tema2</th>
<th>Tema3</th>
<th>Tema4</th>
</tr>
</thead>
<tbody>
<tr>
<td scope="row">100</td>
<td>Pregunta:Tema1-100</td>
<td>Pregunta:Tema2-100</td>
<td>Pregunta:Tema3-100</td>
<td>Pregunta:Tema4-100</td>
</tr>
<tr>
<td scope="row">200</td>
<td>Pregunta:Tema1-200</td>
<td>Pregunta:Tema2-200</td>
<td>Pregunta:Tema3-200</td>
<td>Pregunta:Tema4-200</td>
</tr>
<tr>
<td scope="row">300</td>
<td>Pregunta:Tema1-300</td>
<td>Pregunta:Tema2-300</td>
<td>Pregunta:Tema3-300</td>
<td>Pregunta:Tema4-300</td>
</tr>
<tr>
<td scope="row">400</td>
<td>Pregunta:Tema1-400</td>
<td>Pregunta:Tema2-400</td>
<td>Pregunta:Tema3-400</td>
<td>Pregunta:Tema4-400</td>
</tr>
</tbody>
</table>
<script src="./handler.js"></script>
First Name: <input type="text" id="myText" >
<p>Click the button to display the value of the value attribute of the text field.</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
function myFunction() {
var x = document.getElementById("titleInput").value;
document.getElementById("demo").innerHTML = x;
}
</script>
</body>
</html>
with the following handler.js
"use strict";
btnDecrementar.onclick= decrementar;
btnIncrementar.addEventListener('click',contaclicks);
btnDecrementar.addEventListener('click',contaclicks);
let maintable = document.getElementsByTagName("table");
function incrementar(){
let valor = Number(pcontador.innerText);
valor=valor+1;
pcontador.innerText = valor;
}
function decrementar(){
let valor = Number(pcontador.innerText)
valor=valor-1;
pcontador.innerText = valor;
maintable.removeAttribute('hidden');
maintable=maintable;
}
function contaclicks(){
let valor = Number(clickcontador.innerText)
valor=valor+1;
clickcontador.innerText = valor;
}
titleInput.addEventListener('keyup',bten);;
function bten(){
var x = document.getElementById("titleInput");
x.value = x.value.toUpperCase();
}
i tried using getelementsbyclass and it returned se same failure "handler.js:18 Uncaught TypeError: maintable.removeAttribute is not a function"
You are using:
let maintable = document.getElementsByTagName("table");
It returns a Node List, so you should use:
let maintable = document.getElementsByTagName("table")[0];

JavaScript Expense Tracker Calculator - Subtraction

Im trying to do a expense tracker with vanilla javascript that user can can add/remove their expense item and the Total of expense will be calculated accordingly.
I am using constructor to create object so later I can save in localStorage later and retrieve later (hv not done this part yet)
Here is the problem. There is no problem in adding atm but when it comes to removing item (if not remove in sequence), the calculation is messed up. E.g. Item 1, Item 2, Item 3. If I remove with order Item 3 --> Item2 --> Item No problem with total value of subtraction. But if start the removal from Item 1 or Item 2, the calculation will be messed up
Im not sure is it because there is no index/id in each item so calculation is not working. Appreciate for any help thank you!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="ExpenseTracker.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
<title>Document</title>
</head>
<body>
<div class="container">
<label name="expense">Expense: </label>
<input id="inputField" name="expense" type="text">
<label name="date">Date: </label>
<input id="start" type="text" name="date">
<label name="amount">Amount: </label>
<input id="money" name="amount" type="number" min="0" step="0.1">
<button id="add" >Add</button>
<table>
<thead>
<tr style="border: 1px solid black;">
<th>Description</th>
<th>Date</th>
<th>Amount</th>
</tr>
</thead>
<tbody id="listContainer" style="border: 1px solid black;">
</tbody>
<tr>
<td id="total">total</td>
</tr>
</table>
<button onclick="clearHistory()">clear localStorage</button>
</div>
<script>
class ExpenseObject{
constructor(e, d, a){
this.expenseDescription = e;
this.dateObject = d;
this.amount = a;
}
}
function clearHistory(){
localStorage.clear();
}
const createDate = flatpickr("#start",{
dateFormat:"d-m-Y ",
});
let addButton = document.getElementById("add");
let listContainer=document.getElementById("listContainer");
let inputField= document.getElementById("inputField");
let dateInput = document.getElementById("start");
let amountField = document.getElementById("money");
let total = document.getElementById("total");
addButton.addEventListener('click', function(){
if(!inputField.value || !dateInput.value || !amountField.value){
alert("please do not leave blank in any field");
return;
}
var newRow = document.createElement('tr');
var expense = document.createElement('td');
var expenseDate = document.createElement('td');
var expenseAmount = document.createElement('td');
var deleteButton = document.createElement('button');
deleteButton.innerHTML="X";
let expenseStuff = new ExpenseObject (inputField.value,dateInput.value,amountField.value )
expense.innerHTML = expenseStuff.expenseDescription;
expenseDate.innerHTML = expenseStuff.dateObject;
expenseAmount.innerText = expenseStuff.amount;
listContainer.appendChild(newRow);
newRow.appendChild(expense);
newRow.appendChild(expenseDate);
newRow.appendChild(expenseAmount);
newRow.appendChild(deleteButton);
inputField.value = "";
amountField.value="";
var totalAmount = parseFloat(total.innerText) || 0;
totalAmount += parseFloat(expenseAmount.innerHTML);
total.innerHTML = totalAmount;
deleteButton.addEventListener('click', function(){
newRow.removeChild(expense);
newRow.removeChild(expenseDate);
newRow.removeChild(expenseAmount);
newRow.removeChild(deleteButton);
totalAmount -= parseFloat(expenseAmount.innerHTML);
total.innerHTML = totalAmount;
})
})
</script>
</body>
</html>
The primary issue you were experiencing is that you declared totalAmount at the local scope, so each deleteButton event listner still references the old totalAmount value from when the listener was declared. If you declare that value in a higher-level scope, alongside total, everything works as expected.
Here it is in action:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="ExpenseTracker.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
<title>Document</title>
</head>
<body>
<div class="container">
<label name="expense">Expense: </label>
<input id="inputField" name="expense" type="text">
<label name="date">Date: </label>
<input id="start" type="text" name="date">
<label name="amount">Amount: </label>
<input id="money" name="amount" type="number" min="0" step="0.1">
<button id="add" >Add</button>
<table>
<thead>
<tr style="border: 1px solid black;">
<th>Description</th>
<th>Date</th>
<th>Amount</th>
</tr>
</thead>
<tbody id="listContainer" style="border: 1px solid black;">
</tbody>
<tr>
<td id="total">total</td>
</tr>
</table>
<button onclick="clearHistory()">clear localStorage</button>
</div>
<script>
class ExpenseObject{
constructor(e, d, a){
this.expenseDescription = e;
this.dateObject = d;
this.amount = a;
}
}
function clearHistory(){
localStorage.clear();
}
const createDate = flatpickr("#start",{
dateFormat:"d-m-Y ",
});
let addButton = document.getElementById("add");
let listContainer = document.getElementById("listContainer");
let inputField = document.getElementById("inputField");
let dateInput = document.getElementById("start");
let amountField = document.getElementById("money");
let total = document.getElementById("total");
let totalAmount = parseFloat(total.innerText) || 0;
addButton.addEventListener('click', function(){
if(!inputField.value || !dateInput.value || !amountField.value){
alert("please do not leave blank in any field");
return;
}
const newRow = document.createElement('tr');
const expense = document.createElement('td');
const expenseDate = document.createElement('td');
const expenseAmount = document.createElement('td');
const deleteButton = document.createElement('button');
deleteButton.innerHTML="X";
let expenseStuff = new ExpenseObject (inputField.value,dateInput.value,amountField.value )
expense.innerHTML = expenseStuff.expenseDescription;
expenseDate.innerHTML = expenseStuff.dateObject;
expenseAmount.innerText = expenseStuff.amount;
listContainer.appendChild(newRow);
newRow.appendChild(expense);
newRow.appendChild(expenseDate);
newRow.appendChild(expenseAmount);
newRow.appendChild(deleteButton);
inputField.value = "";
amountField.value = "";
totalAmount += parseFloat(expenseAmount.innerHTML);
total.innerHTML = totalAmount;
deleteButton.addEventListener('click', function() {
newRow.removeChild(expense);
newRow.removeChild(expenseDate);
newRow.removeChild(expenseAmount);
newRow.removeChild(deleteButton);
totalAmount -= parseFloat(expenseAmount.innerHTML);
total.innerHTML = totalAmount;
})
})
</script>
</body>
</html>

How to show when device is connected or disconnected in webpage

I am currently using domotz to shows when a device is connected. I currently in cell 4 show a green check mark for connectivity, how would I for cell 4 put an x mark for when it is disconnected because right now it does not separate weather it is connected or disconnected and shows. green mark for every device even devices that are not connected. Thanks
`
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<table id="devicelist" style="width:100%">
<tr>
<th>Display Name</th>
<th>ID</th>
<th>Name</th>
<th>Model</th>
</tr>
</table>
</div>
</div>
</div>
<script src="js/jquery-2.1.0.min.js"></script>
<script>
var headers = {
success: function(data) {
var str = JSON.stringify(data);
var obj = JSON.parse(str);
var NumDevices = obj.length;
var table = document.getElementById('devicelist');
var row = table.insertRow(i+1);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
var cell4 = row.insertCell(3);
cell1.innerHTML = i+1
cell2.innerHTML = obj[i].display_name;
cell3.innerHTML = obj[i].id;
cell4.innerHTML = "<img src='img/greenn.jpg'/>";
</script>
</body>
</html>

appendChild does not add new elements. It just replace the old elements to the new one (java script)

data variable's is 500. This variable has 500 ID of top stories of Hackers News.
and I am trying to add tr elements which shows the title of each ID and rank.
There is no problem if I only add one ID in the loop.
However, if I use more than one ID then the new tr element just replace the old tr element.
I wanted to display 500 top sorties but it only shows one story as you can see.
Is there any way to show 500 stories?
var itemlist = document.querySelector('.itemlist'); //tbody elements
var request = new XMLHttpRequest()
request.open('GET', 'https://hacker-news.firebaseio.com/v0/topstories.json?print=pretty', true)
request.onload = function() {
// begin accessing JSON data here
var data = JSON.parse(this.response);
for (var j = 0; j < data.length; j++) {
var temp = data[j];
var id = 'https://hacker-news.firebaseio.com/v0/item/' + temp + '.json?print=pretty';
request.open('GET', id, true)
request.onload = function() {
var data = JSON.parse(this.response);
var tr = document.createElement('tr');
var td = document.createElement('td');
var td1 = document.createElement('td');
td.id = temp;
td.textContent = (j) + '.';
td1.textContent = data.title;
tr.appendChild(td);
tr.appendChild(td1);
itemlist.appendChild(tr);
console.log(id);
}
request.send();
}
}
request.send();
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="CSS/style.css">
</head>
<body>
<table class="main" width="85%">
<tbody>
<tr>
<td bgcolor="#ff6600">
<table style="padding:2px;">
<tbody>
<tr>
<td style="width:18px;">
<a href="https://news.ycombinator.com/">
<img src="https://news.ycombinator.com/y18.gif" class="ylogo">
</a>
</td>
<td style="line-height:12px;height:10px">
<span class="mainmenu">
<span style="margin-right:7px;">
Hacker News
</span>
new
|
past
|
comments
|
ask
|
show
|
jobs
|
submit
</span>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr class="pagespace"></tr>
<tr>
<td>
<table>
<tbody class="itemlist">
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<script src="main.js"></script>
</body>
</html>

Need to generate columns dynamically

I need to dynamically create tables one beside the other. So I have created a table(outer) and am trying to generate columns dynamically on button click. In each of these columns I will create the actual tables(inner) I need, so that in the end they appear side by side.
But I'm stuck at creating columns for the bigger table. Take a look at the code and it will be clear.
Any solution in JS is appreciated. Thanks in advance
<html>
<head>
<script type="text/javascript">
function add() {
var table = document.getElementById('foo');
var rowCount = table.rows.length;
var row =document.getElementById('rowl');
var max=table.rows[0].cells.length;
var cnum;
if(max==0){
cnum=0;
}else{
cnum=max+1;
}
var cell1 = row.insertCell(cnum);
cell1.innerHTML = "<table id='tabl'"+
cnum+
"' border=2 bordercolor='RED'><tr><th>Material "+
(cnum+1)+
"</th></tr><tr><td>bdfgher</td></tr><tr><td>fdgerh</td></tr></table>";
}
</script>
</head>
<body>
<button type="button" onclick="add()">Add cell</button>
<table id="foo" border=1 bordercolor="BLUE">
<tr id="rowl"></tr>
</table>
</body>
</html>
var cell = document.createElement("td");
document.getElementById("rowl").appendChild(cell);
Of course, you should add your other elements (inner table) in the cell element.
It may help you a little :)
<html>
<head>
<script>
var c=-1;
function displayResult()
{
var firstRow=document.getElementById("tr_1");
//var x=firstRow.insertCell(-1);
//x.innerHTML="New cell"
var cell1 = firstRow.insertCell(c++);
cell1.innerHTML = "<table id='tabl'"+
cnum+
"' border=2 bordercolor='RED'><tr><th>Material "+
(cnum+1)+
"</th></tr><tr><td>bdfgher</td></tr><tr><td>fdgerh</td></tr></table>";
}
</script>
</head>
<body>
<table id="myTable" border="1">
<tr id='tr_1'></tr>
</table>
<br>
<button type="button" onclick="displayResult()">Insert cell</button>
</body>
</html>

Categories