"Enhance your calculator experience with three text fields, utilizing jQuery to allow writing in only one field at

I have a question regarding my calculator in Jquery. It has 3 different text fields and when I use the number buttons, it writes in all three fields simultaneously because of using $("input[type=text]") in the input declaration. I want to change this behavior by selecting only one input field. I considered giving an ID to each text field, but that would require writing a separate function for each ID, which seems unprofessional. What is the best way to write only in the input field on focus? Any help is appreciated. Here is the link to my fiddle for reference: https://jsfiddle.net/2yuve11z/

javascriptjquerycsshtml

Answer №1

I have made changes to your fiddle by incorporating the following:

https://jsfiddle.net/2yuve11z/2/

The approach taken is as follows:

Upon focusing on an input, all other inputs lose their .active class while the focused input gains the .active class. Subsequently, only the input with the .active class is updated.

If you wish for an input to be active upon page load, simply assign the .active class to it.

Answer №2

Ensure that your buttons are interacting with the correct text field by checking which one is selected.

 $(function () {
                    currentText = '';
        $( "input:text" ).focus(function() {
            currentText = this;
        });

        $("input:button").click(function(){
            value = $(this).val();
            currentValue = $(currentText).val();
            if(value=="C"){
                $(currentText).val("");
            }else{
                if(value=="="){
                    $(currentText).val(eval(currentValue));
                }else{
                    $(currentText).val(currentValue + value);
                }
            }
        });
    });

Answer №3

Top HTML5 Tips

Transform your button with <button type="button"> instead of <input type="button">

Answer №4

Implement the focus selector in your code by using: $("input[type=text]:focus")

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

Error: The protractor module is not defined, please check the stack

I'm currently experimenting with AngularJS tests using Protractor. Here is the stacktrace I have at the moment: Starting selenium standalone server... Selenium standalone server started at http://192.168.0.150:51197/wd/hub F Failures: 1) E2E: The ...

javascriptangularjstestingselenium-webdriverprotractor

Adjust the positioning of the background and create a smooth fade effect for

Is there a way to simultaneously change the background position and display an image in front of it? My current solution involves using a second div with padding to center it, but when I hover over the padding of the first div, the image does not change. ...

htmlcsstransition

Use CredentialsProvider to enable Next Auth login functionality

I am encountering an issue where I retrieve a user from the database and store it in a variable called result. However, I noticed that the result object does not contain the password key, resulting in the value of result.password being undefined. I am un ...

javascriptmongoosenext.jsnext-auth

Does the arc() method in canvas.getContext('2d') appear centered?

It caught my attention that circles do not require any offsetting to be centered. Is this automatic? If so, can you explain why it differs from the rect, fillRect, fillText, and strokeText methods where centering requires offsetting? ...

javascripthtml5-canvas

Explain the concept of DOM components in relation to refs within the React JS framework

Before this issue came up in the React documentation for ref forwarding, there was a mention: The concept of ref forwarding doesn't just apply to DOM elements. It can also be used with class components. There's a discussion on another platform ...

javascriptreactjs

Is there a way to ensure that the cards remain securely within the confines of the background image at

Struggling to keep the cards neatly contained within the background image regardless of screen size. Here's my code snippet: {% block content %} <style> .custom-skills-section { background: url('{{ background_image ...

htmlcssdjangobootstrap-5

jQuery fails to modify HTML according to its intended purpose

I've been struggling to update a price using JQuery. Even though the code seems fine when I check the console, the HTML doesn't reflect the changes. Additionally, when I try to log console.log(newPrc), it gives an error saying "newPrc" is not def ...

javascriptjqueryhtml

The functionality of if and else statements within local storage is not functioning as

I've been working on implementing a styleswitcher for my website. I successfully created a dropdown menu and saved it in localstorage. However, I'm facing an issue when trying to use the localstorage information to trigger an alert() through if a ...

javascriptjqueryhtmllocal-storage

Guide on applying a CSS shimmer effect to a group of HTML elements simultaneously

I am looking to add a shimmer animation to a group of HTML elements, making it appear as though one continuous shimmer is passing through all the elements. I have observed this effect achieved with text animations using background-clip: text; in CSS and ap ...

htmlcsscss-animations

Experiencing code coverage challenges in Angular 8 relating to function properties

https://i.sstatic.net/WQpVB.png Looking for suggestions on how to create a unit test case in Jasmine to address the code coverage problem. Any ideas? ...

javascriptangulartypescriptjasminekarma-jasmine

insert a div element at a static position with a height of 100%

Adding two divs on top and bottom of a fixed div is what I need to do. To achieve this, I created a panel with a fixed position on the left side. I added the first div with the h-100 class which sets its height to 100%. However, when I try to add the secon ...

htmlcsstwitter-bootstrapbootstrap-5

Show the content retrieved from the JSON post request

In the javascript code below, I am trying to delete a page using $.post() and then display a message with showStatus(). Instead of hardcoding the message in showStatus(), I want to pass the text returned by the $.post() call. How can I achieve this? $.p ...

asp.netjavascriptjqueryjson

Drop-down autocomplete features from Jquery-ui will show up below every word

Currently, I am utilizing Autocomplete from jquery-ui for multiple values. However, the dropdown list appears at the size of the input box. Is there a way to adjust it so that the dropdown appears below the cursor position with a width equivalent to the dr ...

jqueryjquery-uiautocompletejquery-ui-autocomplete

default selection in AngularJS select box determined by database ID

Here is the scenario: ... <select ng-model="customer" ng-options="c.name for c in customers"> <option value="">-- choose customer --</option> </select> .... In my controller: $scope.customers = [ {"id":4,"name":"aaaa", ...

javascriptangularjs

Hiding a div becomes impossible once it has been set to display:block

When I click on an element, I want a box to open and then when I click on a "CLOSE" button, I want it to disappear. However, I am encountering an issue where the box appears using "display:block" but does not disappear with "display:none" as intended (see ...

jquerycss

Perform an additional HTTP request and utilize the response within the existing Observable

In my Angular 2 project, I am utilizing the http component to make API calls. The specific REST API I want to access returns a maximum of 100 Elements in one request. If more items exist, a hasMore flag is included in the response. To retrieve additional ...

javascriptangularrxjs

Pass a variable from JavaScript to PHP

Similar Query: How can I pass variables from JavaScript to PHP? Whenever a button is clicked, a variable $var is created and then I want to transfer this variable to PHP for further processing. For instance: Within Jquery.js $('#button'). ...

phpjavascriptjqueryajax

Expand the image background to fit within a div container

Below is the code snippet I am working on: <div id="intro_section_upper" > <%= image_tag("video_background.jpg", :id=>"video_bg") %> <div id="video_table_main" > <table class=" ...

htmlruby-on-railscss

Is there a way to delete information that is saved in local storage?

When I use console.log(localStorage.getItem("cartCache")), the output is as follows: {"dataCache":[{"id":20,"quantity":1,"total":100000,"request_date":"27-08-2017 20:31:00"},{"id":53,"quantity":1,"total":200000,"request_date":"27-08-2017 20:38:00"}]} I a ...

javascriptjqueryarraysjsonlocal-storage

Issues with loading JSON data through JQuery

I am completely new to the process of loading JSON text using JavaScript or JQuery. JSON is a new concept for me as well. Currently, I have PHP providing me with some JSON text containing images stored on my server in the following format: [ [{ ...

javascriptphpjqueryjson