Id in Html variable

Question

Id in Html variable

Navigation

#1 by (2 votes)

2

I'm having a problem with a label, I want to change the id (that varies by number depending on the table that belongs) and on the line:

document.getElementById('labelUsuario').id = "" + numeroMesa + "";

I get the following error:

angular.js:13920 TypeError: Cannot set property 'id' of null
at ChildScope.$scope.MostrarMesasPorZona (appPedidosMozo.js:42)
at fn (eval at compile (angular.js:14817), <anonymous>:4:332)
at expensiveCheckFn (angular.js:15906)
at callback (angular.js:25885)
at ChildScope.$eval (angular.js:17682)
at ChildScope.$apply (angular.js:17782)
at HTMLButtonElement.<anonymous> (angular.js:25890)
at HTMLButtonElement.dispatch (jquery-1.9.1.min.js:3)
at HTMLButtonElement.v.handle (jquery-1.9.1.min.js:3)
(anonymous) @ angular.js:13920

here I leave my code:

HTML

<body ng-app="myAppPedidoMozo" ng-controller="myCtrlPedidoMozo" style="background-image:url('imagen/Fondo madera.jpg');">
<div class="row" id="divZonas">
    <div class="tab" ng-repeat="a in zonas">
        <button class="tablinks" id="BtnZona" ng-click="MostrarMesasPorZona(a)">{{a.nombreZona}}</button>

    </div>
</div>
<div class="row">
    <form class="form-horizontal">


        <div id="ZonaSeleccionada" class="tabcontent">
            <div class="form-group">

                <div class="col-xs-12" id="MesasDiv">
                    <div ng-repeat="a in mesas" class="col-xs-1" style="margin:5%;">
                        <button type="button" class="btn btn-warning btn-circle btn-lg" id="{{a.numeroMesa}}">

                            {{a.numeroMesa}}
                        </button>
                        <label id="labelUsuario" style="visibility:hidden;"><i class="fa fa-user-o" aria-hidden="true"></i></label>

ANGULARJS

angular.module("myAppPedidoMozo", []).controller("myCtrlPedidoMozo", function ($scope, $http) {

$http.get('/api/Pedidos/GetPedido/').then(function (response) {
    $scope.pedidos = response.data;
});

$scope.MostrarMesasPorZona = function (Zona) {
    debugger;
    $http.get('/api/Mesas/GetMesasPorZona/' + Zona.idZona).then(function (response) {
        $scope.mesas = response.data;
    });

    document.getElementById('ZonaSeleccionada').style.display = "block";
    for (var i = 0; i < $scope.pedidos.length; i++) {
        var numeroMesa = $scope.pedidos[i].numeroMesa;

        if (numeroMesa === null) {

        } else {

            document.getElementById('labelUsuario').id = "" + numeroMesa + "";
            document.getElementById($scope.pedidos[i].numeroMesa).style.visibility = "hidden";
            if ($scope.pedidos[i].idUsuario === null) {
                document.getElementById($scope.pedidos[i].numeroMesa).style.color = "red"; }}}}});

an alternative to this was in the html line in the label change it to

<label id="{{a.numeroMesa}}" style="visibility:hidden;"><i class="fa fa-user-o" aria-hidden="true"></i></label>

and thus it would have an id that varies according to the table in question, but the error according to the debugger entered into ExpensiveCheckOld in False. (I have no idea why) if I did not understand wrong it is because it does not recover the table number ({{a.numeroMesa}}) that is why it remains in null, (something of angular) and from there I can not change the properties. I hope you can tell me another alternative or solve this problem.

At the same time, I do not know if the http.Get method to the table api is doing it at the same moment that it tries to recover the id (in the div of the html that is generated by the list of tables) and to the do not yet do the list of tables does not have the element label (I do not know if I explain.) How to solve this because I list the tables after the page load, since I need to do it by zone filter (to the list of tables the charge after clicking on a button of a zone in question)

javascript html5 css angularjs asp.net-web-api

asked by Aylen Menichetti 05.10.2017 в 13:16

source

1 answer

Error invalid literal for int () with base 10 Management of "Enum" in javascript? [closed]

score 2 · Accepted Answer

When you make the first click the label works because you still have the id labelUsuario and you proceed to change the id so when doing the second cli and look for the element document.getElementById('labelUsuario') , you will not find it because you changed the id in the previous execution.

For example, here whenever you click on the button the id is changed. It only works in the first one because its id is actually proof but then it changes to 0 and can not be found:

angular.module("app",[])
.controller("ctrl", function($scope){
 
 var id = 0;
 $scope.cambiar = function(){
   var label = document.querySelectorAll("label")[0];
   console.log("el id del label es:" + label.id);
   document.getElementById("prueba").id = (id++).toString();
   console.log("se cambio el id dinamicamente");
 }
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
   <label id="prueba">Preuba label</label>
   <button ng-click="cambiar()">cambiar</button>
</div>

In short, you are looking for an element with the id "labelUser" but you change that id so it launches null. One suggestion is to save the table number in an attribute data of the item and then read it:

angular.module("app",[])
.controller("ctrl", function($scope){
 
 var id = 0;
 $scope.cambiar = function(){
   
   var $prueba = $("#prueba");
   $prueba.data("id", (id++).toString());
   console.log("el data-id actual es " + $prueba.data("id"));

   
 }
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
   <label id="prueba">Preuba label</label>
   <button ng-click="cambiar()">cambiar</button>
</div>

Regarding the request to the api of the orders, the most advisable would be to disable the button that executes the ShowMesasPorZona method until the orders are loaded because ajax is asynchronous so it may not have loaded the permissions when the command is executed. method. So once you have the orders, you enable the button and you are completely sure that you can continue.