Hi coders,
In these days i’m doing Object and OOP concept in Javascript.
I create this dynamic table but show me typeof of my object and not object’s properties .
Then i need to create another class “Gilda” ( I still have to think what to put inside) and add in my table ( i think to add other cell ,but I don’t know if inside array you can add an Object inside other Object).
This is my code:
https://codepen.io/camilco/pen/WNQerZR
It’s Italian ,but my Object called Heroes and the properties are name, ability, grade and arms.
I hope I have been exhaustive and clear and thanks,
CamCode
This is my code that i have create in js, when I click on button doesn’t display in the table.
How can I get a new object displayed and put it inside a table?
(sorry but it’s in Italian)
My file js: here i create a listener that if an user click on button display input’s values and create a new object( but i don’t know if it’s correct my logic)
const aggiungiBtn = document.getElementById("btn-aggiungi");
aggiungiBtn.addEventListener("click" ,function(){
/* let messaggio = document.createElement("p");
messaggio.textContent = "Già aggiunto!";*/
let nuovoDet = {
nome: document.getElementById('nome').value,
eta: document.getElementById('eta').value,
genere: document.getElementById('genere').value,
razza: document.getElementById('razza').value
};
let aggiungiDetenuti = arrayDetenuti.push(nuovoDet);
document.getElementById("table-data").innerHTML = aggiungiDetenuti;
})
my file HTML
<div class="form">
\*<!--Aggiungere l'evento -->\*
<form id="form-gestione" class="form-gestione" >
<input type="text" name="nome" id="nome" value="" placeholder="nome">
<input type="text" name="eta" id="eta" value="" placeholder="età">
<input type="text" name="genere" id="genere" value="" placeholder="genere">
<input type="text" name="razza" id="razza" value="" placeholder="razza">
<button id="btn-aggiungi" >Aggiungi</button>
</form>
</div>
<div id="table-block" class="table-all">
<table>
<thead>
<tr>
<th>Nome</th>
<th>Età</th>
<th>Genere</th>
<th>Razza</th>
</tr>
</thead>
<tbody id="table-data"></tbody>
</table>
</div>