for loop question

[Mike]

I'm trying to get a ordered list but I can't seem to get the numbers to show up.
The code I'm using is below.

var lead='<div id="wells" style="width:325px;height:275px;background:#'+back+';border:10px inset #'+bc+';float:'+float+';margin:'+cen+'">';
       lead+='<span id="getsome" style="color:#'+tc+';font-size:'+messize+'px; font-weight:'+weight+'">' + greet + ' '+user+'<br>'+message+'</span>';
       lead+='<ol>';
       var ttf=pb.plugin.get('greetings').settings.placement;
        for(a=0;a<ttf.length;a++) {
        var title=ttf[a].title;
        var url=ttf[a].url;
        lead+='<br>';
        lead+='<li><a id="elf"style="color:#'+linkc+';font-size:'+linksize+'px;font-weight:'+weight+' " href="'+url+'">'+title+'</a></li>';
    }
       lead+='</ol>';
       lead+='</div>';

Can somebody help me with this please?

[Techdont]

Are you getting any data in your ttf variable? Typically your output from a for loop will be generated in the order that it loops in (so you can make sure it's in the right order initially)

So if you are getting greetings in this order:
Hello
Hi
Heya

your for loop will output
Hello
Hi
Heya

if you were just printing out the list if that makes sense? for loops are sequential (at least in object oriented languages)

I'm sure there's a way to order it after but that would be the easiest rather than using the ol tags. 

[Mike]

Techdont
The loop is for the url and title variables only.
I was trying to list the titles with numbers.

[Techdont]

I'm not sure I understand your end goal, do you have some examples of what you're hoping to get as output? What should this look like if it succeeds? Mike

[Mike]

Techdont
When you click on the link below you will see three links 
generated by the for loop. I put the numbers in beside the links to illustrate
what I want to do.

my test site

[Techdont]

So what is happening right now is that all you're seeing is a list of links without numbers UNLESS you put the numbers in manually?

So the output without editing would be
something
something else
hello world

But you want this code to dynamically add those numbers? It might be easier to break it up rather than trying to have one loop do everything.

i.e. one that gets the URLs and adds those to an array, and then a for loop to iterate through the array and add those items to an ordered list.

Mike

[Mike]

Techdont
You got it!
All the above LOl
So it would be easy to make two loops?
Why won't it work the way I have it though?
Thank you for the help Techdont

[Techdont]

Okay awesome!  I just wanted to be sure I understood haha.

So for this (and I'm sure there is absolutely a better way to do this) I work in web technologies but not with JS so much anymore. As for WHY it doesn't work now I don't have a clue. I also haven't worked with PB plugins in a long time. Someone else might know better for that.

But yeah making two loops would be easy. You'd need an array most likely to store your list.. I'll write the generic pseudocode below this:

while greetings is not null {
add greeting to greetingsArray
add some kind of iterator to this too though.. or it will only add one or the same item multiple times unless your greetings is already a list/array of some type. you'll still need an incrementor though
}

for (a = 0; a<greetingsArray.length; a++) {
 var orderedList = (I'm not sure what type you'd need here, maybe google adding an array to an ordered list in JS?)
orderedList.add(greetingsArray[*a])
}

Mike  

Then however you're handling printing it out works.. just with this logic to store your data if this makes sense?

I also guess you didn't need two for loops haha. One while and for

[Mike]

P̌̓aͧś̀t̀u͒le͆o͂2̀3̃̓
Do I need to nest the for loop to achieve
What I'm looking to do?
And can you help me with the for loop?

[Chris]

I did not get to view the initial issue since the coding in the plugin was obviously changed from the one posted above, but it might be relevant to point out that the font color for list items on that linked forum is set to the same color as the background thus making it invisible. There are inline styles that lends overriding color to the links present within those <li> elements (according to code posted above) but the markers themselves are still governed by the CSS rule that make them practically invisible and that might be the cause of your original issue...

[Mike]

Chris
I change it back.
There is no css it is working off of inline style.
Now it's visible.
Would .each() work out better to achieve what I want?
If so how would I set that up?

[Chris]

Sept 9, 2021 5:23:18 GMT -8 Mike said:

Chris
I change it back.
There is no css it is working off of inline style.
Now it's visible.
Would .each() work out better to achieve what I want?
If so how would I set that up?

I was under the impression you wanted an ordered (numbered) list (<ol>) so am now confused as to why an unordered list (<ul>) is being employed.

The CSS did exists as shown in the image in my previous post but even with that CSS now removed there still exists other CSS rules that prevent the markers from showing. Inline style on the anchor would be irrelevant and the inline style on the encompassing span (via cascaded inheritance) would lose to a CSS rule that specifically targets that <li> so unless you place an inline style on the <li> itself to override any rules affecting it(except rules employing the !important qualifier) you will still be subject to CSS rules targeting that <li> and overriding what you are trying to do



Your for-loop was sufficient, it is the CSS rules either hiding or completely suppressing the :markers that is the issue. You may also want to revisit the use of duplicate IDs

[Mike]

Chris
There's something I don't understand I have the placeholder on the layout in the banner.
There is only one wells div there but, inside of that there's  another wells div according to the developers tool. how can I
delete one of those divs? It won't show up without the placeholder.
I did replace the ul with the ol and put a type="1" inside the ol.
where do I correct the css issue?

Edit: Ok I figured out the css for ol But now I need help with the extra div.

[Chris]

The code is creating a div with an id of wells and is then appending that newly created div to a placeholder that also has an id of wells...

[Mike]

Chris
Thanks man
I got it all straighten out with your help.