Erro crítico de JavaScript

Olá Luiz,

me manda o seu código javascrip e do cshtml para eu dar uma olhada?

carrinho.js

class Carrinho { clickIncremento(btn) { var data = this.getData(btn); data.Quantidade++; this.postQuantidade(data); }

clickDecremento(btn) { var data = this.getData(btn); data.Quantidade--; this.postQuantidade(data); }

updateQuantidade(input) { var data = this.getData(input); this.postQuantidade(data); }

getData(elemento) { var linhaDoItem = $(elemento).parents('[item-id]'); var itemId = linhaDoItem.attr('item-id'); var qtde = linhaDoItem.find('input').val();

return { Id: itemId, Quantidade: qtde }; }

postQuantidade(data) { $.ajax({ url: '/pedido/PostQuantidade', type: 'POST', contentType: 'application/json', data: JSON.stringify(data) }) } } var carrinho = new Carrinho();

Carrinho.cshtml

@{ ViewData["Title"] = "Carrinho"; }

@model CasaDoCodigo.Models.ViewModels.CarrinhoViewModel;

Meu Carrinho

Item

Preço Unitário

Quantidade

Subtotal

@foreach (var item in Model.Itens) {

@(item.Produto.Nome)

R$ @(item.PrecoUnitario)

R$ @(item.Subtotal)

}

Total: @Model.Itens.Count() @(Model.Itens.Count < 2 ? "item" : "itens")

Total: R$ @Model.Total

@section Scripts { }

Lucas ficou muito ruim. Com essa formatação.

agora sim:

carrinho.js

class Carrinho {
    clickIncremento(btn) {
        var data = this.getData(btn);
        data.Quantidade++;
        this.postQuantidade(data);
    }

    clickDecremento(btn) {
        var data = this.getData(btn);
        data.Quantidade--;
        this.postQuantidade(data);
    }

    updateQuantidade(input) {
        var data = this.getData(input);
        this.postQuantidade(data);
    }

    getData(elemento) {
        var linhaDoItem = $(elemento).parents('[item-id]');
        var itemId = linhaDoItem.attr('item-id');
        var qtde = linhaDoItem.find('input').val();

        return {
            Id: itemId,
            Quantidade: qtde
        };
    }

    postQuantidade(data) {
        $.ajax({
            url: '/pedido/PostQuantidade',
            type: 'POST',
            contentType: 'application/json',
            data: JSON.stringify(data)
        })
    }
}

var carrinho = new Carrinho();

Carrinho.cshtml

@{ 
    ViewData["Title"] = "Carrinho";
}

@model CasaDoCodigo.Models.ViewModels.CarrinhoViewModel;

<h3>Meu Carrinho</h3>

<div class="panel panel-default">
    <div class="panel-heading">
        <div class="row">
            <div class="col-md-6">
                Item
            </div>
            <div class="col-md-2 text-center">
                Preço Unitário
            </div>
            <div class="col-md-2 text-center">
                Quantidade
            </div>
            <div class="col-md-2">
                <span class="pull-right">
                    Subtotal
                </span>
            </div>
        </div>

    </div>
    <div class="panel-body">

        @foreach (var item in Model.Itens)
        {
            <div class="row row-center" item-id="@(item.Id)">
                <div class="col-md-3">
                    <img src="~/images/produtos/small_@(item.Id).jpg" />
                </div>
                <div class="col-md-3">@(item.Produto.Nome)</div>
                <div class="col-md-2 text-center">R$ @(item.PrecoUnitario)</div>
                <div class="col-md-2 text-center">
                    <div class="input-group">
                        <span class="input-group-btn">
                            <button class="btn btn-default"
                                    onclick="carrinho.clickDecremento(this)">
                                <span class="glyphicon-minus"></span>
                            </button>
                        </span>
                        <input type="text" value="@(item.Quantidade)" 
                               class="form-control text-center"
                               onblur="carrinho.updateQuantidade(this)"/>
                        <span class="input-group-btn">
                            <button class="btn btn-default" 
                                    onclick="carrinho.clickIncremento(this)">
                                <span class="glyphicon-plus"></span>
                            </button>
                        </span>
                    </div>
                </div>
                <div class="col-md-2">
                    <span class="pull-right">
                        R$ @(item.Subtotal)
                    </span>
                </div>
            </div>
        }



    </div>
    <div class="panel-footer">
        <div class="row">
            <div class="col-md-10">
                <span>Total: @Model.Itens.Count() @(Model.Itens.Count < 2 ? "item" : "itens")</span>
            </div>
            <div class="col-md-2">
                <span class="pull-right">
                    Total: R$ @Model.Total
                </span>
            </div>

        </div>
    </div>
</div>
<div class="row">
    <div class="col-md-12">
        <a asp-action="resumo"
           class="btn btn-success pull-right">
           Finalizar Pedido
        </a>
    </div>
</div>


@section Scripts
{ 
    <script src="~/js/carrinho.js"></script>
}

Estranho, o código parece correto. Aquela é a mensagem de error completa? Se não, manda ela inteira para eu dar uma olhada também.

Então quando eu rodo a aplicação. A página do Carrossel é exibida.

Quando eu clico em "Adicionar" para entrar no "Carrinho" dá esse erro:

"Erro crítico de JavaScript na linha 1, coluna 1 em http://localhost:64492/js/carrinho.js\n\nSCRIPT1002: Erro de sintaxe"

Ele dá a opção de "Parar Depuração" ou "Continuar".

Clicando em "Continuar"...

Ao selecionar a opção para adicionar "+". Dá o seguinte erro:

"Exceção sem tratamento na linha 76, coluna 46, em http://localhost:64492/Pedido/carrinho 0x800a1391 - Erro em tempo de execução do JavaScript: 'carrinho' não está definido ocorreu"

O erro fica apontando para a linha do carrinho.cs:

                        <button class="btn btn-default" 
                                    onclick="carrinho.clickIncremento(this)">
                                <span class="glyphicon-plus"></span>
                            </button>

Ao fechar o explorer em "depuração" aparece:

Uma exceção foi gerada na linha 1242, coluna 4, em http://localhost:64492/lib/jquery/dist/jquery.js
0x800a139e - Erro em tempo de execução do JavaScript: SyntaxError
Uma exceção foi gerada na linha 1260, coluna 4, em http://localhost:64492/lib/jquery/dist/jquery.js
0x800a139e - Erro em tempo de execução do JavaScript: SyntaxError
Erro crítico detectado na linha 1, coluna 1 em http://localhost:64492/js/carrinho.js.
SCRIPT1002: Erro de sintaxe
Exceção sem tratamento na linha 76, coluna 46, em http://localhost:64492/Pedido/carrinho
0x800a1391 - Erro em tempo de execução do JavaScript: 'carrinho' não está definido

O programa "[2536] iexplore.exe" foi fechado com o código -1 (0xffffffff).
O programa "[7744] dotnet.exe" foi fechado com o código -1 (0xffffffff).

Olá, Luiz

Tenho a impressão de que o seu navegador tem uma versão desatualizada do javascript no cache, onde a variável carrinho não tinha sido declarada ainda. Rode a aplicação e, quando a página do carrinho abrir, tecle Ctrl + F5 para atualizar o cache. Veja se funciona, por favor.

Bom dia Marcelo,

Eu tentei executar novamente a aplicação e tentei atualizar com ctrl+F5, mas ainda está com erro.

Será que é possível, algo estar impedindo a execução do script?

É estranho que estava fazendo passo a passo. Depois da refatoração do carrinho.js começou a dar esse erro (ASP Core Parte 2 - Aula 2 - 2º vídeo).

Eu testei com o navegador Chrome e funcionou a aplicação sem erros.