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

Why is it necessary to use process.nextTick() to delay method execution within a PassportJs strategy using Express?

When working with user registration using the passport local strategy, I stumbled upon a code snippet that utilizes process.nextTick to postpone the execution of a method within the Passport LocalStrategy callback. While I grasp the concept of delaying m ...

javascriptnode.jsexpresspassport.js

Various colored backgrounds in a random arrangement on a grid post layout

I'm looking to implement this plugin for displaying blog posts, but instead of using an image as the background, my client wants different colored images. I have managed to figure out the code to achieve this based on a post I found here, but unfortun ...

javascriptcsswordpressbackgroundalternating

Displaying information in a drop-down list based on the selection made in a previous drop

Hey fellow developers, I could really use your expertise on a project I'm working on for attendance management. I've hit a roadblock with a specific feature - my goal is to dynamically display departments based on the selected block without requi ...

phpjquerycssajaxhtml

Utilizing ng For in a personalized directive to fill a selection menu

I encountered an issue while trying to populate a selected dropdown using ngRepeat inside a custom directive. I came across this example that seemed similar to what I wanted to achieve here. Although it worked for the example, it didn't work for me. ...

javascriptangularjsangularjs-directiveangularjs-ng-repeat

Extract the body.req object within a loop in a Node.js application

I'm looking to efficiently parse and save the body of a POST request using Mongoose in Node.js. Is there a way to use a for loop to accomplish this task, rather than manually saving every property? My ideal solution would involve something like: for ...

javascriptjsonnode.jsexpresspost

Having trouble with the pagination feature while filtering the list on the vue-paginate node

In my current project, I have integrated pagination using the vue-paginate node. Additionally, I have also implemented filtering functionality using vue-pagination, which is working seamlessly. Everything works as expected when I enter a search term that d ...

javascriptnpmvue.jsvuejs2

Printing to the console: the array is empty and contains just one element simultaneously

I've encountered an issue regarding the console.log function that seems related to a specific case I found... JavaScript array length problem Upon checking my console, I noticed this output: https://i.stack.imgur.com/AbCdE.png The code snippet in ...

javascriptarraysobject

Angular - How child components can communicate with their parent components

I'm struggling to understand how to communicate between components and services. :( Even though I've read and tried a lot, some examples work but I still don't grasp why (?). My goal is to have one parent and two child components: dashboa ...

javascriptangulartypescript

Resizing a d3 graph for various screen resolutions

Looking to create a dynamic dashboard in Angular, I found a code snippet for a gauge chart at this link. Here is an example of how my HTML file appears: <div fxLayout="row" fxLayoutAlign="space-around center" > <div fxFlex='33%'> ...

javascriptangulard3.js

Is it possible to use ng-src to point to a file stored locally?

I am currently experimenting with using ng-src to load images from a local folder, but I keep encountering 404 errors. Can ng-src actually reference a local folder, or do you always have to use a hardcoded path like http://example.com/imgs/{{work.img}}.jpg ...

javascriptangularjs

The client end encountered an issue preventing the saving of a jpeg image

I have a situation where I need to retrieve an image stored on the server and send it to the client using sockets. While I am able to display the received image on canvas, I am encountering difficulties in saving the image to the local disk. I have attempt ...

javascriptnode.jssocket.iofs

How can I showcase Bootstrap cards horizontally within a razor foreach iteration?

I seem to be experiencing a mental block on how to arrange bootstrap cards in a horizontal layout using a for each loop. By default, they appear vertically. Below is my razor code: @foreach (var item in Model) { var imgUrl = Url.Content("~/Conte ...

htmlcssasp.net-mvctwitter-bootstrap

What is preventing my function from retrieving data from the JSON File?

Exploring the realm of JSON file manipulation, I am delving into how it functions. Equipped with a JSON file attached to my document and a function sharing the same name as my object in the JSON file. However, despite all efforts, the data is not being dis ...

javascriptjson

Combining Multiple Tables Using Knex SQL Joins and Storing the Result in an Array

At the moment, I'm utilizing Knex to carry out queries on a MSSQL database. In my schema, there is a table named "Meals" which has the following columns: Id Additionally, there is also a table named "Vegetables" with the following columns: Id Meal ...

javascriptsqlknex.js

url-resettable form

Currently, I am working on an HTML form that includes selectable values. My goal is to have the page load a specific URL when a value is selected while also resetting the form back to its default state (highlighting the "selected" code). Individually, I c ...

javascripthtmlforms

Issue: Using the useParams() hook triggers a TypeError, stating that useContext(...) is undefined

Having trouble with the useParams() react hook to fetch a parameter, and encountering this error: Error: useContext(...) is undefined The hooks file throws this error on line 40: /modules/hooks.js:40 39 | > 40 | const match = useContext(Context) ...

javascriptreactjsreact-hooksreact-routerurl-parameters

What is the process for exporting an SVG file from a web page?

<svg class="paint" version="1.1" xmlns="http://www.w3.org/2000/svg"> <rect class="svgobject" x="458" y="165.28750610351562" width="142" height="56" fill="black" stroke="black" id="154" transform="translate(0,0)"> </rect> </svg> ...

javascriptsvg

Capture a snapshot with Protractor using the Jasmine2 Screenshot Reporter

The Protractor configuration file includes 2 custom reporting options: one for logging and the other is the protractor-jasmine2-screenshot-reporter. However, only a blank white screen is displayed when generating a screenshot png. Below is the code snippet ...

javascriptnode.jsnpmprotractorjasmine2.0

What is the proper way to add a date and time into a MYSQL database using an HTML form

Dealing with the transition from "datetime" to "datetime-local" in HTML5 has unexpectedly caused some complications for me. Due to this shift, inserting datetime values into a MySQL table using an HTML form has become problematic, especially when using Car ...

phpmysqlhtmllaravelphp-carbon

(MUI Textfield) Error: Unable to access properties of undefined (specifically 'focus')

I have been working with the useRef hook in my Material Ui Textfield and have encountered the error Uncaught TypeError: Cannot read properties of undefined (reading 'focus'). I am unsure how to resolve this issue. Here is my current code snippet: ...

javascriptreactjsdommaterial-ui