We Keep Coding

Printing to the screen using innerHTML and innerText not working with my htmlCollection

This is not a duplicate so please don't close this. I did my research and already found what is considered a duplicate and it did not answer my quesiton. I want to modify all elements with the same class name in the dom so I already know the difference between getElementById and getElementsByClassName.
I have some code that almost works. I have to take a string, convert it to a number, then convert it back to a currency based string and then replace the text withing the innerHTML on screen. In my console.log, I am getting back the exact amounts I need for all the elements with the class="lh1em". I got everything working up until the point I have to replace the text with this new variable I have created with the new and improved data. I have tried to do it with a function, without a function but in both cases, I get no results, no errors except I get correct info in the console.log.
Here is my html:
<div class="price">
<span class="label">from</span>
<span class="value"><span class="text-lg lh1em item "> $3,845.00</span>
</span>
<br>
<span class="label">from</span>
<span class="value"><span class="text-lg lh1em item "> $3,645.00</span>
</span>
</div>
and my javascript
let customPrice = document.getElementsByClassName('lh1em');
Array.from(customPrice).forEach(function(dollarAmount) {
let withoutDollar = dollarAmount.innerText.substr(1);
let withoutComa = withoutDollar.replace(",",'');
let noPointZero = withoutComa.replace(/\.00/, '');
noPointZero = Number(noPointZero);
let newDollar = noPointZero - 600;
let formatter = new Intl.NumberFormat('en-US', {
style: 'currency',
currency: 'USD',
});
let doubleOccupancyPrice = formatter.format(newDollar);
function changeText() {
document.getElementsByClassName('lh1em').innerHTML = doubleOccupancyPrice;
}
changeText();
console.log(doubleOccupancyPrice);
});
If anyone can show me what I am doing wrong, I would sure appreicate it. Thank you in advance.

Credit goes to #pilchard for helping me come up with the answer to this.
I just had to replace my function with the following code:
dollarAmount.innerHTML = doubleOccupancyPrice;
With that, I was able to get the right info both in cosole and on the dom

Trouble setting the HTML of a variable in JQuery

What I've done is loaded some HTML from a file and I am attempting to modify some elements within that HTML.
The initialization looks like this:
var id = player_info["ID"];
$("#main_container").append(
$("<div />").attr({class: "player_container", id: "player_" + id}).css("display", "none")
);
// Add all information to the player container
var player_container = $("#player_" + id);
player_container.load("player_layout.html");
With player_layout.html looking like this:
<div class="player_name">
</div>
<div class="player_chips">
Chips:
<br/>
<span class='bidding'></span>/<span class='chips'></span>
</div>
<div class="player_stats">
Wins / Losses
<br/>
<span class="wins"></span>/<span class="losses"></span>(<span class="total_games"></span>)
<br/><br/>
Chips Won / Chips Lost
<br/>
<span class="chips_won"></span>/<span class="chips_lost"></span>
</div>
<button class="player_won">Player Has Won</button>
I then want to modify some of the elements, specifically classes. An example of the way I was initially doing this is:
player_container.find(".player_name").text(player_info['username']);
This wasn't working so I then tried to switch find with children and text with html but that didn't seem to work. I then tried this:
$('> .player_name', player_container).html(player_info['username']);
but that also didn't work. I understand that I can use DOM to grab the childNodes and compare the class names but there are a lot of classes that need modifying and I'd also like to know if this is possible in JQuery. Thanks in advance for any help.

You need to use complete callback method of .load()
var player_container = $("#player_" + id);
player_container.load("player_layout.html", function(){
player_container.find(".player_name").text(player_info['username']);
});

Angularjs custom dropdown scroll to value

How can I make selected item in listbox scroll to the top?
[http://jsfiddle.net/729nX/1/
Some thing familiar to this but with a few changes :
1) using only angular, without jq.
2) my code is different.
<span class="custom-list-wrapper" ng-show="openDropDown">
<span class="custom-list">
<span class="list-object ng-binding ng-scope selected" ng-repeat="(key, value) in countries " data-value="AUT" ng-click="changeCountry({data: value.name})" ng-class="{selected : selected.name == value.name}">
Austria
</span>
This is how it looks on my side:
<span class="custom-list-wrapper" ng-show="openDropDown">
<span class="custom-list" >
<span class="list-object" ng-repeat="(key, value) in countries " data-value="{{key}}" ng-class="{selected : selected.name == value.name}">
{{value.name}}
</span>
</span>
</span>
This is a really long list and i want to scroll to the specific item in the dropdown, some thing like in the fiddle
/* var scrollToSelected = function(){
// angular.element('.custom-list').animate({scrollTop : angular.element(xxx)},1000);
angular.element('.custom-list').animate({
scrollTop: angular.element('span[value="AUT"]').offset().top
}, 1000);
}
i tried this but got a jqlite error.
Would happy to hear any solution :)

As you aren't using JQuery, you should look into how jQLite work. The way jQLite works is, it can only query to predefined tagName & element of HTML. For custom-class & selector based query you have to use native-browser API to get a DOM.
var customList = document.getElementsByClassName('custom-list'),
spanAut = document.querySelector('span[value="AUT"]');
angular.element(customList).animate({
scrollTop: angular.element(spanAut).prop('offsetTop')
}, 1000);

How to make ko.sortable work with ko.computed

I am using knockout and Ryan Niemeyers ko.sortable.
My aim is to move items from one container to another. This works nice.
However, due to other circumstances I want the observableArrays object to be drag´n´dropped to be ko.computed.
I have a basic array containing all my elements
self.Textbatches = ko.observableArray();
then I have a filter version
self.TextsTypeOne = ko.computed(function(){
return ko.utils.arrayFilter(self.Textbatches(),function(t){
return t.type() === '1';
});
});
I have another filtered list with the texts dragging:
self.allocationableTextbatches = ko.computed(function(){
return ko.utils.arrayFilter(self.Textbatches(),function(t){
return t.type() === null;
});
});
Then I create my two containers with ´self.TextsTypeOne´ and ´self.allocationableTextbatches´:
<div id="allocationable-texts" class="menupanel">
<h4 class="select">Text(s) to allocate:</h4>
<div class="tb-table">
<div class="tb-list" data-bind="sortable:{template:'textbatchTmpl',data:$root.allocationableTextbatches,allowDrop:true}"></div>
</div>
</div>
<div id="TypeOne-texts" class="menupanel">
<h4 class="select">Text(s) on scene:</h4>
<div class="tb-table">
<div class="tb-list" data-bind="sortable:{template:'textbatchTmpl',data:$root.TextsTypeOne,allowDrop:true}"></div>
</div>
</div>
where
<script id="textbatchTmpl" type="text/html"><div class="textbatch" data-bind="click: $root.selectedText">
<span class="tb-title" data-bind="text: title"></span>
I can easily add buttons to my template setting type to 'null' and '1' respectively, and make it work that way. However I want this to be a drag and drop feature (as well) and the ko.sortable works on the jquery-ui objects. Thus it needs ´ordinary´ ´ko.observableArrays´ and not ´ko.computed´s as it is 'splice´-ing the observableArray, and dragging and dropping results in an error "TypeError: k.splice is not a function".
I have tried to make ´self.allocationableTextbatches´ and ´self.TextsTypeOne´ writable computed, but to no avail.
Any help and suggestions is highly appreciable!
Thanks in advance!

Javascript: Schema Explorer Chrome Extension loop needs to ignore irrelevant nested elements

This should be easy for a Javascript expert.
For those who don't know what schema is ( http://schema.org ), it's a new way for Search Engines to read content on a webpage. It works by tagging relevant data with specific tags.
For those who do know what it is, here is a chrome extension (Schema Explorer) that makes it easy to inspect what your data looks like on your page. See the example.
NOW: There is a tiny issue with the extension where by is does not skip/ignore empty nested elements. Here are two examples: The first works perfectly but, the second bombs because of the empty <div> tag:
First example works:
<div itemscope="" itemtype="http://schema.org/Movie">
<h1 itemprop="name">Avatar</h1>
<div itemprop="director" itemscope="" itemtype="http://schema.org/Person">
Director: <span itemprop="name">James Cameron</span> (born <span itemprop="birthDate">August 16, 1954</span>)
</div>
<span itemprop="genre">Science fiction</span>
Trailer
</div>
Seconds example gives issues:
<div itemscope="" itemtype="http://schema.org/Movie">
<div>
<h1 itemprop="name">Avatar</h1>
<div itemprop="director" itemscope="" itemtype="http://schema.org/Person">
Director: <span itemprop="name">James Cameron</span> (born <span itemprop="birthDate">August 16, 1954</span>)
</div>
<span itemprop="genre">Science fiction</span>
Trailer
</div>
</div>
I had a look at the extension and it's actually very well put together with one javascript file doing most of the work. Here is the code that does the looping, however it needs to be able to skip empty nested elements and perhaps be a little bit more robust in general:
var __explore = function(node, parentData)
{
if (parentData === null || parentData === undefined)
{
parentData = __dataTree;
}
if (node.getAttribute)
{
var isItemScope = node.getAttribute('itemscope');
var hasItemProp = node.getAttribute('itemprop');
var itemtype = node.getAttribute('itemtype');
var childs = node.childNodes;
var i = 0;
var tmp = new Array();
while (i < childs.length)
{
if (isItemScope !== null)
__explore(childs[i], tmp);
else
__explore(childs[i], null);
++i;
}
if (isItemScope !== null)
{
parentData.push({name : 'scope', value : hasItemProp, type : itemtype, childs : [tmp], node : node});
}
else if (hasItemProp && parentData)
{
parentData.push({name : hasItemProp, value : node.innerText});
}
}
}
Here is the complete versions of the contentscript.js https://gist.github.com/3413475
Hopefully someone can help me with this. For the record I've contacted the author but he's been preoccupied with more urgent matters.

I made it work as expected: http://jsfiddle.net/vyrvp/1/ but I must confess that this is a bit hackish. This code may need some more refactoring to make it work for all cases and make it readable.