why is it that I am not achieving the expected results in certain areas of my work?

I am facing issues with getting an alert response from certain buttons in the code. The AC button, EQUALS button, and the button labeled "11" are not behaving as expected. I have tried troubleshooting but cannot identify the problem. Can someone please assist me in understanding what's wrong with the code?

function submit() {
  var a = document.getElementById("a").value;
  var b = document.getElementById("b").value;
  var c = document.getElementById("c").value;
  alert("hello");
  alert(a);
  switch (b) {
    case '+':
      a = parseInt(a);
      c = parseInt(c)
      console.log(`${a+c}`)
      break;
    case '-':
      console.log(`${a-c}`)
      break;
    case '*':
      console.log(`${a*c}`)
      break;
    case '/':
      console.log(`${a/c}`);
      break;
    default:
      return
  }

}

function a() {

  alert("v")
}
const ans = answer => {
  answer.innerText = submit()
}
const answer = document.querySelector('[data-ans]')







class calculate {
  constructor(first_num, second_one) {
    this.first_num = first_num;
    this.second_one = second_one;
  }
  text() /* this region is for output value*/ {

  }
  numbermagic() /*this is where numbers do magic*/ {

  }
  clear() /*this region is for clear button*/ {

  }
  delete() /*this region is for delete button*/ {

  }
  operator() /*this region is for operators*/ {

  }
  calculation() /*this is where the magic happens*/ {}
  display(d) /*this is what you see*/ {
    alert("you pressed  " + d);
  }
}
const numbers = document.querySelectorAll('[data-number]'); /*NUMBERS are a string */
const operators = document.querySelectorAll('[data-operand]'); //this loooks for operator
const first_num = document.querySelector(['data-first-input']); //this does first disp segment
const second_one = document.querySelector(['data-second-input']); //this does seci=ond disp
const ac = document.querySelectorAll(['data-a']);
const deleteButton = document.querySelectorAll(['data-d']);
const equal = document.querySelectorAll(['data-e']);
const calculator = new calculate(first_num, second_one);
numbers.forEach(button => {
  button.addEventListener('click', () => {
    calculator.display(button.innerText)
  })
})
operators.forEach(button => {
  button.addEventListener('click', () => {
    calculator.operator()
    calculator.display(button.innerText)
  })
})


deleteButton.addEventListener('click', button => {
  calculator.delete()
  calculator.dsplay(button.innerText)
})


equal.forEach(button => {
  button.addEventListener('click', () => {
    calculator.compute()
    calculator.display(button.innerText)
  })
})
ac.forEach(button => {
  button.addEventListener('click', () => {
    calculator.display(button.innerText)
  })
})
body {
  background: -webkit-linear-gradient(left, lightskyblue, #d6ff09);
}

input {
  width: 120px;
  background-color: gray;
  color: calc(var9(a));
}

input.sign {
  width: 2em;
}

div.calculator {
  scale: 1;
}

button {
  background-color: aqua;
  cursor: crosshair;
  border-radius: 50%;
  border-color: blue;
  border-style: hidden;
  border-width: 4em;
  opacity: 0.9;
  filter: drop-shadow(4px 4px 4px red);
  animation: background-color 3s;
}

button:hover {
  opacity: 0.9;
  filter: drop-shadow(3px 3px 3px red);
  background-color: cyan;
}

button:active {
  opacity: 0.9;
  filter: drop-shadow(2px 2px 2px red);
  background-color: cyan;
}

button.span-2 {
  width: 140px;
  border-radius: 20px;
}

button.first_input {
  background-color: rgba(000, 000, 000, .2);
  cursor: hidden;
  border-radius: 0px;
  border-color: blue;
  border-style: hidden;
  width: 180px;
  border-width: 0em;
  opacity: 1;
  filter: none;
  animation: none;
}

button.second_input {
  padding: 0px;
  height: auto;
  text-decoration-color: black;
  background-color: rgba(000, 000, 000, .1);
  cursor: hidden;
  border-radius: 0px;
  resize: vertical, 2;
  border-color: black;
  border-style: solid;
  width: 180px;
  border-width: 0em;
  opacity: 1;
  filter: none;
  animation: none;
}

div.display {
  display: grid;
  position: relative;
  right: 0%;
  justify-content: center;
  border-bottom: 20px;
  border-radius: 44px;
}

span.first_input {
  height: 40px;
  min-height: 70px;
  text-align: right;
  background-color: yellowgreen;
  width: 280px;
}

span.second_input {
  height: 40px;
  text-align: right;
  background-color: yellowgreen;
  width: 280px;
}

button {
  height: 70px;
  width: 70px
}
<div>
  <input type="number" placeholder="number" id="a">

  <input type="text" id="b" class="sign" placeholder="+ ,_ ,* ,/">
  <input type="number" id="c" placeholder="second number">
  <button onclick="submit()" value="submit">equals</button>
</div>
<hr color=b lue></hr>
<hr color=blue></hr>
<div style="height:30px; width:100%"></div>
<div class="calculator">
  <form align="center">
    <div align="center" class="display">
      <span align="center" data-first class="first_input">123 +</span>
      <span align="center" data-second class="second_input">123</span>
    </div>
    <button data-a class="span-2">AC </button>
    <button data-d>11</button>
    <button data-operand>*</button><br>
    <button data-number>1</button>
    <button data-number>2</button>
    <button data-number>3</button>
    <button data-operand>+</button><br>
    <button data-number>4</button>
    <button data-number>5</button>
    <button data-number>6</button>
    <button data-operand>-</button><br>
    <button data-number>7</button>
    <button data-number>8</button>
    <button data-number>9</button>
    <button data-operand>/</button><br>
    <button data-number>.</button>
    <button data-number>0</button>
    <button data-e class="span-2">=</button>
  </form>
</div>

javascripthtmlcsscalculator

Answer №1

It is important to note that the argument passed to document.querySelectorAll() must be a string

Parameters

selectors
A string containing one or more selectors to match against.

In your code, you have used arrays instead of strings for the method calls. It seems like you intended to include square brackets inside the string to target data- attributes. The correct syntax for your method calls should be:

const first_num = document.querySelector('[data-first-input]'); //this does first disp segment
const second_one = document.querySelector('[data-second-input]'); //this does seci=ond disp
const ac = document.querySelectorAll('[data-a]');
const deleteButton = document.querySelectorAll('[data-d]');
const equal = document.querySelectorAll('[data-e]');

Additionally, document.querySelectorAll() returns

A non-live NodeList containing one Element object for each element that matches at least one of the specified selectors […]"

You attempted to call the addEventListener() method on deleteButton, which is a NodeList:

deleteButton.addEventListener('click', button => {
  calculator.delete()
  calculator.dsplay(button.innerText)
})

To resolve this issue, you can either use the forEach method as you did for the other document.querySelectorAll() calls:

deleteButton.forEach(button => {
  button.addEventListener('click', button => {
    calculator.delete()
    calculator.dsplay(button.innerText)
  });
});

or utilize document.querySelector() which returns

An Element object representing the first element in the document that matches the specified set of CSS selectors

const deleteButton = document.querySelector('[data-d]');

// …

deleteButton.addEventListener('click', button => {
  calculator.delete()
  calculator.dsplay(button.innerText)
})


function submit() {
  var a = document.getElementById("a").value;
  var b = document.getElementById("b").value;
  var c = document.getElementById("c").value;
  alert("hello");
  alert(a);
  switch (b) {
    case '+':
      a = parseInt(a);
      c = parseInt(c)
      console.log(`${a+c}`)
      break;
    case '-':
      console.log(`${a-c}`)
      break;
    case '*':
      console.log(`${a*c}`)
      break;
    case '/':
      console.log(`${a/c}`);
      break;
    default:
      return
  }

}

function a() {

  alert("v")
}
const ans = answer => {
  answer.innerText = submit()
}
const answer = document.querySelector('[data-ans]')







class calculate {
  constructor(first_num, second_one) {
    this.first_num = first_num;
    this.second_one = second_one;
  }
  text() /* this region is for output value*/ {

  }
  numbermagic() /*this is where numbers do magic*/ {

  }
  clear() /*this region is for clear button*/ {

  }
  delete() /*this region is for delete button*/ {

  }
  operator() /*this region is for operators*/ {

  }
  calculation() /*this is where the magic happens*/ {}
  display(d) /*this is what you see*/ {
    alert("you pressed  " + d);
  }
}
const numbers = document.querySelectorAll('[data-number]'); /*NUMBERS are a string */
const operators = document.querySelectorAll('[data-operand]'); //this loooks for operator
const first_num = document.querySelector('[data-first-input]'); //this does first disp segment
const second_one = document.querySelector('[data-second-input]'; //this does seci=ond disp
const ac = document.querySelectorAll('[data-a]');
const deleteButton = document.querySelector('[data-d]');
const equal = document.querySelectorAll('[data-e]');
const calculator = new calculate(first_num, second_one);
numbers.forEach(button => {
  button.addEventListener('click', () => {
    calculator.display(button.innerText)
  })
})
operators.forEach(button => {
  button.addEventListener('click', () => {
    calculator.operator()
    calculator.display(button.innerText)
  })
})


deleteButton.addEventListener('click', button => {
  calculator.delete();
  calculator.dsplay(button.innerText);
})


equal.forEach(button => {
  button.addEventListener('click', () => {
    calculator.compute();
    calculator.display(button.innerText);
  })
})

ac.forEach(button => {
  button.addEventListener('click', () => {
    calculator.display(button.innerText);
  })
})
body {
  background: -webkit-linear-gradient(left, lightskyblue, #d6ff09);
}

input {
  width: 120px;
  background-color: gray;
  color: calc(var9(a));
}

input.sign {
  width: 2em;
}

div.calculator {
  scale: 1;
}

button {
  background-color: aqua;
  cursor: crosshair;
  border-radius: 50%;
  border-color: blue;
  border-style: hidden;
  border-width: 4em;
  opacity: 0.9;
  filter: drop-shadow(4px 4px 4px red);
  animation: background-color 3s;
}

button:hover {
  opacity: 0.9;
  filter: drop-shadow(3px 3px 3px red);
  background-color: cyan;
}

button:active {
  opacity: 0.9;
  filter: drop-shadow(2px 2px 2px red);
  background-color: cyan;
}

button.span-2 {
  width: 140px;
  border-radius: 20px;
}

button.first_input {
  background-color: rgba(000, 000, 000, .2);
  cursor: hidden;
  border-radius: 0px;
  border-color: blue;
  border-style: hidden;
  width: 180px;
  border-width: 0em;
  opacity: 1;
  filter: none;
  animation: none;
}

button.second_input {
  padding: 0px;
  height: auto;
  text-decoration-color: black;
  background-color: rgba(000, 000, 000, .1);
  cursor: hidden;
  border-radius: 0px;
  resize: vertical, 2;
  border-color: black;
  border-style: solid;
  width: 180px;
  border-width: 0em;
  opacity: 1;
  filter: none;
  animation: none;
}

div.display {
  display: grid;
  position: relative;
  right: 0%;
  justify-content: center;
  border-bottom: 20px;
  border-radius: 44px;
}

span.first_input {
  height: 40px;
  min-height: 70px;
  text-align: right;
  background-color: yellowgreen;
  width: 280px;
}

span.second_input {
  height: 40px;
  text-align: right;
  background-color: yellowgreen;
  width: 280px;
}

button {
  height: 70px;
  width: 70px;
}
<div>
  <input type="number" placeholder="number" id="a">

  <input type="text" id="b" class="sign" placeholder="+ ,_ ,* ,/">
  <input type="number" id="c" placeholder="second number">
  <button onclick="submit()" value="submit">equals</button>
</div>
<hr color=b lue></hr>
<hr color=blue></hr>
<div style="height:30px; width:100%"></div>
<div class="calculator">
  <form align="center">
    <div align="center" class="display">
      <span align="center" data-first class="first_input">123 +</span>
      <span align="center" data-second class="second_input">123</span>
    </div>
    <button data-a class="span-2">AC </button>
    <button data-d>11</button>
    <button data-operand>*</button><br>
    <button data-number>1</button>
    <button data-number>2</button>
    <button data-number>3</button>
    <button data-operand>+</button><br>
    <button data-number>4</button>
    <button data-number>5</button>
    <button data-number>6</button>
    <button data-operand>-</button><br>
    <button data-number>7</button>
    <button data-number>8</button>
    <button data-number>9</button>
    <button data-operand>/</button><br>
    <button data-number>.</button>
    <button data-number>0</button>
    <button data-e class="span-2">=</button>
  </form>
</div>

Your snippet contains some typos and errors, but these corrections address the specific issues raised in your question.

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

Improve performance by debouncing computed properties and getters in Vue

I'm having trouble getting debounce to work with computed properties and Vuex getters. The debounced functions are always returning undefined. Check out this JSFiddle for an example HTML: <div id="app"> <input v-model="text"> <di ...

javascriptvue.jslodashvuex

Dynamic shopping cart with Vue.js

Currently, I am working on a shopping cart project using Vue.js and Vuetify. I need help figuring out how to capture the boolean value true or false and adjust the total price in the amount based on whether it is true or false. Any suggestions? <v-con ...

javascriptvue.jsvuejs2vue-component

Update all occurrences of a particular value to null within the Realtime Database using Firebase Cloud Functions

I need to update the values of a specific userID linked to multiple post keys in my database by setting the userID to null. The userIDs are associated with post keys located in the path: posts/ivies/userIDs in my database. Take a look at how the database i ...

javascripttypescriptfirebase-realtime-databasegoogle-cloud-functions

Determine the mean value from an array of JSON objects in an asynchronous manner

Can you help me calculate the average pressure for each device ID in this JSON data set? [ { "deviceId": 121, "Pressure": 120 }, { "deviceId": 121, "Pressure": 80 }, { "deviceId": 130, "P ...

javascriptarraysnode.jsjsonasynchronous

Is there a way to efficiently retrieve and handle multiple $_POST records in PHP simultaneously?

I am currently working on developing a management interface that allows administrators to make bulk edits to members of a website all at once. While we already have the capability for single edits, there is a need for an option to modify all users simultan ...

phphtmlarrayspost

Using `this` within an object declaration

I am encountering an issue with the following code snippet: const myObj = { reply(text: string, options?: Bot.SendMessageOptions) { return bot.sendMessage(msg.chat.id, text, { reply_to_message_id: msg.message_id, ...options }) ...

javascripttypescript

The Discord.js command outright declines to function

I'm having trouble with a code that I'm working on. The goal is to create a command that is enabled by default, but once a user uses it, it should be disabled for that user. However, when I try to execute the code, it doesn't work at all and ...

javascriptdiscord.js

Where does the browser retrieve the source files for "sourcemapped" JavaScript files from?

As I begin working on an existing project built with angular JS, upon opening chrome dev tools and navigating to the "source" view, a message appears: Source map detected... This prompts me to see a link to: https://i.stack.imgur.com/RZKcq.png The fi ...

javascriptnode.jsangularnpmwebpack

Utilizing CSS or JavaScript to define the input type

I currently have a group of checkboxes displayed on a webpage within a DIV labeled OPTIONS, shown below: <div id="options"> <input type="checkbox"..... > <input type="checkbox"..... > <input type="checkbox"..... > <input t ...

javascriptcssformshtml

Webpage with visual representation

Currently in the process of redesigning my university's drama department website, I'm looking to incorporate three images side by side with spacing and captions. The captions need to have a header that's styled differently from the caption i ...

htmlcss

Tips for passing a distinct identifier to the following page when transitioning with Link in NextJS

I need to pass an identifier to the next page when a user navigates. On my homepage, I am fetching an array of data and using the map method to display it in a card-based UI. When a user clicks on a card, they should be taken to another page that display ...

javascriptreactjsnext.jsnext-routernext-link

Utilizing AngularJS to make an API call with $http method and handling a

I am attempting to make a call to my webservice using "$http". When I use "$ajax", it works fine. Here is an example of jQuery $Ajax working correctly: $.ajax({ type: "Get", crossDomain: true, contentType: "application/json; chars ...

javascriptjsonangularjsjquery-mobileangularjs-ng-repeat

Is it possible to include more details in the document?

Is it possible to include additional metadata, such as a record ID, within a file without causing corruption? I am looking for ways to add extra information to files. Can anyone offer some guidance? Your help would be greatly appreciated. Thank you! ...

jqueryhtmlfilefile-uploaddata-uri

How to navigate to the "not now" button in Instagram notifications with Selenium and Python

I'm currently working on a custom "Instagram bot" to log in to Instagram. Although I've managed to bypass the login screen, I'm encountering an issue with a popup message that says: https://i.stack.imgur.com/OMA6h.png from selenium import we ...

pythonhtmlseleniumbotsweb-deployment

How can I manage the asynchronicity of Hapi.js, fs.readFile, fs.writeFile, and childProcess.exec?

My code execution seems to be resulting in an empty list, could it be that my asynchronous calls are incorrect? I've tried rearranging and breaking things into functions but there still seems to be a timing issue with my execution. The order in which ...

javascriptnode.jsasynchronoushapi.js

Retrieve: proper authentication credentials were not provided

Whenever I make a request, everything works fine and I receive the data: const get_players = async()=>{ const response = await fetch('http://127.0.0.1:8000/player_stats/api/players/') const data = await response.json() console. ...

javascriptpythondjangodjango-rest-framework

Can you explain how the functionality of setState operates within React in this specific situation?

I've been working on updating the state of an object in my array. I managed to get it done, but I'm a bit confused about how it works. toggleVisited = countryCode => { var countries = [ ...this.state.countries ]; var countryToChange = c ...

javascriptreactjssetstate

Disable Button's Shadow when it is in an active state (clicked)

Check out the DEMO to see the button animation CSS in action. The CSS code for the button animations is as follows: .btnliner { /* CSS properties */ } /* More CSS properties */ .btnliner:hover { /* Hover effects */ } Here is the corresponding J ...

javascriptjqueryhtmlcss

Tips for implementing two Secondary Actions in React Material UI, with one positioned on the left corner and the other on the right, while ensuring that the behavior of the

Is there a way to display two secondary actions on either end of a list item without triggering additional onclick events? The placement can be adjusted by overriding the CSS properties right and left. https://i.stack.imgur.com/rhr7N.gif The issue arises ...

javascriptreactjsmaterial-ui

Django (HTML) - Interactive tag in template not functioning

Currently, I am immersed in a Django project that involves incorporating custom checkbox forms. However, I ran into an issue where two identical code chunks are used with different forms. The problem arises when the label in the first sample is clickable ( ...

pythonhtmlcssdjango