I'm a begginer in JavaScript and while I was working with an if/else conditional something happened and I can't still understand it. My code is simple: A prompt asks if user wants to do an ADDITION or a SUBSTRACTION, then the following 2 prompts ask for a value and based on the user's answers, the code executes the addition or substraction respectively, by using the values provided.
The problem comes when user clicks on 'cancel' or 'ok' button on the prompt, my code is intended to do certain actions if any of these buttons is clicked, and it does, but it also does another action that I don't want it to execute.
If user clicks either 'cancel' or 'ok', the code should alert the following message and finish the execution:
alert('No option entered, aborting operation!')
The code alerts that message successfully, but it also alerts another message that is intended to be displayed only if user enters a different value than SUMA or RESTA. The message is this:
alert('No valid option entered, aborting operation!');
Then I modified the code and it is working as expected, but according to me, the first version of the code should work without any issue. The goal is to display only the first message if either 'cancel' or 'ok' buttons are clicked and finish the execution, not both messages and finish the execution.
I hope to be clear enough, if I'm not please let me know and I can explain with more detail if necessary. Can anybody explain to me what's the problem here?
Here are the snippets:
FIRST VERSION (not working as expected):
let opText = document.getElementById('opText');
let opOperation = prompt('Enter SUMA or RESTA');
let opSuma1;
let opSuma2;
let opStatus = true;
let opResult;
if(opOperation === null || opOperation === ""){
alert('No option entered, aborting operation!'); **//THE CODE DISPLAYS THIS MESSAGE IF EITHER 'CANCEL' OR 'OK' BUTTONS ARE CLICKED**
opStatus = false;
}
else {
opOperation = opOperation.trim().toLowerCase();
}
function addition(){
opSuma1 = prompt('Enter first value:');;
opSuma2 = prompt('Enter second value:');
opSuma1 = Number(opSuma1);
opSuma2 = Number(opSuma2);
opResult = opSuma1 + opSuma2;
opText.textContent = `Your result was a ADDITION and it is ${opResult}`;
}
function substraction(){
opSuma1 = prompt('Enter first value:');;
opSuma2 = prompt('Enter second value:');
opSuma1 = Number(opSuma1);
opSuma2 = Number(opSuma2);
opResult = opSuma1 - opSuma2;
opText.textContent = `Your result was a SUBSTRACTION and it is ${opResult}`;
}
if(opStatus && opOperation === 'suma'){
addition();
}
else if(opStatus && opOperation === 'resta'){
substraction();
}
**else {
alert('No valid option entered, aborting operation!'); **// BUT IT ALSO DISPLAYS THIS MESSAGE**
}**
SECOND VERSION (working as expected)
let opText = document.getElementById('opText');
let opOperation = prompt('Enter SUMA or RESTA');
let opSuma1;
let opSuma2;
let opStatus = true;
let opResult;
if(opOperation === null || opOperation === ""){
alert('No option entered, aborting operation!');
opStatus = false;
}
else {
opOperation = opOperation.trim().toLowerCase();
}
function addition(){
opSuma1 = prompt('Enter first value:');;
opSuma2 = prompt('Enter second value:');
opSuma1 = Number(opSuma1);
opSuma2 = Number(opSuma2);
opResult = opSuma1 + opSuma2;
opText.textContent = `Your result was a ADDITION and it is ${opResult}`;
}
function substraction(){
opSuma1 = prompt('Enter first value:');;
opSuma2 = prompt('Enter second value:');
opSuma1 = Number(opSuma1);
opSuma2 = Number(opSuma2);
opResult = opSuma1 - opSuma2;
opText.textContent = `Your result was a SUBSTRACTION and it is ${opResult}`;
}
if (opStatus) {
if (opOperation === 'suma') {
addition();
} else if (opOperation === 'resta') {
substraction();
} else {
alert('No valid option entered, aborting operation!');
}
}
You broke the conditions into two unrelated of branches.
The first one:
if(opOperation === null || opOperation === ""){
alert('No option entered, aborting operation!'); **//THE CODE DISPLAYS THIS MESSAGE IF EITHER 'CANCEL' OR 'OK' BUTTONS ARE CLICKED**
opStatus = false;
}
else {
opOperation = opOperation.trim().toLowerCase();
}
When the first one ends, it doesn’t stop the program, so after the else, it continues onto the next one.
The seconds one:
if(opStatus && opOperation === 'suma'){
addition();
}
else if(opStatus && opOperation === 'resta'){
substraction();
}
**else {
alert('No valid option entered, aborting operation!'); **// BUT IT ALSO DISPLAYS THIS MESSAGE**
}**
If the first if was true, then the remaining two must be false since opStatus has already been established to be nothing. Therefore, it goes to the else statement (which is evaluated if nothing else in the if-branch was true) and executes it.
If you nested them in by putting the second one inside the else of the first, it would solve the problem.
if(opOperation === null || opOperation === ""){
alert('No option entered, aborting operation!'); **//THE CODE DISPLAYS THIS MESSAGE IF EITHER 'CANCEL' OR 'OK' BUTTONS ARE CLICKED**
opStatus = false;
}
else {
opOperation = opOperation.trim().toLowerCase();
if(opStatus && opOperation === 'suma'){
addition();
}
else if(opStatus && opOperation === 'resta'){
substraction();
}
**else {
alert('No valid option entered, aborting operation!'); **// BUT IT ALSO DISPLAYS THIS MESSAGE**
}**
}
You use this same principle in your second solution:
if (opStatus) {
if (opOperation === 'suma') {
addition();
} else if (opOperation === 'resta') {
substraction();
} else {
alert('No valid option entered, aborting operation!');
}
}
In that example, you evaluate if opStatus is anything at all. I suggest combining the first and second if-branches from that example and removing opStatus as it doesn’t do anything. Instead use if (opOperation). This works because there really is no such thing as true or false. Anything that loosely equals zero will be considered false, and false is zero. "" is zero, and null is equal to nothing except null, but it is treated as false in comparisons, despite having no way to convert.
if (opOperation) {
opOperation = opOperation.trim().toLowerCase();
if (opOperation === 'suma') {
addition();
} else if (opOperation === 'resta') {
substraction();
} else {
alert('No valid option entered, aborting operation!');
}
}
else {
alert('No option entered, aborting operation!');
}
let opText = document.getElementById('opText');
let opOperation = prompt('Enter SUMA or RESTA');
let opSuma1;
let opSuma2;
let opResult;
function addition(){
opSuma1 = prompt('Enter first value:');;
opSuma2 = prompt('Enter second value:');
opSuma1 = Number(opSuma1);
opSuma2 = Number(opSuma2);
opResult = opSuma1 + opSuma2;
opText.textContent = `Your result was a ADDITION and it is ${opResult}`;
}
function substraction(){
opSuma1 = prompt('Enter first value:');;
opSuma2 = prompt('Enter second value:');
opSuma1 = Number(opSuma1);
opSuma2 = Number(opSuma2);
opResult = opSuma1 - opSuma2;
opText.textContent = `Your result was a SUBSTRACTION and it is ${opResult}`;
}
if (opOperation) {
opOperation = opOperation.trim().toLowerCase();
if (opOperation === 'suma') {
addition();
} else if (opOperation === 'resta') {
substraction();
} else {
alert('No valid option entered, aborting operation!');
}
}
else {
alert('No option entered, aborting operation!');
}Let me know if I made an error somewhere (I know my code works).