How to change href value using javascript?

I have a wordpress site and theme that is providing me an ability to change elements in menu widget on all pages it appears only.

So, what I want to do is to change links and names of menu elements locally on one page. I have an id’s for menu li elements, ‘menu-item-7062’ for example and a href tag inside it with already defined link and text values.

I have already tried and injected this code snippets in after all post content:

<script type='text/javascript'> document.getElementById('menu-item-7062').href = 'new link'; </script>

I have also created a function that is triggers after onclick event:

<script type="text/javascript">
  document.getElementById("menu-item-7062").onclick = function() {
    document.getElementById("menu-item-7062").href="my new link"; 
  };
</script>

Unfortunately, they didn’t affect my old link. Returning to my question, what are other solutions I could try in order to change both a href link and text value? What possible mistakes I have made?

UPDATED:

Here is my anchor tag

<a href="https://test.etm.io/ru/services/automation/">Автоматизация технологических процессов</a>

A tag located under the <li id="menu-item-7062">, there is my mistake. So, can I affect a href without id?

116 thoughts on “How to change href value using javascript?”

Leave a Comment