We Keep Coding

element .innerText not displaying

I'm trying to replace the text content of two divs ("city" and "budget"), one with a random US city from an array and one with a randomly generated number. The code works fine when I run it in the console, but for some reason it won't display in the browser. Any idea what's going wrong here? For my purposes I'm not using JQuery, just straight JavaScript.
HTML:
<div id="result">
<div class="city">
<h1>City</h1>
</div>
<div class="budget">
<h1>Budget</h1>
</div>
</div>
JS
function city() {
document.getElementsByClassName('.city').innerText = usCities[Math.floor(Math.random() * usCities.length)];
}
function budget() {
document.getElementsByClassName('.budget').innerText = Math.floor(Math.random() * 1000000) + 100000;
}

The problems are:
You doesn't give [0] to getElementsByClassName.
Using . in the paremeter of getElementsByClassName.
You doesn't call the function
You doesn't define the usCities
This should works:
let usCities = ["Chicago", "New York"]
function city() {
document.getElementsByClassName('city')[0].innerText = usCities[Math.floor(Math.random() * usCities.length)];
}
function budget() {
document.getElementsByClassName('budget')[0].innerText = Math.floor(Math.random() * 1000000) + 100000;
}
city();
budget();
<div id="result">
<div class="city">
<h1>City</h1>
</div>
<div class="budget">
<h1>Budget</h1>
</div>
</div>

Changing content in multiple classes via JS

I want to change the HTML-value of the highlighted span below (class=percent-value):
<div id="verfuegbarstd" class="et_pb_number_counter_4" data-number-value="0" data-number-separator="">
<div class="percent">
<p>**<span class="percent-value">0</span>**<span class="percent-sign"></span></p>
</div>
<h3 class="title">Verfügbare Stunden</h3>
<canvas height="0" width="0"></canvas>
</div>
I tried the following:
var verfuegbareStd = document.getElementsByClassName('et_pb_number_counter_4').getElementsByClassName('percent').getElementsByClassName('percent-value');
var budget = document.getElementsByClassName('et_pb_number_counter_2').getElementsByClassName('percent').getElementsByClassName('percent-value');
var lohnProStd = document.getElementsByClassName('et_pb_number_counter_3').getElementsByClassName('percent').getElementsByClassName('percent-value');
var gebrauchteStd = document.getElementsByClassName('et_pb_number_counter_5').getElementsByClassName('percent').getElementsByClassName('percent-value');
function calcVerfuegbareStd() {
var calc = budget.innerHTML / lohnProStd.innerHTML;
verfuegbareStd.innerHTML = calc;
}
calcVerfuegbareStd();
Does that make any sense?

document.getElementsByClassName returns a collection of all elements in the document with the specified class name, as a NodeList object. So thats why i check the length.
You can use also document.querySelector which gets the first element in the document with the class "xxxx" is returned.
I put both!
You can do it with jquery also but i thought you want pure js.
var elements = document.getElementsByClassName('percent-value'); // List of elements
var spanQuery = document.querySelector('.percent-value'); // The first element in the document with the class "myclass" is returned:
spanQuery.innerHTML = 'Hello!!!';
if (elements.length > 0) {
var span = elements[0];
span.innerHTML = 'Hello!!!';
}
<div id="verfuegbarstd" class="et_pb_number_counter_4" data-number-value="0" data-number-separator="">
<div class="percent">
<p>**<span class="percent-value">0</span>**<span class="percent-sign"></span></p>
</div>
<h3 class="title">Verfügbare Stunden</h3>
<canvas height="0" width="0"></canvas></div>

Try this?:
document.getElementsByClassName("percent-value").innerHTML = "the content you want";

It is simpler to use querySelector(). This will return the first element.
var verfuegbareStd = document.querySelector('.et_pb_number_counter_4 .percent .percent-value');
console.log(verfuegbareStd.innerHTML)
<div id="verfuegbarstd" class="et_pb_number_counter_4" data-number-value="0" data-number-separator="">
<div class="percent">
<p>**<span class="percent-value">0</span>**<span class="percent-sign"></span></p>
</div>
<h3 class="title">Verfügbare Stunden</h3>
<canvas height="0" width="0"></canvas>
</div>

Compare order of two HTML elements

I have a function which accepts two parameters, each of type HTML element. It is supposed to return which element appears first in the document order. Is there any simple way to determine this?
Template -
<body>
<div id="div1">
<div id="div2">
</div>
</div>
<div id="div3">
<div id="div4">
</div>
</div>
</body>
JS -
const elem1 = document.getElementById('div2');
const elem2 = document.getElementById('div4');
const firstAppearingElement = checkOrder(elem1, elem2); // it should return elem1
function checkOrder(element1, element2) {
// check which one appears first in dom tree
}

You can try with Node.compareDocumentPosition()
The Node.compareDocumentPosition() method compares the position of the
given node against another node in any document.
The syntax is object.compareDocumentPosition (nodeToCompare);
let first = document.getElementById('a');
let second=document.getElementById('b');
// Because the result returned by compareDocumentPosition() is a bitmask, the bitwise AND operator has to be used for meaningful results.See link above for more
if (first.compareDocumentPosition(second) & Node.DOCUMENT_POSITION_FOLLOWING) {
console.log('element with id a is before element with id b'); //
} else {
console.log('element with id a is after element with id b');
}
<div id="a"></div>
<div id="b"></div>

JS Remove all elements except a specific ID and its children

Responses to this:
How to remove elements except any specific id
are close to what I want but not quite.
In my case I am asking how I can remove all elements under parent id except id_n and its children: test1 and test2. The elements need to be removed, not just hidden.
<div id = "parent_id">
<div id = "id_1">
<div id = "id_11"> test</div>
<div id = "id_12">test </div>
</div>
<div id = "id_2"> test</div>
<div id = "id_n">id_n<br>
<div id='test1'>test1<br><div>
<div id='test2'>test2<br><div>
</div>
</div>
The result should be:
<div id = "parent_id">
<div id = "id_n">id_n<br>
<div id='test1'>test1<br><div>
<div id='test2'>test2<br><div>
</div>
</div>
Thanks for looking at this. Your suggestions are appreciated.

Using jQuery's siblings you remove all of it's children:
$('#id_n').siblings().remove();

Okay after thinking about this, there is another approach using Array manipulation:
var parentElement = document.getElementById('#parent_id');
parentElement.innerHtml = [].splice.call(parentElement.children).filter(item, function() {
return item.id === childId;
}).reduce((collatedHtml, item, function() {
return collatedHtml + item.innerHtml;
});
This grabs all the direct children of the parentElement and returns a new array (using Array.filter) before using Array.Reduce to collate the innerHtml of all the children.
Note: the reason i'm not using the ... prefix to convert to an Array is because it is not supported in IE 11 and below

Javascript Elements with class / variable ID

There's a page with some HTML as follows:
<dd id="fc-gtag-VARIABLENAMEONE" class="fc-content-panel fc-friend">
Then further down the page, the code will repeat with, for example:
<dd id="fc-gtag-VARIABLENAMETWO" class="fc-content-panel fc-friend">
How do I access these elements using an external script?
I can't seem to use document.getElementByID correctly in this instance. Basically, I want to search the whole page using oIE (InternetExplorer.Application Object) created with VBScript and pull through every line (specifically VARIABLENAME(one/two/etc)) that looks like the above two into an array.
I've researched the Javascript and through trial and error haven't gotten anywhere with this specific page, mainly because there's no tag name, and the tag ID always changes at the end. Can someone help? :)
EDIT: I've attempted to use the Javascript provided as an answer to get results, however nothing seems to happen when applied to my page. I think the tag is ALSO in a tag so it's getting complicated - here's a major part of the code from the webpage I will be scanning.
<dd id="fc-gtag-INDIAN701" class="fc-content-panel fc-friend">
<div class="fc-pic">
<img src="http://image.xboxlive.com/global/t.58570942/tile/0/20400" alt="INDIAN701"/>
</div>
<div class="fc-stats">
<div class="fc-gtag">
<a class="fc-gtag-link" href='/en-US/MyXbox/Profile?gamertag=INDIAN701'>INDIAN701</a>
<div class="fc-gscore-icon">3690</div>
</div>
<div class="fc-presence-text">Last seen 9 hours ago playing Halo 3</div>
</div>
<div class="fc-actions">
<div class="fc-icon-actions">
<div class="fc-block">
<span class="fc-buttonlabel">Block User</span>
</div>
</div>
<div class="fc-text-actions">
<div class="fc-action"> </div>
<span class="fc-action">
View Profile
</span>
<span class="separator-icon">|</span>
<span class="fc-action">
Compare Games
</span>
<span class="separator-icon">|</span>
<span class="fc-action">
Send Message
</span>
<span class="separator-icon">|</span>
<span class="fc-action">
Send Friend Request
</span>
</div>
</div>
</dd>
This then REPEATS, with a different username (the above username is INDIAN701).
I tried the following but clicking the button doesn't yield any results:
<script language="vbscript">
Sub window_onLoad
Set oIE = CreateObject("InternetExplorer.Application")
oIE.visible = True
oIE.navigate "http://live.xbox.com/en-US/friendcenter/RecentPlayers?Length=12"
End Sub
</script>
<script type="text/javascript">
var getem = function () {
var nodes = oIE.document.getElementsByTagName('dd'),
a = [];
for (i in nodes) {
(nodes[i].id) && (nodes[i].id.match(/fc\-gtag\-/)) && (a.push(nodes[i]));
}
alert(a[0].id);
alert(a[1].id);
}
</script>
<body>
<input type="BUTTON" value="Try" onClick="getem()">
</body>
Basically I'm trying to get a list of usernames from the recent players list (I was hoping I wouldn't have to explain this though :) ).

var getem = function () {
var nodes = document.getElementsByTagName('dd'),
a = [];
for (var i in nodes) if (nodes[i].id) {
(nodes[i].id.match(/fc\-gtag\-/)) && (a.push(nodes[i].id.split('-')[2]));
}
alert(a[0]);
};
please try it by clicking here!

var getem = function () {
var nodes = document.getElementsByTagName('dd'),
a = [];
for (var i in nodes) if (nodes[i].id) {
(nodes[i].id.match(/fc\-gtag\-/)) && (a.push(nodes[i]));
}
alert(a[0].id);
alert(a[1].id);
};
try it out on jsbin

<body>
<script type="text/javascript">
window.onload = function () {
var outputSpan = document.getElementById('outputSpan'),
iFrame = frames['subjectIFrame'];
iFrame.document.location.href = 'http://live.xbox.com/en-US/friendcenter/RecentPlayers?Length=1';
(function () {
var nodes = iFrame.document.getElementsByTagName('dd'),
a = [];
for (var i in nodes) if (nodes[i].id) {
(nodes[i].id.match(/fc\-gtag\-/)) && (a.push(nodes[i].id.split('-')[2]));
}
for (var j in a) if (a.hasOwnProperty(j)) {
outputSpan.innerHTML += (a[j] + '<br />');
}
})();
};
</script>
<span id="outputSpan"></span>
<iframe id="subjectIFrame" frameborder="0" height="100" width="100" />
</body>

What does "I can't seem to use document.getElementsByID correctly in this instance" mean? Are you referring to the fact that you are misspelling getElementByID?

So...something like this (jQuery)?
var els = [];
$('.fc-content-panel.fc-friend').each(function() {
els.push(this));
});
Now you have an array of all the elements that have both of those classes.