JavaScript 中的 if/else 条件行为

问题描述 投票：0回答：1

我是 JavaScript 初学者，当我使用 if/else 条件时，发生了一些事情，但我仍然无法理解它。我的代码很简单：一个提示询问用户是否想要进行加法或减法，然后接下来的两个提示询问一个值，并根据用户的答案，代码使用提供的值分别执行加法或减法。

当用户单击提示上的“取消”或“确定”按钮时，问题就出现了，我的代码旨在在单击这些按钮中的任何一个时执行某些操作，并且确实如此，但它也执行了我不执行的另一个操作不想让它执行。

如果用户单击“取消”或“确定”，代码应警告以下消息并完成执行：

alert('未输入选项，中止操作！')

代码成功提醒该消息，但它还会提醒另一条消息，该消息仅在用户输入与 SUMA 或 RESTA 不同的值时才显示。消息是这样的：

alert('未输入有效选项，中止操作！');

然后我修改了代码，它按预期工作，但根据我的说法，代码的第一个版本应该可以正常工作。目标是如果单击“取消”或“确定”按钮并完成执行，则仅显示第一条消息，而不是同时显示两条消息并完成执行。

我希望足够清楚，如果我不清楚，请告诉我，如有必要，我可以更详细地解释。有人可以向我解释一下这里出了什么问题吗？

以下是片段：

第一个版本（未按预期工作）：

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**
}**

第二版本（按预期工作）

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!');
     }
 }
javascript if-statement prompt
1个回答
0
投票

您将条件分解为两个不相关的分支。

第一个：

    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();
    }

当第一个结束时，它不会停止程序，因此在 else 之后，它会继续执行下一个。

第二个：

    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 为 true，则其余两个必定为 false，因为 opStatus 已被确定为空。因此，它转到 else 语句（如果 if 分支中没有其他内容为真，则对该语句进行评估）并执行它。

如果您通过将第二个嵌套在第一个的 else 中来嵌套它们，则可以解决问题。

    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**
        }**
    }

您在第二个解决方案中使用了相同的原理：

    if (opStatus) {
        if (opOperation === 'suma') {
            addition();
        } else if (opOperation === 'resta') {
            substraction();
        } else {
            alert('No valid option entered, aborting operation!');
        }
    }

在该示例中，您评估 opStatus 是否有任何意义。我建议合并该示例中的第一个和第二个 if 分支并删除 opStatus，因为它不执行任何操作。而是使用 

if (opOperation)
。这是有效的，因为确实不存在 
true
或 
false
这样的东西。任何松散等于零的值都将被视为错误，并且 
false
为零。 
""
为零，
null
除了
null
之外什么都不等于，但在比较中它被视为假，尽管没有办法转换。

    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!');
}

如果我在某个地方犯了错误，请告诉我（我知道我的代码有效）。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.