JavaScript still displaying empty values despite correct syntax being used

Question

JavaScript still displaying empty values despite correct syntax being used

Here is the HTML form I have created:

<form accept-charset="utf-8" onsubmit="return validateForm()">
    <input placeholder="Enter Username" type="text" id="user">
    <input placeholder="Enter Your Password" type="password" id="pass">
    <button>Login</button>
</form>

This is the JavaScript code included in the head section:

<script type="text/javascript">
    function validateForm() {
        var username = document.getElementById("user").textContent;
        alert(username);
        return false;
    }
</script>

I am facing an issue with the code. Even though my syntax is correct, when I enter a value in the username field and click the login button, the JavaScript code displays a blank value. This code was working fine yesterday, but today it's not showing the input values. Can someone help me understand why this is happening?

javascript

Answer 1

Answer №1

function verifyUser()
        {
            var username = document.getElementById("user").value;
            alert(username);
            return false;
        }

<form accept-charset="utf-8" onsubmit="return verifyUser()">
    <input placeholder="Enter Username" type="text" id="user">
    <input placeholder="Enter Your Password" type="password" id="pass"/>
    <button>Login</button>
</form>

Answer 2

function verifyUser()
        {
            var username = document.getElementById("user").value;
            alert(username);
            return false;
        }

<form accept-charset="utf-8" onsubmit="return verifyUser()">
    <input placeholder="Enter Username" type="text" id="user">
    <input placeholder="Enter Your Password" type="password" id="pass"/>
    <button>Login</button>
</form>

Answer 3

Answer №2

It's recommended to utilize the value property rather than InnerHTML.

Answer 4

It's recommended to utilize the value property rather than InnerHTML.

Answer 5

Answer №3

Give this a shot

   let userInput = document.getElementById("user").value;

innerHTML is solely for writing content on the screen.

Answer 6

Give this a shot

   let userInput = document.getElementById("user").value;

innerHTML is solely for writing content on the screen.

Answer 7

Answer №4

To retrieve the values entered inside an input field, use document.getElementById("user").value;.

If you want to access the text content of an element, you can use document.getElementById("user").innerHTML. For example, this will display "SAMPLE TEXT".

Remember to use document.getElementById("sampletxt").innerHTML to actually display the text "SAMPLE TEXT".

I hope this information is helpful to you!

Answer 8

To retrieve the values entered inside an input field, use document.getElementById("user").value;.

If you want to access the text content of an element, you can use document.getElementById("user").innerHTML. For example, this will display "SAMPLE TEXT".

Remember to use document.getElementById("sampletxt").innerHTML to actually display the text "SAMPLE TEXT".

I hope this information is helpful to you!

Answer 9

Answer №5

<input> elements are unique in that they are self-closing, meaning they do not have an innerHTML property. Instead, you can retrieve the value of the input field using the value property.

It all makes sense when you stop and think about it, but just wait until you dive into the world of <textarea> elements...

Answer 10

<input> elements are unique in that they are self-closing, meaning they do not have an innerHTML property. Instead, you can retrieve the value of the input field using the value property.

It all makes sense when you stop and think about it, but just wait until you dive into the world of <textarea> elements...

JavaScript still displaying empty values despite correct syntax being used

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Delaying Jquery on scroll Event

What could be causing my form not to Submit when attempting submission without utilizing the submit button?

Striving to design an event planner with the datepicker feature in javascript

Version 2.7.2 of Chart.js now allows users to retrieve the value of a data point by

Ensuring the accuracy of user input in JavaScript, even after fixing a mistake and submitting again, will not cause the code to exit the else clause

AngularJS tree grid component with customizable cell templates

What are some ways to implement the 'charCodeAt' method within a for loop effectively?

The value of a select box cannot be retrieved until it has been clicked on

Determine the presence of an element using its selector and retrieve a true or false value using jQuery or JavaScript

Place the Material-UI Drawer component beneath the Appbar in the layout

Using the getAttribute method in Edge with JavaScript

Utilizing Ajax to serialize or transfer JSON objects

The image file that was uploaded to our S3 storage has been detected

Ways to activate the built-in HTML5 form validation without actually submitting the form

cancel button in confirmation dialog is malfunctioning

Save the user input to a dedicated text file

jQuery is malfunctioning following an AJAX request

The "Read more" feature is not functional on mobile devices

The :before element is not displaying when using jQuery's slideToggle() method

What is the solution using high-order functions?