Change Title of link in Navigation Block

manpreet Best Answer 2 years ago

I've tried a few different ways to change the title of a link within the navigation block through Javascript, but to no avail.

Is there something that I am missing?

Here's the original code via the site:

<div id="left-side" class="ic-app-course-menu list-view" style="display: block">
           id="section-tabs-header-subtitle" class="ellipsis">Sandbox
         role="navigation" aria-label="Courses Navigation Menu"> id="section-tabs"> class="section"> href="/courses/16289" title="Home" class="home" tabindex="0">Home class="section"> href="/courses/16289/external_tools/375" title="Course Syllabus" class="context_external_tool_375" tabindex="0">Course Syllabus class="section"> href="/courses/16289/modules" title="Modules" class="modules active" tabindex="0">Modules class="section"> href="/courses/16289/grades" title="Grades" class="grades" tabindex="0">Grades class="section"> href="/courses/16289/users" title="People" class="people" tabindex="0">People
    div>

Here is the Javascript I'm using to attempt to change the title "Course Syllabus" to just "Syllabus"

if (ENV.current_user_roles.indexOf("admin") < 1){  
  $( document ).ready(function() {  
  document.querySelector('#section-tabs a.context_external_tool_375').innerHTML = "Syllabus";  
});  
}  

manpreet 2 years ago

You have the exact right idea, and your code should work as expected. However, your conditional to check whether the user is an admin should really come inside of your $(document).ready(). Having said that, it will still trigger the way you have it now.

As such, there can only be two possible things causing your script not to work for you:

• You have forgotten to include jQuery
• Your condition is not evaluating to be truthy

Including jQuery and substituting the condition for one that is always true shows the name change working, as can be seen in the following example:

$(document).ready(href="https://forum.tuteehub.com/tag/function">function() {
  if (1) {
    document.querySelector('#section-tabs a.context_external_tool_375').innerHTML = "Syllabus";
  }
});

 src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">

 id="left-side" class="ic-app-course-menu list-view" style="display: block">
   id="section-tabs-header-subtitle" class="ellipsis">Sandbox
   role="navigation" aria-label="Courses Navigation Menu">
     id="section-tabs">
       class="section"> href="/courses/16289" title="Home" class="home" tabindex="0">Home
       class="section"> href="/courses/16289/external_tools/375" title="Course Syllabus" class="context_external_tool_375" tabindex="0">Course Syllabus
       class="section"> href="/courses/16289/modules" title="Modules" class="modules active" tabindex="0">Modules
       class="section"> href="/courses/16289/grades" title="Grades" class="grades" tabindex="0">Grades
       class="section"> href="/courses/16289/users" title="People" class="people" tabindex="0">People