JavaScript: Receiving an error that function is undefined when working with data binding

Question

JavaScript: Receiving an error that function is undefined when working with data binding

Why is my code showing that it's not defined while I'm attempting a simple code with data binding?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<object name="login" id="login" classid="CLSID:333C7BC4-460F-11D0-BC04-0080C7055A83">
    <param name="DataURL" value="member.txt"/>
    <param name="UseHeader" value="true"/>
    <param name="TextQualifier" value=""/>
    <param name="FieldDelim" value="|"/>
</object>

    <script>
        var rs = login.resultset;
        function validation()
        {
            rs.moveFirst();
            while(rs.moveNext())
            {           
                if(document.getElementById("txtid")== rs(0) && document.getElementById("txtpass")==rs(1))
                {
                    alert("Login Succeed");
                    return; 
                }
            }
            alert("Email or Password Wrong");
            return;
        }
    </script>

</head>


<body>
<form>
Username: <input type="text" id="txtid" /> <br/>
Password: <input type="text" id="txtpass" /><br/>
<input type="submit" value="game start" id="btnstart" onclick="validation()"/>
</form>
</body>
</html>

The error message states: login is not defined

I am certain that it's defined! I have tried searching for solutions, but found no clue as to what might be wrong in my code :/ Can someone please help?

EDIT: Updated version of my code looks like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>


<body>


<form>
Username: <input type="text" id="txtid" /> <br/>
Password: <input type="text" id="txtpass" /><br/>
<input type="submit" value="game start" id="btnstart" onclick="validation()"/>
</form>



<object name="login" id="login" classid="CLSID:333C7BC4-460F-11D0-BC04-0080C7055A83">
        <param name="DataURL" value="member.txt"/>
        <param name="UseHeader" value="true"/>
        <param name="TextQualifier" value=""/>
        <param name="FieldDelim" value="|"/>
</object>

<script>
    var login = document.getElementById('login');
    var rs = login.resultset;
    function validation()
    {
        rs.moveFirst();
        while(rs.moveNext())
        {           
            if(document.getElementById("txtid")== rs(0) && document.getElementById("txtpass")==rs(1))
            {
                alert("Login Succeed");
                return; 
            }
        }
        alert("Email or Password Wrong");
        return;
    }
</script>

</body>
</html>

After making these updates, I am now encountering the rs is undefined error when clicking the button. Can anyone tell me what could be going wrong?

javascript

Answer 1

Answer №1

Looking at your code:

> <object name="login" id="login" ...>
>   ...
> </object>
>  <script>
>          var rs = login.resultset;

You are relying on the element with the id login to be a global variable, which is not always reliable across different browsers. It is best practice to reference elements using standard DOM methods like getElementById:

  var el = document.getElementById('login');

Furthermore, there is no standard resultset attribute for object elements and you have not defined one. Therefore, it is unreasonable to expect the DOM element returned by the above expression to have a resultset property. Before using the rs variable, it is advisable to check if it has a valid value for your intended use, for example:

    if (rs && rs.moveFirst) {
      rs.moveFirst();

And so forth.

Answer 2

Looking at your code:

> <object name="login" id="login" ...>
>   ...
> </object>
>  <script>
>          var rs = login.resultset;

You are relying on the element with the id login to be a global variable, which is not always reliable across different browsers. It is best practice to reference elements using standard DOM methods like getElementById:

  var el = document.getElementById('login');

Furthermore, there is no standard resultset attribute for object elements and you have not defined one. Therefore, it is unreasonable to expect the DOM element returned by the above expression to have a resultset property. Before using the rs variable, it is advisable to check if it has a valid value for your intended use, for example:

    if (rs && rs.moveFirst) {
      rs.moveFirst();

And so forth.

Answer 3

Answer №2

It's important to remember that content should always be placed within the <body> tag and not in the <head>. The only elements suitable for placement in the <head> are scripts, styles, and miscellaneous meta-data related to your page. Anything visible on the page itself should be contained within the <body>.
While it's true that elements with an id attribute automatically create a global variable with the same name referencing the element, it is best practice to access elements using document.getElementById() for security purposes.
To ensure safe script execution, always include your <script> tags after your main content but before closing the <body> tag. This guarantees that all elements referenced by your scripts already exist on the page.

<!DOCTYPE html>
<html>
    <head>
       <!-- Title, meta information, styles, and non-DOM scripts go here -->
    </head>
    <body>

        <!-- Main content of the page appears here -->

        <object id="login">
           <!-- ... --->
        </object>

        <script>
            //Scripts that manipulate the DOM should be placed here after content

            var login = document.getElementById('login');

            //The "login" variable now refers to the object element

        </script>

    </body>
</html>

Answer 4

It's important to remember that content should always be placed within the <body> tag and not in the <head>. The only elements suitable for placement in the <head> are scripts, styles, and miscellaneous meta-data related to your page. Anything visible on the page itself should be contained within the <body>.
While it's true that elements with an id attribute automatically create a global variable with the same name referencing the element, it is best practice to access elements using document.getElementById() for security purposes.
To ensure safe script execution, always include your <script> tags after your main content but before closing the <body> tag. This guarantees that all elements referenced by your scripts already exist on the page.

<!DOCTYPE html>
<html>
    <head>
       <!-- Title, meta information, styles, and non-DOM scripts go here -->
    </head>
    <body>

        <!-- Main content of the page appears here -->

        <object id="login">
           <!-- ... --->
        </object>

        <script>
            //Scripts that manipulate the DOM should be placed here after content

            var login = document.getElementById('login');

            //The "login" variable now refers to the object element

        </script>

    </body>
</html>

JavaScript: Receiving an error that function is undefined when working with data binding

Answer №1

Answer №2

Similar questions

Can we utilize object properties in this manner?

Develop a descriptive box for a radio button form using jQuery

Turning off the transpiler in Vue Webpack to simplify the debugging process

Disable functionality not functioning properly on button attribute

Troubleshooting a LESS compiling issue with my Jade layout in ExpressJS

Next.js has a problem where it displays incorrect data when users navigate rapidly between pages

Ajax/PHP - unrecognized value in autofill

The internet explorer browser does not support the keypress event

Which medium is the optimal choice for file manipulation in Node.js and JavaScript?

Preserving the "height" declaration in jQuery post-Ajax request (adjusting height after dropdown selection loads product information, resetting heights of other page elements)

What is the best way to showcase information retrieved using the getDocs function from Firebase Firestore?

Save the output of a function in node.js

When there are numerous websocket connections in Google Chrome, Socket.io can encounter issues and break down

Utilizing Bootstrap Modal to Display PHP Data Dynamically

Ways to retrieve a list of identifiers from arrays at both initial and subsequent levels

Invoking an *.aspx method from an external HTML file

Displaying numerous Google maps on a single webpage featuring distinct collections of location markers

Tips for adjusting the autocomplete maxitem dynamically

How do I prevent a specific word from being removed in a contenteditable div using JavaScript?

Display the div only when the radio button has been selected