Resolved: .focus() is not working in Chrome and Edge

Question:

For our website, we use Internet Browser before and it was totally fine with no errors but starting from yesterday we migrated to modern browsers and when we click, we get error message Uncaught TypeError: document.hwinv.datatyp.options.focus is not a function in the developer tool. Error is causing in document.hwin.datatyp.options.focus(); line. Before using in Edge, it was totally fine and right now, it is causing that error. May I know how can I fix it? Added JS Fiddle link to check. Also, I saw adding setTimeout but I don’t know how that works.
JsFiddle link, U can see the the bottom of the web, there is 2 button and If i click those buttons, causing the error for .focus()

function gonext()
{
 var myIndex = document.hwinv.datatyp.options.selectedIndex;
 var chkvalue=document.hwinv.datatyp.options[myIndex].value;
 if(!(chkvalue))
 {
 document.hwinv.datatyp.options.focus();
 alert("Please select Hardware Type!");
 }
 else
 {
 document.hwinv.step.value='11';
 document.hwinv.submit();
 }
}

<body style="margin=0px;" alink="#0000ff" vlink="#0000ff" bgcolor="#ffffff" window.focus="document.hwinv.datatyp.options.focus();">
<form name="hwinv" method="post" action="inventory.php" target="bottomview">

Answer:

Welcome to StackOverflow!
Oh boy. If this is the sort of HTML that your site has, then migrating it to use more “modern” HTML, CSS and JS is going to be quite a long process. But it has to be done, now that IE is officially dead.

Alternative: Use “Internet Explorer Mode” in Edge

You may not be aware that there is a way to switch Edge into running a site almost identically to how IE would have done it. Which might be enough to get your site working again. I found some decent instructions for how to do that.
However, I wouldn’t rely on that as a long-term solution. At some point, you are going to need to migrate this site to use HTML5, CSS3, and modern JS. But it might help you out in a pinch.

Fixing your code

To start with, the specific answer to your question about the exception is that the focus() method doesn’t exist on the .options property of select inputs. Rather, it exists on the select input object itself.
But we also want to deal with the other antiquated markup in the snippet you posted.

window.focus="..." is not a thing. There are on____ attributes on elements – such as onfocus in your case, but it is considered bad practice to use it, typically. Instead, register an event handler in the JS code like I do below.
style="margin=0px" is wrong. Within inline style attributes, the syntax is property: value, not property=value.
alink, vlink and bgcolor attributes should be replaced with the appropriate CSS, as I have done below. alink corresponds to body a, vlink corresponds to body a:visited and bgcolor corresponds to body { background-color: white; }.

function gonext() {
  var myIndex = document.hwinv.datatyp.options.selectedIndex;
  var chkvalue = document.hwinv.datatyp.options[myIndex].value;
  if (!(chkvalue)) {
    document.hwinv.datatyp.focus();
    alert("Please select Hardware Type!");
  } else {
    document.hwinv.step.value = '11';
    document.hwinv.submit();
  }
}

document.addEventListener('DOMContentLoaded', function () {
  document.hwinv.datatyp.focus();
});

body {
  margin: 0;
  background-color: white;
}

body a {
  color: blue;
}

body a:visited {
  color: blue;
}

<body>
  <form name="hwinv" method="post" action="inventory.php" target="bottomview">
    <select name="datatyp">
      <option>Hammer</option>
      <option>Spanner</option>
      <option>Other</option>
    </select>
  </form>

</body>

If you have better answer, please add a comment about this, thank you!

Resolved: .focus() is not working in Chrome and Edge

Resolved: How to give rank on datetime column group by another column with userid in it

Resolved: Passing 2 functions in onChange in react

Resolved: Why doesn’t stringstream consume output during hex formatting?

Leave A Reply