javascript函数中的if..else语句不起作用答案

【问题标题】：If..else statement inside javascript function not workingjavascript函数中的if..else语句不起作用
【发布时间】：2018-05-15 03:21:31
【问题描述】：

直截了当，我的问题是，如何在 copy_Power_Plant() 中放置 if else 语句以检测其值为 Yes、No 或 Unclear。我这样做的方式是行不通的。我的代码在下面。

.................................................. .....................

忽略这里，我需要输入许多详细信息，以便 stackoverflow 允许我发布。这太烦人了。

<!DOCTYPE html>
<html>
<body>
<script>
function copy_Type_Mount() {
document.getElementById("label_Type_Mount").innerHTML = document.getElementById("Type_Mount").value+" AC Units "}

function copy_No_Units() {
document.getElementById("label_No_Units").innerHTML = document.getElementById("No_Units").value}


function copy_Size(){
document.getElementById("label_Size").innerHTML = document.getElementById("Size").value+ " HP "}




//below this function is the problem

function copy_Power_Plant(){
var pp=document.getElementById("Power_Plant").value;
if(pp=='Yes'){
document.getElementById("label_Power_Plant").innerHTML ='+ Power Plant'}}

</script>


<font id="label_No_Units"></font>&nbsp;<font id="label_Type_Mount"></font><font id="label_Size"></font><font id="label_Power_Plant"></font><br>
<p1>Type of Mount:</p1><br>
<select id="Type_Mount" name="Type_Mount" onchange="copy_No_Units();copy_Type_Mount();copy_Size();copy_Power_Plant();"  required>
<option value="Wall Mount">Wall Mount</option>
<option value="Ceiling Mount">Ceiling Mount</option>
</select><br><br>


<p1>Number of Units:</p1><br>
<select id="No_Units" name="No_Units" onchange="copy_No_Units();copy_Type_Mount();copy_Size();copy_Power_Plant();" required>
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="4">4</option>
                    <option value="5">5</option>
                    <option value="6">6</option>
                    <option value="7">7</option>
                    <option value="8">8</option>
                    <option value="9">9</option>
</select>
                    <br>
                    <br>

<p1>Size (H/P):</p1><br>
<select id="Size" name="Size" onchange="copy_No_Units();copy_Type_Mount();copy_Size();copy_Power_Plant();" required>
                    <option value="1">1</option>
                    <option value="1.5">1.5</option>
                    <option value="2">2</option>
                    <option value="2.5">2.5</option>
</select>
                    <br>
                    <br>

<p1>Power Plant Installation Required?</p1><br>
<select id="Power_Plant" name="Power_Plant" onchange="copy_No_Units();copy_Type_Mount();copy_Size();copy_Power_Plant();" required>
                    <option value="Yes">Yes</option>
                    <option value="No">No</option>
                    <option value="Unclear">Unclear</option>
</select>
                    <br>
                    <br>            
</body>
</html>

【问题讨论】：

stackoverflow.com/questions/3586775/…
If..else statement inside javascript function not working - 好吧，你没有if..else 你只有if 所以，难怪if..else 不起作用
@JaromandaX 这不是重点，不要那么挑剔.. 我写了 if 语句，但它不起作用.. 所以我没有写 else。
显然 pp 不是 Yes - 你接受了一个回答 完全相同

标签： javascript html function if-statement

【解决方案1】：

您的代码中没有 else 语句。因此它仅适用于 if 语句。实施 else if 和 else 语句以覆盖所有 3 个实例。

function copy_Type_Mount() {
document.getElementById("label_Type_Mount").innerHTML = document.getElementById("Type_Mount").value+" AC Units "}

function copy_No_Units() {
document.getElementById("label_No_Units").innerHTML = document.getElementById("No_Units").value}


function copy_Size(){
document.getElementById("label_Size").innerHTML = document.getElementById("Size").value+ " HP "}

//below this function is the problem

function copy_Power_Plant(){
    var pp=document.getElementById("Power_Plant").value;
     if(pp === 'Yes'){
        document.getElementById("label_Power_Plant").innerHTML ='+ Power Plant'
    }
    else if(pp === 'No') {
        document.getElementById("label_Power_Plant").innerHTML ='+ No Plant'
    }
    else {
        document.getElementById("label_Power_Plant").innerHTML =''
    }
}

<font id="label_No_Units"></font>&nbsp;<font id="label_Type_Mount"></font><font id="label_Size"></font><font id="label_Power_Plant"></font><br>
<p1>Type of Mount:</p1><br>
<select id="Type_Mount" name="Type_Mount" onchange="copy_No_Units();copy_Type_Mount();copy_Size();copy_Power_Plant();"  required>
<option value="Wall Mount">Wall Mount</option>
<option value="Ceiling Mount">Ceiling Mount</option>
</select><br><br>

<p1>Number of Units:</p1><br>
<select id="No_Units" name="No_Units" onchange="copy_No_Units();copy_Type_Mount();copy_Size();copy_Power_Plant();" required>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
</select>
<br>
<br>

<p1>Size (H/P):</p1><br>
<select id="Size" name="Size" onchange="copy_No_Units();copy_Type_Mount();copy_Size();copy_Power_Plant();" required>
    <option value="1">1</option>
    <option value="1.5">1.5</option>
    <option value="2">2</option>
    <option value="2.5">2.5</option>
</select>
<br>
<br>

<p1>Power Plant Installation Required?</p1><br>
<select id="Power_Plant" name="Power_Plant" onchange="copy_No_Units();copy_Type_Mount();copy_Size();copy_Power_Plant();" required>
    <option value="Yes">Yes</option>
    <option value="No">No</option>
    <option value="Unclear">Unclear</option>
</select>

【讨论】：

这就是我想要的，谢谢@Kavindra...喜欢你的回答，直截了当，比那些讲奶奶故事但没有帮助的人更好。

【解决方案2】：

使用 JavaScript 的 elseif 语句覆盖所有三个条件：

if (pp == "Yes") {
    //Yes code
} else if (pp == "No") {
    //No code
} else {
    //Unclear code (if by unclear you meant undefined)
}

【讨论】：

【解决方案3】：

要添加上述答案，您可以使用switch-case 声明。像这样：

       function copy_Power_Plant() {
           var pp = document.getElementById("Power_Plant").value;
           switch (pp) {

               case 'Yes':
                   document.getElementById("label_Power_Plant").innerHTML = '+ Power Plant';
                   break;
               case 'No':
                   document.getElementById("label_Power_Plant").innerHTML = '+ No Plant';
                   break;
               case 'Unclear':
                   document.getElementById("label_Power_Plant").innerHTML = '';
                   break;
           }
       }

【讨论】：