Modify HTML through JS gives me undefined (AngularJS error)

Question

With this function:

function modifyJS(elemento){        
        if (document.getElementById(elemento).innerHTML.indexOf('&#10004;')>0){
            document.getElementById(elemento).innerHTML=document.getElementById(elemento).innerHTML.substring(0,document.getElementById(elemento).innerHTML.length-29);
        }else{
            document.getElementById(elemento).innerHTML=document.getElementById(elemento).innerHTML+'<b color="green">&#10004;</b>';
        }
    }

I would like to modify the inherited HTML content. When I call the function the error is the following

TypeError: Cannot read property 'innerHTML' of nullangular.1.4.6.min.js:107

I breakpointed it, but the "elemento" variable passed to identify the HTML element is correctly given to the function.

Where in your code do you call this function? Perhaps you accidentally tried to pass an element in for "elemento" that does not exist. — ajc2000
– ajc2000, Commented Jul 19, 2017 at 14:42
I call when I "ng-click" a td element with "elemento" coded inside as "id" through this Angular Function: $scope.addMenu= function(idmenu){ modifyJS(idmenu); } I breakpointed it to see if the value is correctly passed and it is. — Istorn
– Istorn, Commented Jul 19, 2017 at 14:44
What is what you are trying to achieve(in general sense) here? It seems to me that maybe what you need is a simple ng-bind or something less complex and verbose than the code you posted in your question. — lealceldeiro
– lealceldeiro, Commented Jul 19, 2017 at 14:46
I have a list of this: <td style="background: white;" id="x.id" ng-click="addMenu(x.id)">{{cleanMenuAction(x.href)}}</td> My goal is to add a "tick" symbol if the "td" is clicked, if clicked another time, it must be removed. As you can see from my question, is what the mentioned function do. I've to modify the HTML inside this is why I didn't used an ng-bind directive. — Istorn
– Istorn, Commented Jul 19, 2017 at 14:48
There is your issue! You are passing x.id to addMenu(). x.id is not the element x itself; it is the id attribute of x. If you wanted the function to have access to the element itself, try changing the addMenu(x.id) to addMenu(x) — ajc2000
– ajc2000, Commented Jul 19, 2017 at 14:51

Istorn · Accepted Answer · 2017-07-19 15:14:19Z

Having this table:

 <table class="table table-bordered">
    <tr ng-repeat="x in menus" ng-class-even="'alt'">
    <td  style="background: white;" id="x.id" ng-click="addMenu(x.href,x.id)">{{cleanMenuAction(x.href)}}</td>

    </tr>
</table>

To modify the clicked "td" tag, in the end I modified the function as this:

//Funzione per aggiungere una voce di menu da abilitare per l'utente in creazione
$scope.addMenu= function(vocemenu,idmenu){

    if (vocemenu.indexOf(' SELEZIONATA')>0){
        vocemenu=vocemenu.substring(0,vocemenu.length-(' SELEZIONATA').length);
        $scope.cleanMenuAction(vocemenu);
        $scope.menus[idmenu-1].href=vocemenu;
    }else{
        $scope.cleanMenuAction(vocemenu);
        vocemenu=vocemenu+' SELEZIONATA';

        $scope.menus[idmenu-1].href=vocemenu;
    }
}

The second one, it was used to remove parts of string that I needn't:

//Funzione per rendere più leggibile la voce di menu da mostrare
$scope.cleanMenuAction= function(stringa){
    //Verifica se presente una &
    if (stringa.indexOf("&")>0){
        return (stringa.substring((stringa.indexOf('=')+1),stringa.indexOf('&')));
    }
    else{
        return (stringa.substring((stringa.indexOf('=')+1),stringa.length));
    }
}

Collectives™ on Stack Overflow

Modify HTML through JS gives me undefined (AngularJS error)

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related