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

Yes, but I don’t understand why such a testing is relevant to the problem I am having were similar HTML appears in DOM but is practically ineffective.

Because, it helps you to precisely understand the HTML code that’s needed, to show the desired end result to users viewing the page.

But I already know what I want to achieve with HTML and have created that HTML indirectly as I have exampled above and yet from some reason it’s ineffective in the CMS and I only ask here what might cause it to be ineffective.

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.