We Keep Coding

Cannot set .color property in JS

<button id="change_button" class="btn btn-primary" onclick="ColorMe()">CLICK ME</button>
<div class="container">
<div class="row">
<div class="col-md-4 col-sm-4">
<div class="grid_element">
<div class="title">
COLOR IS:
</div>
</div>
</div>
<div class="col-md-4 col-sm-4">
<div class="grid_element">
<div class="title">
COLOR IS:
</div>
</div>
</div>
<div class="col-md-4 col-sm-4">
<div class="grid_element">
<div class="title">
COLOR IS:
</div>
</div>
</div>
</div>
Clicking a button is supposed to color all the elements of class "grid_element" into red but in never happens.
function ColorMe() {
document.getElementsByClassName("grid_element").style.color = ("red");
}
The problem is said to be Cannot set property 'color' of undefined
at ColorMe (js.js:2) but I know it worked in the same way many times before.

The problem is that you are attempting to use the .style property on the collection of elements found by .getElementsByClassName() instead of on each of the elements within the collection.
Also (FYI), .getElementsByClassName() returns a "live" node list, which causes the entire DOM to be re-scanned every time you access the node list variable and that can impact performance quite a bit. There are limited use cases for that, so you probably want a "static" node list more often than not. For that, use .querySelectorAll().
function ColorMe() {
// Get all the matching elements into a JavaScript Array
var elements = Array.prototype.slice.call(document.querySelectorAll(".grid_element"));
// Loop over each element....
elements.forEach(function(el){
el.style.color = "red"; // Adjust the element's style
});
}
<button id="change_button" class="btn btn-primary" onclick="ColorMe()">CLICK ME</button>
<div class="container">
<div class="row">
<div class="col-md-4 col-sm-4">
<div class="grid_element">
<div class="title">
COLOR IS:
</div>
</div>
</div>
<div class="col-md-4 col-sm-4">
<div class="grid_element">
<div class="title">
COLOR IS:
</div>
</div>
</div>
<div class="col-md-4 col-sm-4">
<div class="grid_element">
<div class="title">
COLOR IS:
</div>
</div>
</div>
</div>

How to change the Checkbox icon to behave like **indeterminate** with "+" and "-" Symbols

I have checkbox with its original behaviour. I wanted to add + and - symbols to it while expanding and collapsing those checkbox.
Can any one please tell me how can I achieve this ?
Following is my Code in jade:
.form-group
.checkbox#some-checkbox(style="margin-left: 10px;")
label(data-toggle='collapse', data-target='#collapseOne', aria-expanded='false', aria-controls='collapseOne')
input(type='checkbox')
| My Name
#collapseOne.collapse(aria-expanded='false')
.well1
.row
.col-sm-12.col-lg-12
.nutrition-category
.row.header3.margin-left-10
.row.paragraph
.col-xs-6(style="font-size: 18px;") New Name
Non Jade (HTML) Code:
<div class="form-group">
<div class="checkbox" id="some-checkbox" style="margin-left: 10px">
<label data-toggle="collapse" data-target="#collapseOne" aria-
expanded="false" aria-controls="collapseOne">
<input type="checkbox"/> My Name
</label>
</div>
</div>
<div class="collapse" id="collapseOne" aria-expanded="false">
<div class="well1">
<div class="row">
<div class="col-sm-12 col-lg-12">
<div class="nutrition-category">
<div class="row header3 margin-left-10">
<div class="row paragraph">
<div class="col-xs-6" style="font-size: 18px"> New
Name</div>
</div>
</div>
</div>
</div>
</div>
and here is the javascript that i have used for it:
script(type='text/javascript').
$(document).ready(function() {
$("#some-checkbox").prop("indeterminate", true);
});

How can I locate element for ecom application , where I have a product listing page , below is HTML:

I am new in webdriver automation field. I am trying to click on the first product in Product listing page but I am unable to locate any product element in order to click on it. Kindly help. Already tried google and stack overflow for answers but couldn't find one to solve my issue.
My code:
<div class="small-6 medium-4 large-3 columns category-product cat-grid grid-view clear-both" data-name="Zivame Bandage Moderate Pushup Strapless Bra-Black" data-rating="" data-ptype="Bras" data-brand="Zivame" data-sku="B65707-Black" data-product-id="174254"
style="height: 545px;">
<div class="image-wrapper" data-price="995" data-name="Zivame Bandage Moderate Pushup Strapless Bra-Black" title="Zivame `enter code here`Bandage Moderate Pushup Strapless Bra-Black">`enter code here`
<div class="front pos-relative">
<a target="_blank" href="/zivame-bandage-moderate-pushup-strapless-bra-black.html?trksrc=category&trkid=Bras">
<img class="act-place lazy" data-small="//cdn.zivame.com/media/zcmsimages/configimages/B65707-Black/1_small.jpg" data-original="//cdn.zivame.com/media/zcmsimages/configimages/B65707-Black/1_medium.jpg" src="//cdn.zivame.com/media/zcmsimages/configimages/B65707-Black/1_medium.jpg"
alt="Zivame Bandage Moderate Pushup Strapless Bra-Black" style="display: inline-block;">
</a>
<div class="product-name">
</div>
<div class="more-on icon-chevron-down pointer show-for-small-down"></div>
<div class="mobile-controls show-for-small-down">
<div class="row product-details">
<div class="row">
<div class="row">
<div class="large-12 medium-12 small-12 columns more-actions show-for-medium-up">
<div class="check-size left text-center pointer" title="check sizes">
<i class="sel-product-color left pd-l10 pointer icon-palette" title="More colors in this"></i>
<span class="fs-10 left color-count">1</span>
<i class="show-similar left pd-l10 pointer icon-layers" title="More like this"></i>
<div class="add-to-cart-btn mr-r10">
<span class="shortlist-item icon-heart left pointer" title="Add to Wishlist"></span>
<span class="add-to-cart z-uppercase left pointer" title="Add to Cart">Add to Cart</span>
</div>
<div class="fav-count fs-10 ff-rr">216 people favorited this</div>
</div>

ngRepeat doesn't display items

We're working on a e-commerce platform at my work and we use AngularJS. Yesterday we put a great amount (200+, in small quantities it works well) of products in the bag and a bug started, some items aren't listed but it is in the HTML when we inspect elements.
The following codes are what we have:
The directive:
class dSacolaItem{
constructor(){
this.restrict = 'EA';
this.templateUrl = 'views/directives/component-sacola-item.html';
this.scope = {
dirParent: '=?dSacolaItem'
};
}}
The template of the items:
<div class="row block-item" ng-repeat="(key, prod) in dirParent.data track by $index">
<div class="col-xs-12 col-sm-4 col-md-6">
<div class="box-img pull-left">
<img class="img-responsive" ng-src="images/photos/50/{{::prod.imagem}}" d-err-src="images/photos/50/0.jpg" alt="{{::prod.descricao_curta}}">
</div>
<div class="box-infos pull-left">
<h5 class="text-uppercase text-primary" ui-sref="main.produto({ idproduto: {{::prod.id_produto}}, descricao: '{{::prod.descricao_link}}' })">{{::prod.descricao_curta}}</h5>
<small>{{::prod.var1 == undefined ? 'Único' : prod.var1}} | {{::prod.var2 == undefined ? 'Único' : prod.var2}} | {{::prod.var3 == undefined ? 'Único' : prod.var3}}</small>
<button class="btn btn-default btn-xs" type="button" ng-click="dirParent.removeItem(prod.id_variacao)">
<span ng-show="dirParent.removing_prod != prod.id_variacao">remover</span><span ng-show="dirParent.removing_prod == prod.id_variacao"><i class="fa fa-refresh fa-spin"></i></span>
</button>
</div>
</div>
<div class="col-xs-6 col-sm-2 col-md-1 text-center">
<div class="box-gift text-center">
<form name="fGift" ng-submit="false" novalidate>
<label class="gift-prod" ng-if="::(dirParent.configs.produto_preco_presente > 0)">
<input type="checkbox" name="presente" ng-model="prod.presente" ng-change="dirParent.setGift( key, prod.presente )">
<div>
<i class="fa fa-gift fa-3x"></i>
<small>PRESENTE</small>
<small>(R$ {{::dirParent.configs.produto_preco_presente | currency: '': 2}})</small>
</div>
</label>
</form>
</div>
</div>
<div class="col-xs-6 col-sm-2 col-md-1 text-center">
<div class="box-qtde" tooltip-placement="left" uib-tooltip="Em estoque: {{::prod.estoque}}" tooltip-enable="prod.estoque == prod.qtde">
<div class="btn-group btn-group-justified">
<div class="btn-group">
<button class="btn btn-primary" ng-click="dirParent.updateQtde('decrement', key)" ng-class="{'disabled': prod.qtde == 1}"><i class="fa fa-angle-down"></i></button>
</div>
<div class="btn-group">
<button class="btn btn-primary" ng-click="dirParent.updateQtde('increment', key)" ng-class="{'disabled': prod.estoque == prod.qtde}"><i class="fa fa-angle-up"></i></button>
</div>
</div>
<input class="form-control text-center" type="text" ng-value="prod.qtde" disabled="disabled">
<i class="fa fa-refresh fa-spin refresh-qtde" ng-style="dirParent.value_load[key]"></i>
</div>
</div>
<div class="col-xs-6 col-sm-2 box-values text-center">
<span>unitário:</span>
<h5 class="text-primary">R$ {{::prod.preco | currency: '': 2}}</h5>
</div>
<div class="col-xs-6 col-sm-2 box-values text-center">
<span>total:</span>
<h5>R$ {{prod.preco * prod.qtde | currency: '': 2}}</h5>
</div>
I tried to use one-time binding in every place that was possible, but some data needs to be updated...
And finally, how I call the directive:
<div class="shopping-items" d-sacola-item="bag"></div>
I tried to put infinite scroll but it didn't work and also went through a lot of articles trying to fix this but nothing helped.
Some prints of the problem (look to the scroll)
Begin of displayed data (scroll is in 1/3 of the page)
Item not displayed but in the HTML
Anyone with the same problem? I don't know anymore what I should do to fix it.
[add 1]: It seems only browsers that use chromium (Chrome, Opera...) have the issue. Firefox, IE, edge and wow safari 5.1 (2012 version) show everything with some hard work, but at least they display data correctly.

How to initialize dynamic fields generated with a ng-repeat?

If I have in my view this html code, generated dinamically with ng-repeat:
<div ng-repeat="item in selectedProcedures track by $index">
<span style="display:none;">{{item.id}}</span>
<div class="row" ng-repeat="item2 in item.serviceComposite.designators">
<div class="col-sm-10 col-md-10 col-xl-10">
<div>
<button ng-click="hidePartBindings{{$parent.$index}} = !hidePartBindings{{$parent.$index}}" style="background: none; border: 0; float:left; text-align:center; margin-right: 5px;"><img src="./css/themes/parsek/img/layout/caret-blue.svg"/></button>
<span id="serviceComposite{{$parent.$index}}">{{ item2.extension }}</span>
</div>
<div class="row" id="partBindings{{$parent.$index}}" ng-repeat="item4 in item.serviceComposite.partBindings" ng-show="hidePartBindings{{$parent.$index}} === false">
<div ng-repeat="item5 in item4.part.designators">
<span class="col-sm-12 col-md-12 col-xl-12">
<a style="margin-left: 3rem;" href="#item-information" class="lightbox2" ng-click="checkIfIsModified({{item5.id}}, $event)">{{ item5.extension }}</a>
</span>
</div>
</div>
</div>
</div>
</div>
How can I initialize all generated hidePartBindings{{$parent.$index}} to true in my controller?
Thanks in advance.

You could also consider a controller for each instance of your repeated item. Of course, it would not be the best thing to do if you have hundreds of items.
<div class="row" ng-repeat="item2 in item.serviceComposite.designators" ng-controller="ItemController">
If you had fewer items and wanted to go down the route of a controller for each item, it would be a simple case of setting item.hideParts = true in your item controller.