Scroll down button overriding .focus function

Question

I have a span button that links to a section, when this is clicked it scrolls down to said section. I also have an "onclick" function on the span that is attempting to put the focus on a div in the new section.

For some reason I think the a href link is overriding the function to focus.

I have put a console.log in the function and this logs without fail.

this is the button:

<a href="#navpage"><span id="button" onclick="focusText()"></span></a>

This is the div that I'm attempting to focus:

<div role="textbox" contenteditable="true" id="navtype" class="consoleText" tabindex="0" style="border:none" spellcheck="false"></div>

This is the function I'm calling to focus the div:

  function focusText() {
  document.getElementById("navtype").focus();
  console.log("hello");
  };

I also tried doing this to no avail:

document.getElementById("button").onclick = function () {
  document.getElementById("navtype").focus();
  console.log("hello");
};

I have edited the function and it works when I click on something else e.g. a different div which you can see below:

document.getElementById("navpage").onclick = function () {
  document.getElementById("navtype").focus();
};

I'm aware that normally you are unable to focus on a div, however I've got around this by adding a tabindex to the div, which means it is now focusable.

So, if you click on the span, the inline `onclick` will happen. Which the logic for `focusText` changes the focus. Once that is done, that same click event will start bubbling up the DOM Tree. It will then be processed by the `` tag. The a tag has an onclick inline event handler logically attached to it, which also changes the focus. — Taplar, Dec 09 '20 at 22:36
Both the `focusText` and the link inline onclick handler both change the focus to the same element. So I'm not sure why you have duplicate event handlers like that. — Taplar, Dec 09 '20 at 22:37
sorry i should have explained, these were present at different times, not at the same time. — Cal, Dec 10 '20 at 01:06

Scroll down button overriding .focus function

0 Answers0