How to create ascending-numbers (1,2,3...) CSS IDs and corresponding hrefs with JavaScript?

Good. Please show us then the exact HTML code that is needed, and we’ll help you to learn about the JavaScript that can help to achieve that.

1 Like

If I could copy all DOM data (not via <html> tag) I would do that, but it can take an awful lot of time to copy each node manually and something I think no one should do.

I don’t understand how inventing a different set of HTML with tags with id attributes and href attributes would help me understand why the numbers aren’t clickable.

You can post code in your post by surrounding it with three backticks.

This linked post has further details about adding tags around your code.

That’s not needed to show the paragraph and ordered list sections that relate to the footnotes.

You are wanting people to click on footnote numbers to be taken down to the appropriate footnote, and to click on a footnote to be taken to the footnote number in the text. Is that my correct understanding?

HTML code (using anchor links) is used to achieve that.

1 Like

Details on how to access the DOM data for copying it, has already been given in this thread in post #11

You are wanting people to click on footnote numbers to be taken down to the appropriate footnote, and to click on a footnote to be taken to the footnote number in the text. Is that my correct understanding?

For now it is enough for me that the numbers would just lead to the footnotes (after that I will deal with giving the option to come back).

HTML code (using anchor links) is used to achieve that.

Yet, but this is not the environment I work with with the strange rendering and I think my JavaScript shows I do understand the concept well enough.

Right-click on the HTML content for the context-sensitive menu, and select Inspect (bottom option in Chrome).

I usually use F12 but it doesn’t explain to me how to copy all DOM content in one go and then paste it here.

It looks like you might learn something useful here after all. :slight_smile:

It looks like you are using spans instead of anchors as I mentioned in my previous post.

<span dir="rtl" class="footnote" href="#note_anchor_1"><sup class="footnote_inner">1</sup></span>

That should be an anchor!
I.e.

<a dir="rtl" class="footnote" href="#note_anchor_1"><sup class="footnote_inner">1</sup></a>

That’s why I’m trying to get him to post the HTML code, so that we can all see what’s happening and get things correct first, before racing off to the magical scripting wonderland.

2 Likes

Paul I think the rendered html was posted here
In a previous post.
(I’m on a mobile at the moment so hard to post coherently :))

https://pastebin.com/t7F3Kck8

The overall objective being to help him learn how to paste snippets of HTML code here in his posts.

2 Likes

Paul Wilkins, I already pasted the HTML I use, in that context in post #1 under the headline footnote template chapter, where span tags can be read.

If I replace <span></span> with <a></a> I get “jumbled” text in Wiki articles.

Image:

a


I would appreciate an opinion about this situation.

In your first post you posted this template.

<includeonly><span class="footnote"><sup class="footnote_inner">{{{1}}}</sup></span></includeonly><noinclude>

[[category:templates]]
</noinclude>

You need to change it to an anchor.

<includeonly><a href="#" class="footnote"><sup class="footnote_inner">{{{1}}}</sup></a></includeonly><noinclude>

[[category:templates]]
</noinclude>

Are you saying that when you make that change the whole thing gets jumbled? If so then it would seem to be a problem with your CMS.

I say that if I use the following (in which I add any href via JavaScript), then I get the above jumbling.

footnotes_list template

<includeonly><ol class="footnotes_list"></ol></includeonly><noinclude>

[[category:templates]]
</noinclude>

</noinclude>

footnote template

<includeonly><a dir="rtl" class="footnote"><sup class="footnote_inner">{{{1}}}</sup></a></includeonly><noinclude>

[[category:templates]]
</noinclude>

JavaScript

document.querySelectorAll(".footnote>sup").forEach((element, i) => {
    const li = document.createElement("li");
    li.append(...element.childNodes);
    element.textContent = i + 1;
    const footnotes_list = document.querySelector(".footnotes_list");
    footnotes_list.appendChild(li);
});

The code from your CMS isn’t what we want to see here. What we want to see is the the HTML code that you expect to be on the page after all of the scripting has finished doing ts work.

Any code that has <includeonly> or [[category:templates]] get completely ignored, as it’s completely irrelevant to what you are being asked to supply.

I don’t expect to have any particular HTML because I don’t develop the HTML directly but work with what the CMS supplies. If I knew a way to paste all DOM content after it was change from JavaScript, I would do it, but I can’t understand how it would have been enough practical because most of the output was in itself irrelevant.

Because our philosophical approaches are this different regarding this matter, I suggest immediate closing of this topic as I will not paste any further code due to me thinking that the last code I pasted is good enough in that possibly CMS-biased case.

Perhaps it’s good to delete this topic with me promising to not pasting here any MediaWiki related question ever again.

I’m not ready to give up on this just yet. There just seems to be a communication problem, which I partly blame myself for.

You have some initial HTML code that comes from the CMS, and you want JavaScript to do some work on that code, to achieve some final state of HTML code.

Initial HTML + JavaScript = Final HTML

You won’t find that final HTML code anywhere yet, because the JavaScript doesn’t yet exist to create that final HTML code.

What can be done though is to use the computer keyboard to type out what you think that final HTML should look like.

We’ve had from you some vague ideas about using the final HTML code to click from one place to another. We are pushing further for examples of that final HTML code for two reasons.

Reason 1: We want to find out what you know about HTML code, and what it can do.
Reason 2: That final HTML code helps to guide our work on the JavaScript code.

If you don’t understand much about HTML code we can do that for you. But if you do know how to write HTML code to achieve that final HTML state, we are offering you the opportunity to show us what you want the JavaScript to achieve in the end.

2 Likes

I know how to create such HTML but I have already detailed why I think there is no reason to create it for that specific case were parsing and/or rendering of my code is biased, somehow, from the CMS.

This is not the first time in my past were JavaScript execution was biased from the core and/or module/s of a CMS.

I should try to either find a way to tackle that bias or use a communal extension to create footnotes.

Therefore, I take back this post and will not post here any MediaWiki related issue ever again; for that I will most likely use the MediaWiki support desk, if at all.

There is indeed a CMS bias;
MediaWiki 1.34.0 doesn’t support <a> tags without proper configuration;
More information at: https://www.mediawiki.org/wiki/Topic:Vkgng85msclc7uvw

I suggest to the Sitepoint team to set a regulation banning questions on CMS template engine coding so we could all spare precious time and then, perhaps, delete this topic.
@Paul_Wilkins