Javascript: Uncaught TypeError - Unable to assign value to non-existent property

I am having an issue with assigning a value to a textbox, and I keep getting this error. Here is my code:

This is the textbox in question:

<input id="Text1" type="text" runat="server"/>

Here is the dropdown list used in the function:

<select id="title" name="D1" onchange="Select()" >
                <option selected="selected"></option>
                <option value="1">Pilot</option>
                <option value="5">Engineer</option>                                    
             </select>

Below is the JavaScript function being executed:

  <script type="text/javascript">


    function Select() {

        var ddl = document.getElementById("title");
        var selected = ddl.options[ddl.selectedIndex].value;
        document.getElementById("Text1").value = selected;
        alert(document.getElementById("Text1").value);
        if (selected == "5") {
            document.getElementById('divTechnician').style.visibility = "visible";
        } else {
            document.getElementById('divTechnician').style.visibility = "hidden";

        }            
    }
</script>

The error seems to arise when trying to assign a value to the text box.

document.getElementById("Text1").value = selected;

Answer №1

make sure clientidmode is set to static for this specific element

<input id="NameInput" type="text" runat="server" clientIdMode="static"/>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Steps to bring life to your JavaScript counter animation

I need to slow down the counting of values in JavaScript from 0 to 100, so that it takes 3 seconds instead of happening instantly. Can anyone help me with this? <span><span id="counter"> </span> of 100 files</span> <s ...

What is the necessity of utilizing getStaticPaths() alongside getStaticProps()?

When working with dynamic routes, such as [id].js, the static pages generated using npm run build will result in an [id].html page. Any route containing /something will display "Hello World". However, when we dynamically generate content on the page by ut ...

What is the best way to eliminate a CSS style from a div?

I have implemented jQuery Autosize to automatically adjust the height of textarea elements. It works perfectly when I focus on the textarea element. However, when I blur out of the textarea, I want to reset the height to its default value. I am unsure of ...

Obtaining Function Call Results by Querying Node.js MySQL Connection

One issue I'm encountering while trying to retrieve data from a database is the synchronization of calls. In my attempt to resolve this problem, I experimented with a demo example and used callback functions. Being relatively new to node.js, I am unce ...

Tips for preventing a React component from scrolling beyond the top of the page

I am looking to achieve a specific behavior with one of my react components when a user scrolls down a page. I want the component to reach the top of the page and stay there without moving any further up. Here is an Imgur link to the 'intranet' ...

Is it possible for Netbeans 7.3 to debug a PHP script when triggered by a JSON request?

In my Netbeans 7.3.1 setup, I usually have no issues debugging PHP files with Xdebug when my site project is structured to generate the site directly from PHP code. However, I'm currently working on a site that consists mostly of HTML files and only h ...

How do I automatically redirect a user after they login using react redux?

Currently, I am utilizing react redux in conjunction with Next.js. The goal is to redirect the user to a specific page if they meet certain requirements. I have implemented this logic within my useEffect function and it works as expected. However, upon r ...

Validate the button's status in Ionic

When I click on a button, I am trying to retrieve the Toggle state immediately. However, I consistently receive a value of true, even when my toggle is actually set to false. I believe the issue lies in how I am manipulating the DOM. Here is an example ...

Can Java provide functionality similar to JS callbacks?

Can a similar functionality be achieved in Java? function sum(num1, num2, onComplete) { var result = num1 + num2; onComplete(result); } (function(){ sum(3, 5, function(res){alert(res)}); })() Is it possible to implement this in Java without ...

Stop form from submitting on bootstrap input, still check for valid input

Encountering a dilemma here: Employing bootstrap form for user input and utilizing jQuery's preventDefault() to halt the form submission process (relying on AJAX instead). Yet, this approach hinders the input validation functionality provided by boots ...

Display a toolbar underneath text that has been selected using jQuery

I am attempting to display a toolbar underneath selected text once the user has made a selection. After exploring various Stack Overflow responses, I have devised the following code. My goal is for the toolbar to activate when a user selects text not only ...

Avoiding multiple ajax requests due to multiple clicks

I have a blog on WordPress that has a jQuery code allowing users to click a bookmark link to save the post as a bookmark. Each post displays a total bookmark counter in this format: "Bookmarked (5)". The issue is that when a user clicks multiple times on t ...

implementing toggle functionality for an array of items in ReactJS

I have an array and I am trying to create a show/hide feature for each item based on toggling. When I click on one item, it should expand while simultaneously hiding the previously expanded item. Here is the code snippet I have been working on: class App e ...

Once I incorporated Bootstrap into my project, I noticed a noticeable white space between the div elements

Welcome to My Code Playground I was sailing smoothly with my project until I decided to include Bootstrap. Seems like there's something missing in the details, so here I am reaching out. If you spot the issue, please feel free to correct my code. &l ...

Dealing with errors and fetching them within a react application using the useState hook

As a newcomer to React, I am currently working with a backend API in my project. One issue I encountered involves the "Login Page" functionality. When a user enters an incorrect username or password and submits the form, the API responds with a message sta ...

Issue encountered: The function car.reviews.find() is not recognized

Encountering an issue with the find() method in my MERN stack application. I am looking to implement a reviews route where users can add comments about cars within the app. In the frontend, fields and buttons have been added; meanwhile, a post request has ...

Steps for including a map in a property file for JavaScript parsing

When a checkbox is clicked, a new series of checkboxes will be displayed. The details for these checkboxes are fetched from a database. However, I now need to have certain checkboxes pre-checked based on the user's selection. Since I can't store ...

Click to move directly to a specific section

This question may be common, but despite my research efforts, I have been unable to find a solution. I want to issue a disclaimer that I am new to javascript and jQuery. Here is an overview of what I am trying to achieve: I want two images that, when cli ...

Combining JS Tree and Datatables for Enhanced Functionality

I am facing a challenge on my webpage where I have two columns. The left column consists of a checkbox jstree, while the right column contains a table using datatables. Both the table rows and tree are loaded at the start. My goal is to display a row when ...

Upon initiating a refresh, the current user object from firebase Auth is found to be

Below is the code snippet from my profile page that works perfectly fine when I redirect from the login method of AuthService: const user = firebase.auth().currentUser; if (user != null) { this.name = user.displayName; this.uid = user.uid; } e ...