JQuery calculator experiencing issues with data-numbers functionality| Troubleshooting allclear button functionality

Need help with AC button functionality and deleting button I am currently working on creating a calculator from scratch using Jquery. However, I am facing difficulties getting the calculate function to work.

Despite my attempts at experimenting with javascript and jquery while learning event handlers, I have not been successful in making it work.

function removeNumbers() {
    $(".current-operand").innerHTML = ' ';
}

$(document).ready(init);

function init() {
    $(".data-number").click(passInt);
    $(".data-allclear").click(removeNumbers);
}

function passInt() {
    $('.current-operand').append(parseInt($(this).html()));
}
<div class="calculator-grid">
<div class="output">
<div class="previous-operand "></div>
<div class="current-operand">0</div>
</div>
<button class="span-two data-allclear">AC</button>
<button class="data-delete">DEL</button>
<button class="data-operation">+</button>
<button class="data-number">1</button>
<button class="data-number">2</button>
<button class="data-number">3</button>
<button class="data-operation">*</button>
<button class="data-number">4</button>
<button class="data-number">5</button>
<button class="data-number">6</button>
<button class="data-operation">+</button>
<button class="data-number">7</button>
<button class="data-number">8</button>
<button class="data-number">9</button>
<button class="data-operation">-</button>
<button class="data-number">.</button>
<button class="data-number">0</button>
<button class="span-two data-equals">=</button>
</div>

</main>

Clicking on buttons with the class "data-number" should trigger an alert. My aim is for these numbers to display on the screen.

Answer №1

It performs effectively in this manner

$(()=>{
  $('.data-number').click(function(){
      alert('hi');
  });
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="calculator-grid">
    <div class="output">
        <div class="previous-operand"></div>
        <div class="current-operand">0</div>
    </div>
    <button class="span-two data-allclear">AC</button>
    <button class="data-delete">DEL</button>
    <button class="data-operation">+</button>
    <button class="data-number">1</button>
    <button class="data-number">2</button>
    <button class="data-number">3</button>
    <button class="data-operation">*</button>
    <button class="data-number">4</button>
    <button class="data-number">5</button>
    <button class="data-number">6</button>
    <button class="data-operation">+</button>
    <button class="data-number">7</button>
    <button class="data-number">8</button>
    <button class="data-number">9</button>
    <button class="data-operation">-</button>
    <button class="data-number">.</button>
    <button class="data-number">0</button>
    <button class="span-two data-equals">=</button>
</div>

Answer №2

$(function(){
  $(".data-number").click(function(){
    if ($('.current-operand').html()=='0') $('.current-operand').html('');
      $('.current-operand').append(parseInt($(this).html()));
  })
  
  $(".data-operation").click(function(){
      $('.previous-operand').html($(this).html());
  });
  
  $(".data-allclear").click(function(){
      $('.current-operand').html('0');
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<div class="calculator-grid">
    <div class="output">
        <div class="previous-operand"></div>
        <div class="current-operand">0</div>
    </div>
    <button class="span-two data-allclear">AC</button>
    <button class="data-delete">DEL</button>
    <button class="data-operation">+</button>
    <button class="data-number">1</button>
    <button class="data-number">2</button>
    <button class="data-number">3</button>
    <button class="data-operation">*</button>
    <button class="data-number">4</button>
    <button class="data-number">5</button>
    <button class="data-number">6</button>
    <button class="data-operation">+</button>
    <button class="data-number">7</button>
    <button class="data-number">8</button>
    <button class="data-number">9</button>
    <button class="data-operation">-</button>
    <button class="data-number">.</button>
    <button class="data-number">0</button>
    <button class="span-two data-equals">=</button>
</div>

</main>

You have the ability to capture the number from a button click.

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

A variety of products combined into a single form

I am looking to enhance my form by allowing users to add multiple entries before submitting, similar to an "add to cart" feature. The added entries should be displayed on the same page in a separate div along with a submit button. Once the user is ready, t ...

Display top level option while in Level 2 menu on Woocommerce

Looking to implement an accordion menu for mobile devices on a WordPress Woocommerce site. I've tried various code snippets from other sources but haven't been successful so far... The current code only supports 2 levels of the accordion menu. H ...

Deleting Cart Items Permanently with AJAX in Vue.js and Shopify

Seeking assistance with implementing a feature to remove a product from a MiniCart using Vue.js in a Shopify theme. Below is the code snippet for minicart.liquid file along with the cart data stored in the 'data' property. Although the remove fun ...

cracking reCAPTCHA without needing to click a button or submit a form (utilizing callback functions)

Currently, I am facing a challenge with solving a reCaptcha on a specific website that I am trying to extract data from. Typically, the process involves locating the captcha inside a form, sending the captcha data to a captcha-solving API (I'm using ...

Adjust the border color of the <input> element when it is clicked on

I'm currently working on a login screen for my next.js application and I've encountered an issue where the border color changes to a mixture of white and blue when I select an input field. https://i.stack.imgur.com/R2yKa.png I attempted to reso ...

Dealing with JSON responses in Spring MVC Controller - Handling Error Code 406

After exploring all the relevant StackOverflow links regarding the given topic, I have decided to post this question. This is my Controller code: @RequestMapping(value="/user/update", method = RequestMethod.GET, headers="Accept=*/*") public @Response ...

What is the process for uploading a file using jQuery?

I'm curious about how to achieve this using jQuery ajax. Currently, I have a jQuery ui dialog box that pops up with an html input file on it. When the user clicks import, I want to perform an ajax post to the server using jQuery. I am unsure of how ...

Check whether the element is concealed or located within a hidden container

Currently experimenting on this JSFiddle My objective is to automatically focus on the next empty input field once I leave the "start" input. Each input is connected with a "next" attribute to form a linked chain. My goal is to navigate through this ch ...

Tips for visually conveying the values of x and y using SVG symbols

I recently came across a blog post discussing the use of SVG symbols for icons, which inspired me to create representations of symbols using svg files. The original svgs I used had properties like x, y, height and width. However, when I tried adding these ...

Encountering an error while setting up the object spread operator Babel plugin for ES201

Exploring the possibilities of the new ES2018 spread operator for objects led me to discovering a promising NPM package: babel-plugin-transform-object-rest-spread Here's a glimpse of my package.json: // Scripts section "scripts": { "dev": " ...

Connecting click events to multiple items, without the need for multiple functions

I'm struggling with the efficiency of my Javascript and I believe there must be a better way to achieve my goal. To demonstrate my issue, I've created a simplified version of my project on JSFiddle. JSFiddle The main objective is to display inf ...

Display the PHP variable's contents as a text string within an HTML document

Looking at a WordPress PHP script, I came across the following snippet: echo '<div class="slide-media">' . $slide_media . '</div><!--/.slide-media-->' . "\n"; } I am interested in viewing the ...

Reverse the Shuffle Effect in jQuery Isotope

var elements = $grid.isotope('getFilteredItemElements') //Randomize items when total elements are greater than 13. if (elements.length >= 13) { RandomizeBlocks(); } function RandomizeBlocks() { $grid ...

Several buttons, each requiring to show distinct text

Currently, I am attempting to enhance an existing project that was graciously created for me. I must admit, I am quite new to this, so please be patient with me! In my project, there are 9 buttons, each triggering the display of a different image upon bei ...

Generate a text box that only accepts numbers

I'm in the process of creating a numeric-only input field using VueJS. It's mostly functioning correctly, but there is an issue that needs to be addressed: SUCCESS: Inputting 12 into the text field results in both the VueJS value and visual dis ...

How to use Selenium in Python to target specific sub-elements

I am currently working with the following HTML code block: <tbody id="id_tbody"> <tr id="tr_project_0" class="project_tr clr01 hover" data-select-value="0" style="border-top: 1px dotted #B4B4B4;"> <td class="txtC"> <a href="/173537" ...

Generating XML format from JSON using JavaScript

I am looking to create an XML format based on my JSON data, rather than converting it from JSON to XML. Here is an example of the JSON I want to convert to XML: var jsonData = { "Smart Shoes":{ "Product":"Smart Shoes", "Price":24.99, ...

Determine the count of checkboxes on a webpage by identifying the presence of the keyword 'type' in the page source code, utilizing Selenium with Python

Here is a code snippet to find the number of checkboxes on the current webpage: checkboxes = driver.find_elements(By.XPATH("html/body/div[2]/div/section[8]/div/div/div[3]/div/div[2]/table/tbody/tr[1]/td[1]/input[@type='checkbox']")) However, wh ...

The columns in the row are not fully filling up the container

I have a container with two rows inside. One of those rows contains several columns. My goal is to have four columns per line on mobile devices, which I achieved using "row-cols-4". However, on larger screens, I want all the columns to be on the same line, ...