如果javascript函数内的.else语句不起作用

时间:2018-05-15 03:21:31

标签: javascript html function if-statement

直截了当,我的问题是,如何在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>

3 个答案:

答案 0 :(得分:0)

使用JavaScript的elseif语句来涵盖所有三个条件:

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

答案 1 :(得分:0)

您的代码中没有其他声明。因此它仅适用于if语句。实施else ifelse语句以涵盖所有3个实例。

&#13;
&#13;
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 =''
    }
}
&#13;
<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>
                  
&#13;
&#13;
&#13;

答案 2 :(得分:0)

要添加上述答案,您可以使用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;
           }
       }