为什么负数在这个简单的HTML和JavaScript计算器中显示为”5-“而不是”-5″？

huangapple
go评论96阅读模式
英文:

Why does negative numbers display like "5-" instead of "-5" in this simple calculator on HTML and javaScript?

问题

  1. <!DOCTYPE html>
  2. <html>
  4. <head>
  5.   <meta charset="utf-8">
  6.   <meta name="viewport" content="width=device-width">
  7.   <title>replit</title>
  8.   <style>
  10. #calculator{
  11.   display: flex;
  12.   flex-direction: column;
  13.   align-items: center;
  14.   justify-content: center;
  15.   max-width:400px;
  16.   min-width: 300px;
  17.   background-color: green;
  18. }
  20. #screen{
  21.   width: 100%;  
  22.   aspect-ratio: 4/1.5;
  23.   background-color: rgba(0, 0, 0, 0.8);
  24. }
  26. #input{
  27.   width:90%;
  28.   height:90%;
  29.   background-color:rgba(0, 0, 0, 0);    
  30.   color:white;
  31.   font-size: 15vw;
  32.   direction: rtl;
  33.   font-family: Helvetica, sans-serif;
  34. }
  36. #buttonsGrid{
  37.   width: 100%;
  38.   aspect-ratio: 4/5;
  39.   display: grid;
  40.   grid-template-columns: repeat(4, 1fr);
  41.   grid-template-rows: repeat(5, 1fr);
  42.   justify-content: center;
  43.   font-size: 5vw;
  44.   color:white;
  45.   background-color: gray;
  46.   font-family: Helvetica, sans-serif;
  47. }
  49. .singleButton{
  50.   border: solid;
  51.   border-color: black;
  52.   border-width: 1px;
  53.   display: flex;
  54.   align-items: center;
  55.   justify-content: center;
  57. }
  59. [id="0Button"] {
  60.   grid-column: span 2;
  61. }
  63. #equalButton, #plusButton, #minusButton, #xButton, #divisionButton{
  64.  background-color: orange;
  65. } 
  67. #cButton, #negativePositiveButton, #percentageButton {
  68.    background-color: rgba(0, 0, 0, 0.3);
  69. }
  71. </style>
  73. </head>
  75. <body>
  77.   <h1>Simple calculator using JS</h1>
  79.   <div id="calculator">
  80.     <div id="screen">
  81.       <input inputmode="numeric" id="input">
  82.       </input>
  83.     </div>
  85.     <div id="buttonsGrid">
  86.       <div id="cButton" class="singleButton">C
  87.       </div>
  88.       <div id="negativePositiveButton" class="singleButton">+/-
  89.       </div>
  90.       <div id="percentageButton" class="singleButton">%
  91.       </div>
  92.       <div id="divisionButton" class="singleButton">÷
  93.       </div>
  95.       <div id="7Button" class="singleButton numericButton">7</div>
  96.       <div id="8Button" class="singleButton numericButton">8</div>
  97.       <div id="9Button" class="singleButton numericButton">9</div>
  98.       <div id="xButton" class="singleButton">x</div>
  100.       <div id="4Button" class="singleButton numericButton">4</div>
  101.       <div id="5Button" class="singleButton numericButton">5</div>
  102.       <div id="6Button" class="singleButton numericButton">6</div>
  103.       <div id="minusButton" class="singleButton">-</div>
  105.       <div id="1Button" class="singleButton numericButton">1</div>
  106.       <div id="2Button" class="singleButton numericButton">2</div>
  107.       <div id="3Button" class="singleButton numericButton">3</div>
  108.       <div id="plusButton" class="singleButton">+</div>
  110.       <div id="0Button" class="singleButton numericButton">0</div>
  111.       <div id="dotButton" class="singleButton numericButton">.</div>
  112.       <div id="equalButton" class="singleButton">=</div>
  114.     </div>
  115.   </div>
  117.   <script>
  119.       
  120.   const inputScreen = document.getElementById('input');
  121.   
  122.   const cButton = document.getElementById('cButton');
  123.   const MoodButton = document.getElementById('negativePositiveButton');
  124.   const percentageButton = document.getElementById('percentageButton');
  125.   
  126.   const divisionButton = document.getElementById('divisionButton');
  127.   const xButton = document.getElementById('xButton');
  128.   const minusButton = document.getElementById('minusButton');
  129.   const plusButton = document.getElementById('plusButton');
  130.   const equalButton = document.getElementById('equalButton');
  131.   
  132.   
  133.   
  134.   const numericButtonArr = [...document.getElementsByClassName('numericButton')];
  135.   const operationButtonArr = [xButton, minusButton, plusButton];
  136.   
  137.   //button's events
  138.   cButton.addEventListener('click', clearData);
  139.   numericButtonArr.forEach(numericButton => {
  140.     numericButton.addEventListener('click', displayNumbers);
  141.   });
  142.   operationButtonArr.forEach(operationButton => {
  143.     operationButton.addEventListener('click', clearForSecondNumber);
  144.   });
  145.   divisionButton.addEventListener('click', handleDivision);
  146.   MoodButton.addEventListener('click', changeMood);
  147.   percentageButton.addEventListener('click', calculatePercentage);
  148.   equalButton.addEventListener('click', performOperation);
  149.   
  150.   //variables
  151.   let currentNumber = 0;
  152.   let firstNumber = 0;
  153.   let selectedOperation = '';
  154.   let displayValue = '';
  155.   
  156.   let secondNumber = '';
  157.   
  158.   //Clear all data for C button press
  159.   function clearData() {
  160.     inputScreen.value = '';
  161.     currentNumber = 0;
  162.     displayValue = '';
  163.     firstNumber = 0;
  164.     selectedOperation = '';
  165.   }
  166.   
  167.   //display numeric and dot buttons press on display
  168.   function displayNumbers() {
  169.     const value = this.textContent;
  170.   
  171.     if (value === '.') {
  172.       // preventing dot duplication
  173.       if (!displayValue.includes('.')) {
  174.         displayValue += value;
  175.         inputScreen.value = displayValue;
  176.       }
  177.     } else {
  178.         displayValue += value;
  179.         inputScreen.value = displayValue;
  180.     }
  181.   
  182.     currentNumber = parseFloat(displayValue);
  183.   }
  184.   
  185.   //convert - to + and + to-
  186.   function changeMood(){
  187.     currentNumber = currentNumber * (-1); 
  188.     displayValue = currentNumber;
  189.     inputScreen.value = displayValue;
  190.   }
  191.   
  192.   //Calculate %
  193.   function calculatePercentage(){
  194.     currentNumber = currentNumber / (100);  
  195.     displayValue = currentNumber;
  196.     inputScreen.value = displayValue;
  197.   }
  198.   
  199.   //for +,- and x. for division didnt work here :(
  200.   function clearForSecondNumber() {
  201.     selectedOperation = this.textContent;
  202.     inputScreen.value = '';
  203.     displayValue = '';
  204.     firstNumber = currentNumber;
  205.   }
  206.   
  207.   
  208.   // Function to handle the division operation
  209.   function handleDivision() {
  210.     selectedOperation = '/';
  211.     inputScreen.value = '';
  212.     displayValue = '';
  213.     firstNumber = currentNumber;
  214.   }
  215.   
  216.   function performOperation() {
  217.     secondNumber = currentNumber;
  218.     let result;
  219.   
  220.     if (selectedOperation === 'x') {
  221.       result = firstNumber * secondNumber;
  222.     } else if (selectedOperation === '/') {
  223.       result = firstNumber / secondNumber;
  224.     } else if (selectedOperation === '-') {
  225.       result = firstNumber - secondNumber;
  226.     } else if (selectedOperation === '+') {
  227.       result = firstNumber + secondNumber;
  228.     }
  229.   
  230.     inputScreen.value = result;
  231.     currentNumber = result;
  232.     firstNumber = result;
  233.     displayValue = '';
  236. <details>
  237. <summary>英文:</summary>
  239. I&#39;m learning to code, this is just an exercise. any operation resulting in negative number will display wrong, but console.logs will display right.
  240. why is that?

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>replit</title>
<style>

#calculator{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
max-width:400px;
min-width: 300px;
background-color: green;
}

#screen{
width: 100%;
aspect-ratio: 4/1.5;
background-color: rgba(0, 0, 0, 0.8);
}

#input{
width:90%;
height:90%;
background-color:rgba(0, 0, 0, 0);
color:white;
font-size: 15vw;
direction: rtl;
font-family: Helvetica, sans-serif;
}

#buttonsGrid{
width: 100%;
aspect-ratio: 4/5;
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(5, 1fr);
justify-content: center;
font-size: 5vw;
color:white;
background-color: gray;
font-family: Helvetica, sans-serif;
}

.singleButton{
border: solid;
border-color: black;
border-width: 1px;
display: flex;
align-items: center;
justify-content: center;

}

[id="0Button"] {
grid-column: span 2;
}

#equalButton, #plusButton, #minusButton, #xButton, #divisionButton{
background-color: orange;
}

#cButton, #negativePositiveButton, #percentageButton {
background-color: rgba(0, 0, 0, 0.3);
}

</style>

</head>

<body>

<h1>Simple calculator using JS</h1>

<div id="calculator">
<div id="screen">
<input inputmode="numeric" id="input">
</input>
</div>

  1. &lt;div id=&quot;buttonsGrid&quot;&gt;
  2. &lt;div id=&quot;cButton&quot; class=&quot;singleButton&quot;&gt;C
  3. &lt;/div&gt;
  4. &lt;div id=&quot;negativePositiveButton&quot; class=&quot;singleButton&quot;&gt;+/-
  5. &lt;/div&gt;
  6. &lt;div id=&quot;percentageButton&quot; class=&quot;singleButton&quot;&gt;%
  7. &lt;/div&gt;
  8. &lt;div id=&quot;divisionButton&quot; class=&quot;singleButton&quot;&gt;&#247;
  9. &lt;/div&gt;
  10. &lt;div id=&quot;7Button&quot; class=&quot;singleButton numericButton&quot;&gt;7&lt;/div&gt;
  11. &lt;div id=&quot;8Button&quot; class=&quot;singleButton numericButton&quot;&gt;8&lt;/div&gt;
  12. &lt;div id=&quot;9Button&quot; class=&quot;singleButton numericButton&quot;&gt;9&lt;/div&gt;
  13. &lt;div id=&quot;xButton&quot; class=&quot;singleButton&quot;&gt;x&lt;/div&gt;
  14. &lt;div id=&quot;4Button&quot; class=&quot;singleButton numericButton&quot;&gt;4&lt;/div&gt;
  15. &lt;div id=&quot;5Button&quot; class=&quot;singleButton numericButton&quot;&gt;5&lt;/div&gt;
  16. &lt;div id=&quot;6Button&quot; class=&quot;singleButton numericButton&quot;&gt;6&lt;/div&gt;
  17. &lt;div id=&quot;minusButton&quot; class=&quot;singleButton&quot;&gt;-&lt;/div&gt;
  18. &lt;div id=&quot;1Button&quot; class=&quot;singleButton numericButton&quot;&gt;1&lt;/div&gt;
  19. &lt;div id=&quot;2Button&quot; class=&quot;singleButton numericButton&quot;&gt;2&lt;/div&gt;
  20. &lt;div id=&quot;3Button&quot; class=&quot;singleButton numericButton&quot;&gt;3&lt;/div&gt;
  21. &lt;div id=&quot;plusButton&quot; class=&quot;singleButton&quot;&gt;+&lt;/div&gt;
  22. &lt;div id=&quot;0Button&quot; class=&quot;singleButton numericButton&quot;&gt;0&lt;/div&gt;
  23. &lt;div id=&quot;dotButton&quot; class=&quot;singleButton numericButton&quot;&gt;.&lt;/div&gt;
  24. &lt;div id=&quot;equalButton&quot; class=&quot;singleButton&quot;&gt;=&lt;/div&gt;
  25. &lt;/div&gt;

</div>

<script >

const inputScreen = document.getElementById('input');

const cButton = document.getElementById('cButton');
const MoodButton = document.getElementById('negativePositiveButton');
const percentageButton = document.getElementById('percentageButton');

const divisionButton = document.getElementById('divisionButton');
const xButton = document.getElementById('xButton');
const minusButton = document.getElementById('minusButton');
const plusButton = document.getElementById('plusButton');
const equalButton = document.getElementById('equalButton');

const numericButtonArr = [...document.getElementsByClassName('numericButton')];
const operationButtonArr = [xButton, minusButton, plusButton];

//button's events
cButton.addEventListener('click', clearData);
numericButtonArr.forEach(numericButton => {
numericButton.addEventListener('click', displayNumbers);
});
operationButtonArr.forEach(operationButton => {
operationButton.addEventListener('click', clearForSecondNumber);
});
divisionButton.addEventListener('click', handleDivision);
MoodButton.addEventListener('click', changeMood);
percentageButton.addEventListener('click', calculatePercentage);
equalButton.addEventListener('click', performOperation);

//variables
let currentNumber = 0;
let firstNumber = 0;
let selectedOperation = '';
let displayValue = '';

let secondNumber = '';

//Clear all data for C button press
function clearData() {
inputScreen.value = '';
currentNumber = 0;
displayValue = '';
firstNumber = 0;
selectedOperation = '';
}

//display numeric and dot buttons press on display
function displayNumbers() {
const value = this.textContent;

  1. if (value === &#39;.&#39;) {
  2. // preventing dot duplication
  3. if (!displayValue.includes(&#39;.&#39;)) {
  4. displayValue += value;
  5. inputScreen.value = displayValue;
  6. }
  7. } else {
  8. displayValue += value;
  9. inputScreen.value = displayValue;
  10. }
  11. currentNumber = parseFloat(displayValue);

}

//convert - to + and + to-
function changeMood(){
currentNumber = currentNumber * (-1);
displayValue = currentNumber;
inputScreen.value = displayValue;
}

//Calculate %
function calculatePercentage(){
currentNumber = currentNumber / (100);
displayValue = currentNumber;
inputScreen.value = displayValue;
}

//for +,- and x. for division didnt work here 为什么负数在这个简单的HTML和JavaScript计算器中显示为”5-“而不是”-5″？
function clearForSecondNumber() {
selectedOperation = this.textContent;
inputScreen.value = '';
displayValue = '';
firstNumber = currentNumber;
}

// Function to handle the division operation
function handleDivision() {
selectedOperation = '/';
inputScreen.value = '';
displayValue = '';
firstNumber = currentNumber;
}

function performOperation() {
secondNumber = currentNumber;
let result;

  1. if (selectedOperation === &#39;x&#39;) {
  2. result = firstNumber * secondNumber;
  3. } else if (selectedOperation === &#39;/&#39;) {
  4. result = firstNumber / secondNumber;
  5. } else if (selectedOperation === &#39;-&#39;) {
  6. result = firstNumber - secondNumber;
  7. } else if (selectedOperation === &#39;+&#39;) {
  8. result = firstNumber + secondNumber;
  9. }
  10. inputScreen.value = result;
  11. currentNumber = result;
  12. firstNumber = result;
  13. displayValue = &#39;&#39;;

}

</script>

</body>

</html>

  2. </details>
  3. # 答案1
  4. **得分**: 8
  5. 因为您通过设置 `direction: rtl;` 将书写方向设置为从右到左（RTL），这对像阿拉伯语这样的语言是有道理的。
  6. 也许您只是想将文本右对齐（而不是改变其方向），在这种情况下，您需要使用 `text-align: right;`。
  7. <details>
  8. <summary>英文:</summary>
  9. Because you set the writing direction to RTL (right-to-left) by setting `direction: rtl;`. This makes sense for languages like Arabic. 
  10. Perhaps you wanted to simply right-align the text (without reversing its direction), in this case you need `text-align: right;`. 
  11. </details>

huangapple
  • 本文由 发表于 2023年7月5日 01:10:42
  • 转载请务必保留本文链接：https://go.coder-hub.com/76614697.html
  • calculator
  • html
  • javascript
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定