Home JS Impossible to change className
Reply: 1

JS Impossible to change className

C.Norris
1#
C.Norris Published in 2018-01-12 14:48:15Z

I'm trying to update the class of first children of div#programmation

<div id="programmationEtat">
   <div class="tab-pane ng-scope">...</div>
   <div class="tab-pane ng-scope">...</div>
   <div class="tab-pane ng-scope">...</div>
   ...
</div>

I tried that:

var children = document.getElementById("programmationEtat").children;
console.log(children);
children[0].className = 'active';
console.log(children);

First console log says:

tab-pane ng-scope

Second says:

active

But nothing changed and when I look at the HTML (chrome debugger) I still have

<div class="tab-pane ng-scope"> 

What am I doing wrong ?! Thank you in advance !

EDIT: I found the problem: I was using a dynamic directive on a scope that contained this div:

   app.directive('dynamic', ['$compile', function ($compile) {
  return {
    restrict: 'A',
    replace: true,
    link: function (scope, ele, attrs) {
      scope.$watch(attrs.dynamic, function (html) {
        ele.html(html);
        $compile(ele.contents())(scope);
      });
    }
  };
}]);

And I have

$scope.programmation='...<div id="programmationEtat">
       <div class="tab-pane ng-scope">...</div>
       <div class="tab-pane ng-scope">...</div>
       <div class="tab-pane ng-scope">...</div>
       ...
    </div>...'

HTML:

<div dynamic="programmation" id="programmationEtat">
    ... 
</div>

It looks like update with a document.getElementById(...) is impossible on something that is contained in $scope.programmation, have to update on $scope.programmation directly.

To solve my problem I used replace function ($scope.programmation.replace(...)) !

Faly
2#
Faly Reply to 2018-01-12 14:51:25Z

Use ng-class:

<div id="programmationEtat">
   <div ng-class="className"class="tab-pane ng-scope">...</div>
   <div class="tab-pane ng-scope">...</div>
   <div class="tab-pane ng-scope">...</div>
</div>

$scope.className = 'active';

OR:

<div id="programmationEtat">
   <div ng-class="{ 'active': activated }"class="tab-pane ng-scope">...</div>
   <div class="tab-pane ng-scope">...</div>
   <div class="tab-pane ng-scope">...</div>
</div>

$scope.activated = true;
You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.301238 second(s) , Gzip On .

© 2016 Powered by mzan.com design MATCHINFO