Всем привет! Помогите сделать добавление данных с input в таблицу. Данные должны добавляться динамически и сохраняться пока не будет обновлена страничка. Реализовать это нужно только при помощи чистого JS. Создал функцию, но не уверен что это будет работать.
<!DOCTYPE html>
<html>
<head>
<title></title>
<script >
function average () {
this.name = document.querySelector('#baza').value;
this.petrol = document.querySelector("#petrol").value;
this.cars = document.querySelector('#cars').value;
this.aver = petrol/cars;
/*Вот тут пошли проблемки:*/
var name = document.createElement("th");
name.append()
</script>
</head>
<body>
<form id= "average">
Автобаза:
<input name="baza" id="baza" value=""><br/><br/>
Использовали топлива:
<input name="petrol" id="petrol" value=""><br/><br/>
Количество авто:
<input name="cars" id="cars" value=""><br/><br/>
<input type="button" value="Считать" onclick= 'average()'>
<br/>
</form>
<table style="border: 1px solid black">
<thead>
<tr>
<th>Автобаза</th>
<th>Использовали бензина</th>
<th>Количество авто</th>
<th>Средний расход топлива</th>
</tr>
</thead>
<tbody>
<td><span id="baza"></span></td>
<td><span id="petrol"></span></td>
<td><span id="cars"></span></td>
<td><span id="aver"></span></td>
</tbody>
</table>
</body>
</html>