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

Regular expressions: understanding greedy versus lazy quantifiers

Enhancing Communication Between JavaScript and PHP

Ways to replace CSS classes created using makeStyles

getting information from a JSON array using AngularJS

What is the best way to notify the JSON code below using jQuery?

Node.js is experiencing difficulties loading the localhost webpage without displaying any error messages

Error: The variable "$this" has not been defined in the AJAX function

Struggle with implementing enums correctly in ngSwitch

Discover the most concise string within the array

Is there a way to update the data on a view in Angular 9 without the need to manually refresh the page?

Is it considered fashionable to utilize HTML5 data attributes in conjunction with JavaScript?

Find the most recent date in a file and display the line associated with it

Add items to a fresh record using Mongoose and Express

What is the best way to fix the Syntax error that reads "Unexpected token (1:13)"?

JQuery requests functioning flawlessly on one system while encountering issues on other systems

What is the best way to integrate a Next.js Image component with a set width and an adaptable height in order to maintain the image's proportions?

Implementing CSS styles with jQuery

Passing form data to PHP using AJAX in CodeIgniter Framework

Retrieve webpage content using an ajax request in JavaScript

Trouble with Ajax requests firing on document load in Firefox