The second JavaScript code consistently replaces the first code

I am implementing 2 different JavaScript references in my code, as shown below:

    <script src="../scripts/jsKeyboard.js" type="text/jscript"></script>
<script src="../scripts/DOB_Validate.js" type="text/jscript"></script>

To call each JavaScript function, I am utilizing an onfocus event with two separate asp:Textbox elements, as demonstrated below:

<asp:Textbox id="txtFirstName" runat="server" onfocus="jsKeyboard.focus(this);clean(this);" placeholder="Touch Here To Enter First Name" autofocus top="50%"></asp:Textbox>

    <asp:TextBox ID="TextBox1" runat="server" onfocus="board.focus(this);clean(this);" placeholder="MM/DD/YYYY" 
 maxlength="10" Width="5%"></asp:TextBox>

In the head of the page, I have two scripts that initialize the keyboard using the respective .js external references mentioned above...

Scripts inside head:

    <script type="text/javascript">
    $(function () {
        board.init("virtualKeyboard");
    });
 </script>

 <script type="text/javascript">
     $(function () {
         jsKeyboard.init("virtualKeyboard");
     });
 </script>

However, I am encountering a problem where the second script in the head is always overriding the first one...

What steps can I take to resolve this issue? Thank you for your assistance...

Answer №1

It seems like both of your functions have an identical structure. I'm assuming that you intend to have the same functionality for both. However, you are currently connecting them to the same element called 'txtContent'. To differentiate them, one script should be linked to 'TextBox1' instead.

For txtContent:

 <script type="text/javascript>
         $(function () {
             jsKeyboard.init("virtualKeyboard");
             $("#txtContent").val(initText);
         });

     </script>

And for TextBox1:

   <script type="text/javascript">
      $(function () {
          board.init("virtualKeyboard");
          $("#TextBox1").val(initText);
      });

 </script>

Additionally, it might be beneficial to consider renaming TextBox1 for clarity.

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

Guide to making a Grid element interactive using the Link component

PostsList component is responsible for rendering a list of posts. The goal is to enable users to click on a post item and be redirected to the specific post's link. const PostsListView = ({ posts, setError, isloggedin }) => { const [redirectCre ...

Tips on managing ajaxStart and ajaxStop events the Angular2 way

I am seeking a way to trigger events similar to JQuery's ajaxStart and ajaxStop. While I found a partial solution on how to set default HTTP headers in Angular 2 here, I have managed to handle the ajaxStart event for now. Does anyone have any soluti ...

Styling the active selection in nav class with bold attribute in Bootstrap/AngularJs

How can I apply the bold attribute to the currently selected nav bar item? <ul class="nav"> <li role="presentation" ng-repeate="item in items" ng-class="{'active':navLink == item.header}"> </li> &l ...

In ReactJS, when you encounter TextField values that are "undefined", it is important to handle them appropriately

I'm a beginner when it comes to ReactJs and Material-UI, so please bear with me if my question seems silly. Currently, I have a file named Main.js which includes the following code snippet: handleChange = (name, event) => { if(event==null) ...

How can I create a dropdown menu that is dependent on another dropdown menu using Ajax in my Laravel application?

I have two dropdown fields that are dependent on each other - Class & Section. I am trying to Select * from sections where class_id=selected Class Id. Although I attempted to achieve this using java script, it doesn't seem to work for me. Here are ...

The useRef() hook call in NextJs is deemed invalid

I have been attempting to implement the useRef() hook within a function component in my NextJs project, but I keep encountering the error below. Despite reviewing the React Hook guidelines, I am unable to determine why this error persists and the functio ...

What causes the index link to break when react-router's setRouteLeaveHook is used?

Issue: Whenever I include router.setRouteLeaveHook() or router.listenBefore() in my component, it causes the logo homepage Link to path="/" to break Scenario: I am attempting to implement a confirmation prompt before leaving a section. Below is the code f ...

I am seeking to incorporate several Three.js animations into my HTML document, but I am experiencing issues with them

As a professional graphic designer, I am facing an issue with Three.js https://i.sstatic.net/6ZsWa.jpg I have tried several solutions, but none seem to work effectively. In my attempt, I duplicated the imported model and changed its name. Despite trying ...

Google Chrome successfully transmits two variables with AJAX, whereas Mozilla Firefox does not send them

Having an issue with sending two values through ajax - currently only one value is being sent in Mozilla browser. Ajax script: $('#post_submit').click(function() { event.preventDefault(); var great_id = $("#post_container_supreme:first").attr(" ...

What could be causing my jQuery to malfunction with version 1.9.1?

I am facing an issue with my website which primarily operates on jQuery version 1.9.1. However, I need to integrate a plugin that specifically requires version 1.4.1. Is there a simple modification that can be made within the plugin code to ensure compatib ...

Difficulty encountered while deploying a React application on Netlify

I followed the instructions on a Medium link to deploy my React application on Netlify: To set up the production mode, I utilized an express server for defining build scripts. After creating the build scripts on my local machine, I uploaded them to the Ne ...

What is the best way to generate a fresh set of data from a search parameter?

I have received data from an API call that needs to be filtered. I am utilizing Redux instead of local state for this task. Below are the actions I have defined: import ActionTypes from '../constants/ActionTypes'; export const passengersDataAc ...

What Causes the "Not a String or Buffer Type" Unhandled Exception?

I've encountered an error that seems to be originating from the following line of code, even though I believe I am following the example correctly (viewable at https://www.npmjs.org/package/aws-sign). Any help or hints would be greatly appreciated. v ...

In the process of making a request with axios in an express server

Struggling with a simple call to an API using Axios with Express, and I can't figure out why it's always pending in the browser. Here is my route: var express = require("express"); var router = express.Router(); const controller = require("../. ...

Eliminating flicker can be achieved by following these steps

namespace stock4 { public partial class Form1 : Form { public Form1() { InitializeComponent(); this.SetStyle(ControlStyles.ResizeRedraw, true); this.chart1.AxisViewChanged += chart1_AxisViewChange ...

Error: Unable to instantiate THREE.OrbitControls as a constructor

As I delve into the world of three.js, I've encountered an issue that has me stumped. Despite declaring the use of OrbitControls.js (CODE1) and seeing it in the THREE tree in the DOM (Figure 1), I keep running into the error: "TypeError: THREE.OrbitCo ...

The server has rejected the MailMessage 4.3.1, but it is still within the exchange limit

After reviewing various responses, such as this one, please note that my situation is different. I have developed a C#.NET class with implementations of MailMessage and SmtpServer, aiming to send attachments in case of errors occurring in a laboratory in ...

Modal's ng-click not triggering component's function

I am currently working on resolving an issue. My choice to use AngularJS is intentional, as I prefer not to load the entire NPM of Angular. Additionally, we heavily rely on Razor Syntax for the Web Layer. Implementation in Create.cshtml file <button ...

I encountered an issue: "SyntaxError: missing ) after argument list". What steps should I take to fix it?

I'm encountering the error message "SyntaxError: missing ) after argument list" and I need assistance in resolving it. Click here to view the code that is causing the error ...

Delivering XML in response to a webmethod call

While working with an ajax PageMethod to call an asp.net webmethod, I encountered an issue when trying to pass a significant amount of XML back to a callback javascript function. Currently, I am converting the XML into a string and passing it in that form ...