Sunday

my query about why am I not getting desired output in some parts?

6:01 AM calculator, css, html, javascript No comments

Issue

I am not being able to get an alert response from some buttons in as an alert. I tried a lot to detect the problem but can't find it. please help me understand the problem in the code. the AC button, EQUALS button and the button with the text "11" is not giving a response like other operators and numbers like I am trying to make

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>

Solution

The argument to document.querySelectorAll() should be a string (emphasis mine):

Parameters

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

Whereas for these method calls, you have used arrays. I suspect that you meant to have the square brackets inside the string to select data- attributes. So for your method calls, they should be changed like the following:

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 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]');

Furthermore, document.querySelectorAll() returns

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

But you tried to call addEventListener() method on deleteButton which would be a NodeList:

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

You can either use the forEach method like you did for the other document.querySelectorAll() calls:

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

or use 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>

There are some other typos and such in the snippet but this should be sufficient to answer your question specifically.

Answered By - Wongjn

This Answer collected from stackoverflow and tested by AngularFix community admins, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Sunday

my query about why am I not getting desired output in some parts?

Issue

Solution

Parameters

0 comments:

Post a Comment

Popular Posts

Labels