Develop Reference

Insert HTML element based on length of other element in for Loop

So I want to insert a span element x times based on the length of another html element as with a for loop. I am getting the correct amount returned but I get undefined in the html. I know I am doing something wrong in the loop, but can't see where? I have looped over arrays and returned the value before via a for loop, but inserting an element based on the count loop I have not. So I should be inserting the <span class="pagination-bullet"></span> say 4 times based on count. In html i get <<s<sp<spa So definitely something is not right.
var counterElem = document.querySelectorAll('.slider-carousel-slide');
var count = counterElem.length;
var paginationCount = count;
var parentElem = document.querySelector('#main-carousel-pagination');
var paginationElement = document.createElement('SPAN');
paginationElement.innerHTML = '<span class="pagination-bullet"></span>';
var insert = '';
for (i = 0; i < count; i++ ) {
insert += `<span class="swiper-pagination-bullet">`[i];
parentElem.append(insert);
}
So what I would expect is if count = 4, then the html would be:
<span class="pagination-bullet"></span>
<span class="pagination-bullet"></span>
<span class="pagination-bullet"></span>
<span class="pagination-bullet"></span>

When you are doing xxxxx[0] you are saying give me the first index of the string. Hence why you are seeing that weird output.
Assuming you want the number, you would use ${} in your string template literal.
insert += `<span class="swiper-pagination-bullet">${i}</span>`;
without the number
insert += `<span class="swiper-pagination-bullet"></span>`;
Can also build the string without the loop.
var insert = Array(count).fill('<span class="swiper-pagination-bullet"></span>').join();
parentElem.innerHTML = insert;

Example:
var counterElem = document.querySelectorAll('.slider-carousel-slide');
var count = counterElem.length;
var paginationCount = count;
var parentElem = document.querySelector('#main-carousel-pagination');
var paginationElement = document.createElement('SPAN');
paginationElement.innerHTML = '<span class="pagination-bullet"></span>';
var insert = "";
for (i = 0; i < count; i++ ) {
insert += "<span class=\"swiper-pagination-bullet\">" + [i] + "</span>";
}
parentElem.append(insert);

Online quiz with radio buttons having same name

I'm making a simple Quiz using Js, the problem is that my inner loop (i.e i) is not works as expected.
I have taken 3 questions and each question has 3 radio options, options of each question have same name. all the options of fist question have name='cap', options of second question name='an' and third question is name='lang'.
My js function is as follows:
function my(){
var count=0;
var totalQuestions = 3;
var correctAnswers = 0;
var alertText;
var n=["cap","an","lang"];
var j,i;
for(j=0; j<n.length; ++j){
var x = document.getElementsByName('n[j]');
for(i = 0; i < x.length; ++i){
if (x[i].checked){
if (x[i].value == 'true'){
count=count+10;
correctAnswers++;
break;
}
}
}
}
if(correctAnswers == totalQuestions){
alertText = "Congratulations! You got all the questions right!";
}
else {
alertText = "You got " + correctAnswers + " correct answers and score is " + count;
}
alert(alertText);
}

Replace line
var x = document.getElementsByName('n[j]');
to
var x = document.getElementsByName(n[j]);
That's problem because for js getElementsByName('n[y]') means "get elements with name n[y]", but not item of list n, which contain name of elements you need to select.
Good Luck !

var x = document.getElementsByName('n[j]');
Should be
var x = document.getElementsByName(n[j])
getElementsByName returns all elements that match the name per docs.
The issue is you hardcoded the string 'n[j]' so its looking for all elements with the name 'n[j]'.
You actually want to look up the name from y our array n at index j So removing the quotes will actually evaluate that expression n[j]

Change your code from
var x = document.getElementsByName('n[j]');
To
var x = document.getElementsByName(n[j]);
Your existing code tries to find a element which has name='n[j]'ie: a string. But what you want is to evaluate the expression get the element with the name equal to evaluated value.

Greasemonky: How to return count and value of specific div class?

Lets say I have the following on a page:
<div class="data-container">John</div>
<div class="data-container">Dave</div>
<div class="data-container">Bob</div>
How can I use a javascript in greasemonkey to count each "data-container" class, extract the value (i.e. John) and display this info as a popup? like so:
1) John
2) Dave
3) Bob
Here is what I got so far that isn't working:
var elements = document.getElementsByClass("data-container");
for(var i=0;i<elements.length;i++){
document.body.innerHTML= document.body.innerHTML.replace(/<div class=\"data-container\">/g,"<p style=\"text-align: center;\"><span style=\"font-size:16px;\"><strong><span style=\"background-color:#ffff00;\">"+ elements[i].className + "</span></strong></span></p><div class=\"data-container\">");
}
Edit
Thanks cbwll! here is my current working code:
var elements = document.getElementsByClassName("data-container");
var contents = [];
var run = [];
for (var i = 0; i < elements.length; i++) {
contents += elements[i].textContent;
run += i;
final = run + contents;
}
alert(JSON.stringify(final));
it produces:
0123johndavebobevan
which is 0,1,2,3 & John, Dave, Bob, Evan
Any ideas on how the get them paired correctly then get a "\n" in there?

var elements = document.getElementsByClass("class");
var contents = [];
for (var i = 0; i < elements.length; i++) {
contents += elements[i].textContent;
}
//contents would be an array containing the names given in your example.

Javascript loop not appending value in each container

This might be such a simple fix, but I think I've been stuck on this issue for way to long. Can someone spare a pair of eyes and see where I'm messing up?
I'm pulling data from a json file and trying to append the right value with the right container. Right now it's placing all the values in the first div container.
var metaDataArray = resultSet.searchResult[i].metadatatoshow;
for (var xx = 0; xx < metaDataArray.length; xx++) {
var metaDataContainer = "<div id='itemMetaDataContainer_"+xx+"'>Meta Data:" + metaDataArray[xx].name + "-</div>"
for (var xxx = 0; xxx < metaDataArray[xx].meta_values.length; xxx++) {
$('#itemMetaDataContainer_'+xx).append(metaDataArray[xx].meta_values[xxx]);
}
itemDetailsDiv.append(metaDataContainer);
}

you are trying to select a container before you append it to the details div. try appending the data values array to your container the following way:
var metaDataArray = resultSet.searchResult[i].metadatatoshow;
for (var xx = 0; xx < metaDataArray.length; xx++) {
var metaDataContainer = $("<div id='itemMetaDataContainer_" + xx + "'>Meta Data:" + metaDataArray[xx].name + "-</div>");
for (var xxx = 0; xxx < metaDataArray[xx].meta_values.length; xxx++) {
metaDataContainer.append(metaDataArray[xx].meta_values[xxx]);
}
itemDetailsDiv.append(metaDataContainer);
}
UPDATE:
a jQuery object holds the plain html element in index [0] (assuming its not an array).
to get the html out of metaDataContainer you can find it in metaDataContainer[0]
therefore, in order to append the jQuery object metaDataContainer to the plain html element itemDetailsDiv, you need to do the following:
itemDetailsDiv.innerHtml + = metaDataContainer[0];
UPDATE 2:
Here is a plain JavaScript solution:
var metaDataArray = resultSet.searchResult[i].metadatatoshow;
for (var xx = 0; xx < metaDataArray.length; xx++) {
//initializing the html string with the container opening tag and the description:
var metaDataContainer = "<div id='itemMetaDataContainer_" + xx + "'>Meta Data:" + metaDataArray[xx].name;
//looping through the values and adding them to the html string:
for (var xxx = 0; xxx < metaDataArray[xx].meta_values.length; xxx++) {
//create a span for each value and add it to the html string
metaDataContainer+="<span>" + metaDataArray[xx].meta_values[xxx] + "</span>";
//add a line break just for aesthetics, you can change to suit your formatting requirements
metaDataContainer+="<br/>";
}
//finish by adding a closing tag for the container
metaDataContainer+="-</div>"
//append the new html string to the details div
itemDetailsDiv.innerHtml +=metaDataContainer;
}

javascript how to pass each element in an array to different var

I am new to javascript and recently have a problem to passing elements from array to var.
For example, I have an array like var anArray = [[a1,a2,a3],[b1,b2,b3],[c1,c2,c3]], and I have 3 different var a , b and c.
after some loop codes,
what I would like to see is:
while a=a1, b should be b1 and c=c1
while a=a2, b=b2 and c=c2
while a=a3, b=b3, c=c3
also pls consider that what if I have array like:
[[a1,a2,a3],[b1,b2,b3]] which will result a=a1 while b=b1, a=a2 while b=b2 etc.
or [[a1,a2],[b1,b2],[c1,c2]] which will result a=a1 while b=b1 and c=c1, a=a2 while b=b2 and c=c2
If my question is still not clear enough, please comments it and I will update it.
I really appreciate all the comments and the code that you have made! Many thanks!

You have a bunch of pieces backwards and in the wrong place:
var anArray = [[1,2],[1,2]];
for(var i=0;i <= anArray.length - 1;i++)
{
for(var j=0;j<anArray[i].length;j++){
var a = anArray[i][j];
var b = anArray[i + 1][j];
alert("a: "+a+" and b: "+b);
}
}
Edit: adjusted after you changed your entire question.

Let say that we have have an array like thisvar anArray = [[1,2,3],[4,5,6]];
and if you want to alert this a=14;b=25;c=36; then you can use this code
var anArray = [[1,2,3],[4,5,6]];
for ( i = 0; i < anArray.length; i++ ) {
var l = anArray[i];
for ( m = 0; m < l.length; m++ ){
this["a"+i+m.toString()] = l[m];
}
}
alert("a = "+ a00 + a10.toString());
alert("b = "+ a01 + a11.toString());
alert("c = "+ a02 + a12.toString());
Where a00=1; a01=2; a02=3; these are the elements of the first array.(the middle nr. tells the array so for the first array we use 0).
Then we have a10=4; a11=5; a12=6; these are the elements of the 2nd array.(the middle nr. tells the array so for the second array we use 1).
All you have to do is just replace this arrayvar anArray = [[1,2,3],[4,5,6]] with yours and let
javascript do its job.

After you clarified your question I got a general idea of what you want. I think this is what you want to achieve. The example is dynamic so that as long as the length of item in the array is equal.
var anArray = [[1,2,3],[4,5,6],[7,8,9]];
for(var j=0;j<anArray[0].length;j++){
var values = [];
for(var i=0;i<anArray.length;i++) {
values[i] = anArray[i][j];
}
//Do what you want with the values below. I chose to show them in a alert message
var text = '';
for(var i=0;i<anArray.length;i++) {
if(text.length>0){ text += ',' };
text += values[i];
}
window.alert('Values: ' + text);
}
PS: There were not 1 but a few things wrong with your code.