AJAX innerHTML. Change links. Possibly a " or ' problem.

What I want is a hyperlink More when clicked on runs some javascript function and also changes to a hyperlink Less. Heres what I have which doesnt work. It runs the ajaxpage function fine but not moreToLess. I think its my use of " and ' in the javascript.

<script type="text/javascript">
function moreToLess(){
document.getElementById('tagLinks').innerHTML = '<a href=# OnClick="ajaxpage('/TagCloud?id=EDI_0009&count=20', 'tagcloud');lessToMore()" >Less</a>';
}
function lessToMore(){
document.getElementById('tagLinks').innerHTML = '<a href=# OnClick="ajaxpage('/TagCloud?id=EDI_0009&count=50', 'tagcloud');moreToLess()" >More</a>';
}
</script>
<span id=tagLinks ><a href=# OnClick="ajaxpage('/TagCloud?id=EDI_0009&count=50', 'tagcloud');moreToLess()" >More</a></span>

From stackoverflow

• Yes it is, just escape your single quotes inside of the double quotes that you have in your javascript.. ala \'

  <script type="text/javascript">
      function moreToLess(){
          document.getElementById('tagLinks').innerHTML = '<a href=# OnClick="ajaxpage(\'/TagCloud?id=EDI_0009&count=20\', \'tagcloud\');lessToMore()" >Less</a>';
      }
      function lessToMore(){
          document.getElementById('tagLinks').innerHTML = '<a href=# OnClick="ajaxpage(\'/TagCloud?id=EDI_0009&count=50\', \'tagcloud\');moreToLess()" >More</a>';
      }
  </script>
  <span id=tagLinks ><a href=# OnClick="ajaxpage('/TagCloud?id=EDI_0009&count=50', 'tagcloud');moreToLess()" >More</a></span>
  

  Duncan : Think you all for the quick response. success!

  Quintin Robinson : No problem, glad it worked!

• You have to escape the ' characters inside the quote:

  '<a href=# OnClick="ajaxpage(\'/TagCloud?id=EDI_0009&count=20\', \'tagcloud\');lessToMore()" >Less</a>'
  

• I'm not sure if there's anything else wrong, but I think you need to escape your single-quotes that are within other single-quotes:

  document.getElementById('tagLinks').innerHTML = '<a href=# OnClick="ajaxpage(\'/TagCloud?id=EDI_0009&count=20\', \'tagcloud\');lessToMore()" >Less</a>\';
  

• It is indeed a quote issue, you can escape the ' character with a \ character

  <script type="text/javascript">
  function moreToLess(){
  document.getElementById('tagLinks').innerHTML = '<a href=# OnClick="ajaxpage(\'/TagCloud?id=EDI_0009&count=20\', \'tagcloud\');lessToMore()" >Less</a>';
  }
  function lessToMore(){
  document.getElementById('tagLinks').innerHTML = '<a href=# OnClick="ajaxpage(\'/TagCloud?id=EDI_0009&count=50\', \'tagcloud\');moreToLess()" >More</a>';
  }
  </script>
  <span id=tagLinks ><a href=# OnClick="ajaxpage('/TagCloud?id=EDI_0009&count=50', 'tagcloud');moreToLess()
  

• This kind of confusion is why innerHTML is not always a win. You've got JavaScript embedded in HTML embedded in a JavaScript string literal embedded in more HTML, it's no wonder you're confused.

  Here's a simpler version based on toggling the link through DOM methods.

  <a id="tagLinks" href="/TagCloud?id=EDI_0009&amp;count=50">more...</a>
  
  <script type="text/javascript">
      var ismore= false;
      document.getElementById('tagLinks').onclick= function() {
          ajaxpage(this.href);
          ismore= !ismore;
          this.href= '/TagCloud?id=EDI_0009&count='+(ismore? 20 : 50);
          this.firstChild.data= ismore? 'less...' : 'more...';
          return false;
      };
  </script>
  

• thanx budy it also works for me