Uncaught ReferenceError: item is not defined at HTMLButtonElement.onclick in the: <button onclick="item.inserir()">Inserir dados</button>

Joined
Apr 22, 2023
Messages
1
Reaction score
0
Whats possibily causing this error to happen? also if you guys notice any incoherence in my code attempt, fell free to point out, so i can learn from my mistakes :)

HTML:

<!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="style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400&display=swap" rel="stylesheet">
<script src="script.js"></script>
<title>Document</title>
</head>
<body>

<h1>Cadastros de produtos</h1>

<div class="dias">
Escolha o dia da semana desejado:
<select id="dias semana">
<option value="dia1" selected>Segunda</option>
<option value="dia2">Terça</option>
<option value="dia3">Quarta</option>
<option value="dia4">Quinta</option>
<option value="dia5">Sexta</option>
<option value="dia6">Sábado</option>
<option value="dia7">Domingo</option>
</select>
</div>
<div class="item">
Escolha o item desejado:

<input type="text" placeholder="">

</div>
<div class="botao-centro">

<button onclick="item.inserir()">Inserir dados</button>

</div>
<div id="saida">
<table border="1" width="100%" height="5%">
<thead>
<th>Segunda</th>
<th>Terça</th>
<th>Quarta</th>
<th>Quinta</th>
<th>Sexta</th>
<th>Sábado</th>
<th>Domingo</th>
<th>Ações</th>
</thead>
<tbody id="">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td><img src="edit-icon.png"><img src="remove-icon.png"></td>
</tr>
</tbody>

</table>
</div>
</body>
</html>


JavaScript:

class Item {
constructor() {
this.id = 1;
this.arrayItems = [];
}

inserir() {
let item = this.lerDados();

if(this.validaCampos(item)) {
this.adicionar(item);
}

console.log(item);
}
adicionar(item) {
this.arrayItems.push(item);
this.id++;
}

lerDados() {
let item = {}

item.id = this.id;
item.diasSemana = document.getElementById('dias semana').value;
item.nomeItem = document.getElementById('item').value;

return item;
}

validaCampos(item) {
let msg = '';

if(item.nomeItem == '') {
msg += 'informe o nome do produto';
}

if(msg != '') {
alert(msg);
return false
}

return true;
}

}


CSS(just because):

* {
margin: 0;
}
body{
font-family: 'Roboto', sans-serif;
background-color: grey ;
}
h1{
text-align: center;
margin-top: 2%;
margin-bottom: 1%;
}
select {
background: rgba(56, 63, 151, 0.637);
color: white;
}
button{
margin-top: 1%;
margin-bottom: 2%;
background-color: rgba(56, 63, 151, 0.637);
color:white;
text-align: center;
border: 0;
padding: 7px;
border-radius: 5px;
}
input{
outline: 0;
}
.dias{
margin-top: 2%;
margin-bottom: 2%;
text-align: center;
}
.item{
margin-top: 2%;
margin-bottom: 1%;
text-align: center;
}
.botao-centro{
text-align: center;
}
td{
text-align: center;
}
td img{
width: 20px;
margin-right: 5%;
}
 
Joined
Sep 4, 2022
Messages
128
Reaction score
16
Hi,

It's in your JS :


JavaScript:
// when you declare a function

function name_function(param1 , param2){

// inner scope

}
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,767
Messages
2,569,570
Members
45,045
Latest member
DRCM

Latest Threads

Top