Change Title of link in Navigation Block

Question

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">
          <span id="section-tabs-header-subtitle" class="ellipsis">Sandbox</span>
        <nav role="navigation" aria-label="Courses Navigation Menu"><ul id="section-tabs"><li class="section"><a href="/courses/16289" title="Home" class="home" tabindex="0">Home</a></li><li class="section"><a href="/courses/16289/external_tools/375" title="Course Syllabus" class="context_external_tool_375" tabindex="0">Course Syllabus</a></li><li class="section"><a href="/courses/16289/modules" title="Modules" class="modules active" tabindex="0">Modules</a></li><li class="section"><a href="/courses/16289/grades" title="Grades" class="grades" tabindex="0">Grades</a></li><li class="section"><a href="/courses/16289/users" title="People" class="people" tabindex="0">People</a></li></ul></nav>
    </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"; }); } 

Would appreciate some help :-)

Answer 1

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(function() { if (1) { document.querySelector('#section-tabs a.context_external_tool_375').innerHTML = "Syllabus"; } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="left-side" class="ic-app-course-menu list-view" style="display: block"> <span id="section-tabs-header-subtitle" class="ellipsis">Sandbox</span> <nav role="navigation" aria-label="Courses Navigation Menu"> <ul id="section-tabs"> <li class="section"><a href="/courses/16289" title="Home" class="home" tabindex="0">Home</a></li> <li class="section"><a href="/courses/16289/external_tools/375" title="Course Syllabus" class="context_external_tool_375" tabindex="0">Course Syllabus</a></li> <li class="section"><a href="/courses/16289/modules" title="Modules" class="modules active" tabindex="0">Modules</a></li> <li class="section"><a href="/courses/16289/grades" title="Grades" class="grades" tabindex="0">Grades</a></li> <li class="section"><a href="/courses/16289/users" title="People" class="people" tabindex="0">People</a></li> </ul> </nav> </div> 

Hope this helps! :)