0

So i've been trying to reproduce a project for a couple of days, but now im with this problem of the not
recognizing(?) the value. Whats possibily causing this error to happen? also if you guys notice any incoherence in my code attempt,or have any suggestion, 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="tbody">
            <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(this.arrayItems);
    }

    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('nomeItem').value;
    
        return item;
    }
    
    validaCampos(item) {
        let msg = '';
    
        if(item.nomeItem == '') {
            msg += 'informe o nome do produto';
            }
    
        if(msg != '') {
            alert(msg);
            return false
        }
        
        return true;
    }
    
    }

    let item = new Item();

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%;
    }

more information about the error if necessary, to help identify where they are:

Uncaught TypeError: Cannot read properties of null (reading 'value')at Item.lerDados (script.js:28:60)at Item.inserir (script.js:9:25)at HTMLButtonElement.onclick (index.html:47:47)
Jorgityo
  • 11
  • 7
  • The error message indicates that the problem is on Line 28, in which you try to read `.value` from this: `document.getElementById('nomeItem')` However, no such matching element exists in the HTML. – David Apr 22 '23 at 12:02
  • thanks for you response! I changed it to: item.nomeItem = document.getElementById('item').value; but the error stills persists, any idea of what else could it be? – Jorgityo Apr 22 '23 at 12:40
  • just managed to see the absence of the id="item" in the
    – Jorgityo Apr 22 '23 at 12:54

0 Answers0