Navigating Next And Prev Posts Under Same Labels in Blogger

Question

For starters I want you to read
Next and Prev Buttons for Blogger Theme

Understood the concept of what I want? Then let's continue with my question :

Now I have the code that was already embedded to the theme for next and prev buttons and they were :

<nav class='op-pagi'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><i class='fa fa-angle-left'/> Prev</a>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'> Next <i class='fa fa-angle-right'/></a>
</nav>

And Using the questions I had asked before like :
How to store the URL's and Titles of a list of posts under same label into a String array in Blogger AND
How to match and point to a particular data in array in Blogger

I made a code myself :

<script>
//<![CDATA[

<b:if cond='data:blog.searchLabel'>

  var URLArray = <b:eval expr='data:posts map (post =&gt; post.url)'/>;
  var TitleArray = <b:eval expr='data:posts map (post =&gt; post.title)'/>;  

var cURL = "<data:post.url/>";
var gTitle = "<data:post.title>";
function IndexFinder(element,index) {
   return element == cURL
}
function IndexFinderT(element,index){
   return element == gTitle;
}
var sU = URLArray.findIndex(IndexFinder);
var sT = TitleArray.findIndex(IndexFinderT);

function prevURL(){
    var prevU=URLArray[sU-1];
return prevU;
}
function prevTitle(){
    var prevT=TitleArray[sT-1];
return prevT;
}
function nextURL(){
    var nextU=URLArray[sU+1];
return nextU;
}
function nextTitle(){
    var nextT=TitleArray[sT+1];
return nextT;
}

</b:if>
//]]>
</script>

Now I tried Using the code which I showed first for next and prev button by changing expr:href='data:olderPageUrl' to expr:href='prevURL()'
and the same for Title also
expr:title='data:olderPageTitle' to expr:title='prevTitle()'
but didn't work.

Can you please tell me where I went wrong and how to make it work?

Note: I'm using CDATA Tag for no particular reason, just put it there thinking it might help in someway. I didn't understand its exact usage even when I searched on google. If it's causing any problem please mention it.

Answer 1

As both prevURL() and prevTitle() are JavaScript functions and not Blogger data tags, you don't need to use the expr in front of the attribute.

You will instead need to modify the functions as follows -

function prevURL(){
    var prevU=URLArray[sU-1];
    document.querySelector('.blog-pager-older-link').href = prevU;
}

function prevTitle(){
    var prevT=TitleArray[sT-1];
    document.querySelector('.blog-pager-older-link').title = prevT;
}

and similarly for the next page links. No need to change the HTML of the page.

Also as Bassam mentioned in the other answer. Don't wrap the JavaScript in CDATA directive otherwise, the XML parser that Blogger uses will completely ignore the script block and no data tag will get evaluated

Answer 2

Using CDATA prevents blogger XML parser from interpreting data tags like <b:if cond='data:blog.searchLabel'>

Remove //<![CDATA[ and //]]> from the code or use them after blogger tags :

<script>

<b:if cond='data:blog.searchLabel'>

var URLArray = <b:eval expr='data:posts map (post =&gt; post.url)'/>;
var TitleArray = <b:eval expr='data:posts map (post =&gt; post.title)'/>;  
var cURL = "<data:post.url/>";
var gTitle = "<data:post.title>";

//<![CDATA[

function IndexFinder(element,index) {
   return element == cURL
}
function IndexFinderT(element,index){
   return element == gTitle;
}
var sU = URLArray.findIndex(IndexFinder);
var sT = TitleArray.findIndex(IndexFinderT);

function prevURL(){
    var prevU=URLArray[sU-1];
return prevU;
}
function prevTitle(){
    var prevT=TitleArray[sT-1];
return prevT;
}
function nextURL(){
    var nextU=URLArray[sU+1];
return nextU;
}
function nextTitle(){
    var nextT=TitleArray[sT+1];
return nextT;
}

//]]>

</b:if>

</script>