Javascript innerHTML calls onclick function

Question

I'm trying to change the text of the link when it's clicked and show a DIV. After the user clicks on the modified link (same one) it should hide the DIV.

It works with showing it, but for some reason when I click "Hide older news" the DIV is hidden for like half a second and then it shows again.

It happens on the line where I'm changing the link's text to the default one ("View older news...")

<script>function showoldnews()
      {
          document.getElementById('oldnews').style.display = "block";
          document.getElementById('oldnewslinkid').innerHTML = '<a href="#" id="oldnewslinkid" onclick="hideoldnews(); return false;">Hide older news</a>';

      }
      function hideoldnews()
      {
          document.getElementById('oldnewslinkid').innerHTML = '<a href="#" id="oldnewslinkid" onclick="showoldnews(); return false;">View older news...</a>'; //it calls showoldnews() function for some reason on this line
          document.getElementById('oldnews').style.display = "none";
      }
      </script>

Link

<a href="#" id="oldnewslinkid" onclick="showoldnews(); return false;">View older news...</a>

Could you create a JSfiddle or Codepen with your markup and JS? It'll be easier to diagnose things if we know what state the DOM is in before your js fires. On a related note, i'd suggest using [event listeners]developer.mozilla.org/en-US/docs/Web/API/…) instead of onClick events. — Nick Tomlin
– Nick Tomlin, Commented Jun 4, 2013 at 20:36
You don't want to assign innerHTML of the anchor elements, but outerHTML. Have a look at the DOM inspector, you're ending up with nested links… — Bergi
– Bergi, Commented Jun 4, 2013 at 20:39

Community · Accepted Answer · 2017-05-23 12:18:53Z

2

I believe this is happening because you are inserting a second link inside your first link, and the click event is firing for the parent anchor, instead of the child.

Your markup:

    <a href="#" id="oldnewslinkid" onclick="showoldnews(); return false;">
     <a href="#" id="oldnewslinkid" onclick="hideoldnews(); return false;">Hide older  news</a>
   </a>

There are several ways around this:

Wrap your controls in a containing div, and append a new anchor to its innerHTML
Include both sets of controls in the dom on load, hide your hideOldNews() control via css, and toggle them via js

Attach an event listener to one element, and use it to "toggle" your news div:

HTML

<div id="oldnews">Old News...</div>
<a href="oldnews" id="toggle">View older news...</a>

JS

var toggle = document.getElementById('toggle')

toggle.addEventListener('click', function(e){
  e.preventDefault()
  var target = document.getElementById("oldnews"); // href="oldnews"
console.log(target);

  target.style.display = (target.style.display == 'none') ? 'block' : 'none';

});

codepen

My suggestion would be to use an event handler, it will make your life a lot simpler, as you are not having to edit single line JS nested inside ofHTML elements. There are are some slight cross browser issues with addEventListener (IE8 uses a special attachEvent handler), bit there are some simple ways to get around that.

edited May 23, 2017 at 12:18

CommunityBot

11 silver badge

answered Jun 4, 2013 at 20:43

Nick Tomlin

29.4k12 gold badges65 silver badges95 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Bergi Over a year ago

Good guess. What do you suggest for solving this?

Krešimir Čulina Over a year ago

I just made a copy of the link and placed it into the hidden DIV, gave it a different ID and set the value to "Hide older news". Then when the DIV is shown, the original's link value is set to nothing. Once the Hide older news link is clicked, I just hide the DIV and set the first link's value back to default. Thanks!

Nick Tomlin Over a year ago

@KrešimirČulina glad to hear it worked out for you. I've added an updated explanation with eventListener based "toggle" just for kicks.

Collectives™ on Stack Overflow

Javascript innerHTML calls onclick function

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related