Question 189288 in Html Question posted in
Some basic documentation can be found here.

Html – How can I create a button that works to show a link but has a onfocusout event working on it?

Consider the set of codes I have:

<!DOCTYPE html>
<html>
    <head>
        <script src="script.js"></script>
    </head>
    <body style="color: black;">
        <button id="button" onclick="start()" onfocusout="start()">Look Down</button>
        <table>
            <tr>
                <td>
                    <a style="display: none;"; id="list" href="https://google.com/">Player-1</a>
                </td>
            </tr>
        </table>
    </body>
</html>

where my script file is:

function start(){
    var a=document.getElementById("list").style;
    if(a.display=="none") a.display="block";
    else a.display="none";
}

function start() {
  var a = document.getElementById("list").style;
  if (a.display == "none") a.display = "block";
  else a.display = "none";
}
<!DOCTYPE html>
<html>

<head>
  <script src="script.js"></script>
</head>

<body style="color: black;">
  <button id="button" onclick="start()" onfocusout="start()">Look Down</button>
  <table>
    <tr>
      <td>
        <a style="display: none;" ; id="list" href="https://google.com/">Player-1</a>
      </td>
    </tr>
  </table>
</body>

</html>

Here, the button Look Down when pressed shows the link Player-1. But when I click the option Player-1, I lose the option as I have come out of focus of the button. As a result, I can’t go to the link I intend to go to. So, how can I fix this? I mean I want to click the link after pressing the button but don’t want to come out of the focus.

Tags:

2

Answers


  1. 0

    Behavior

    • When the user clicks the <button>, start() is called and the <a> is revealed, good 👍.
    • When the user clicks the <a>, the <button> loses it’s focus to <a> which triggers a "focusout" event on <button> thereby calling start() again which removes the <a>, bad 👎.

    Solutions

    1. Simply remove the onfocusout inline event handler (see Figure I and Example A).

    2. If you want <a> to disappear if anything but <button> and <a> is clicked, then you just want <a> to disappear and not toggle between there and gone which is what start() does. To get aforementioned behavior, delegate the "click" event by registering a common ancestor element and making the "click" event handler determine specific behavior for specific elements (see Example B and event delegation).

      Figure I

      <!-- WRONG -->
<button id="button" onclick="start()" onfocusout="start()"> 
  Look Down 
</button>

<!-- CORRECT -->
<button id="button" onclick="start()">
  Look Down 
</button>

    Example A

    Layout Corrections

    • <html> will have only a single <head> and a single <body> as direct children.
    • <head> proceeds <body>.
    • <meta>, <title>, <link>, and <style> are in the <head> (preferably in that order).
    • <script> can be in the <head> as well, but 99% of the time should reside within <body> at the very bottom (in other words: as the last children of the <body> right before the closing tag: </body>)
    <!DOCTYPE html>
<html>

<head>
</head>

<body style="color: black;">
  <button id="button" onclick="start()"> Look Down </button>
  <table>
    <tr>
      <td>
        <a href="https://example.com" id="list" style="display: none;">
          Player-1
        </a>
      </td>
    </tr>
  </table>
  <script src="script.js"></script>
  <script>
    function start() {
      const a = document.getElementById("list").style;
      a.display = a.display === "none" ? "block" : "none";
    }
  </script>
</body>

</html>

    Example B

    Event Handling

    <!DOCTYPE html>
<html>

<head>
</head>

<body>
  <button id="button"> Look Down </button>
  <table>
    <tr>
      <td>
        <a href="https://example.com" id="list" style="display: none;">
          Player-1
        </a>
      </td>
    </tr>
  </table>
  <script src="script.js"></script>
  <script>
    // Reference <a>
    const A = document.getElementById("list");

    // Reference <button>
    const B = document.getElementById("button");

    // Register the click event to the Document Object
    document.onclick = start;

    function start(event) {

      // Reference the element clicked by the user.
      const clicked = event.target;

      // Access <a> style property
      const a = A.style;

      // If the user clicked <button>...
      if (clicked === B) {

        // ...toggle <a> between "there" and "gone"...
        a.display = a.display === "none" ? "block" : "none";

        // ...or if the user clicked <a>...
      } else if (clicked === A) {

        // ...exit function...
        return;

        // ...otherwise...
      } else {

        // ...hide <a>
        a.display = "none";
      }
    }
  </script>
</body>

</html>
    Login or Signup to reply.
  2. 0

    NO JavaScript solution (only CSS)

    If you solve this with JS funtions it will run on every click on the rest of the page. There’s no need of using so much processor power from the visitors.

    This would be the approach without the use of JS (the link was inserted to a span so it could have a transition effect and delay that allows people to click it before it dissapears):

    #button:focus + table tr td #list {
  height: 20px !important;
}

#list{
  background:red;
  overflow:hidden;
  display:block;
  height:0px;
  transition: height 1s;
  transition-delay: 0.1s;
}
    <!DOCTYPE html>
<html>
    <body style="color: black;">
        <button id="button">Look Down</button>
        <table>
            <tr>
                <td>
                    <span id="list"> <a href="https://example.com/">Player-1</a></span>
                </td>
            </tr>
        </table>
    </body>
</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search