英文:
Why does negative numbers display like "5-" instead of "-5" in this simple calculator on HTML and javaScript?
问题
<!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>
<div id="buttonsGrid">
<div id="cButton" class="singleButton">C
</div>
<div id="negativePositiveButton" class="singleButton">+/-
</div>
<div id="percentageButton" class="singleButton">%
</div>
<div id="divisionButton" class="singleButton">÷
</div>
<div id="7Button" class="singleButton numericButton">7</div>
<div id="8Button" class="singleButton numericButton">8</div>
<div id="9Button" class="singleButton numericButton">9</div>
<div id="xButton" class="singleButton">x</div>
<div id="4Button" class="singleButton numericButton">4</div>
<div id="5Button" class="singleButton numericButton">5</div>
<div id="6Button" class="singleButton numericButton">6</div>
<div id="minusButton" class="singleButton">-</div>
<div id="1Button" class="singleButton numericButton">1</div>
<div id="2Button" class="singleButton numericButton">2</div>
<div id="3Button" class="singleButton numericButton">3</div>
<div id="plusButton" class="singleButton">+</div>
<div id="0Button" class="singleButton numericButton">0</div>
<div id="dotButton" class="singleButton numericButton">.</div>
<div id="equalButton" class="singleButton">=</div>
</div>
</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;
if (value === '.') {
// preventing dot duplication
if (!displayValue.includes('.')) {
displayValue += value;
inputScreen.value = displayValue;
}
} else {
displayValue += value;
inputScreen.value = displayValue;
}
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 :(
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;
if (selectedOperation === 'x') {
result = firstNumber * secondNumber;
} else if (selectedOperation === '/') {
result = firstNumber / secondNumber;
} else if (selectedOperation === '-') {
result = firstNumber - secondNumber;
} else if (selectedOperation === '+') {
result = firstNumber + secondNumber;
}
inputScreen.value = result;
currentNumber = result;
firstNumber = result;
displayValue = '';
<details>
<summary>英文:</summary>
I'm learning to code, this is just an exercise. any operation resulting in negative number will display wrong, but console.logs will display right.
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>
<div id="buttonsGrid">
<div id="cButton" class="singleButton">C
</div>
<div id="negativePositiveButton" class="singleButton">+/-
</div>
<div id="percentageButton" class="singleButton">%
</div>
<div id="divisionButton" class="singleButton">÷
</div>
<div id="7Button" class="singleButton numericButton">7</div>
<div id="8Button" class="singleButton numericButton">8</div>
<div id="9Button" class="singleButton numericButton">9</div>
<div id="xButton" class="singleButton">x</div>
<div id="4Button" class="singleButton numericButton">4</div>
<div id="5Button" class="singleButton numericButton">5</div>
<div id="6Button" class="singleButton numericButton">6</div>
<div id="minusButton" class="singleButton">-</div>
<div id="1Button" class="singleButton numericButton">1</div>
<div id="2Button" class="singleButton numericButton">2</div>
<div id="3Button" class="singleButton numericButton">3</div>
<div id="plusButton" class="singleButton">+</div>
<div id="0Button" class="singleButton numericButton">0</div>
<div id="dotButton" class="singleButton numericButton">.</div>
<div id="equalButton" class="singleButton">=</div>
</div>
</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;
if (value === '.') {
// preventing dot duplication
if (!displayValue.includes('.')) {
displayValue += value;
inputScreen.value = displayValue;
}
} else {
displayValue += value;
inputScreen.value = displayValue;
}
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 
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;
if (selectedOperation === 'x') {
result = firstNumber * secondNumber;
} else if (selectedOperation === '/') {
result = firstNumber / secondNumber;
} else if (selectedOperation === '-') {
result = firstNumber - secondNumber;
} else if (selectedOperation === '+') {
result = firstNumber + secondNumber;
}
inputScreen.value = result;
currentNumber = result;
firstNumber = result;
displayValue = '';
}
</script>
</body>
</html>
</details>
# 答案1
**得分**: 8
因为您通过设置 `direction: rtl;` 将书写方向设置为从右到左（RTL），这对像阿拉伯语这样的语言是有道理的。
也许您只是想将文本右对齐（而不是改变其方向），在这种情况下，您需要使用 `text-align: right;`。
<details>
<summary>英文:</summary>
Because you set the writing direction to RTL (right-to-left) by setting `direction: rtl;`. This makes sense for languages like Arabic.
Perhaps you wanted to simply right-align the text (without reversing its direction), in this case you need `text-align: right;`.
</details>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论