-3

Straight to the point, my question is, How to put a if else statement inside the copy_Power_Plant() to detect its value is Yes,No or Unclear. The way i do, is not working. My code is at below.

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

ignore here, i need to type many details so that stackoverflow allow me to post. this is so annoying. 

<!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>
Jt Tan
  • 175
  • 3
  • 12
  • https://stackoverflow.com/questions/3586775/what-is-the-correct-way-to-check-for-string-equality-in-javascript – John Joe May 15 '18 at 03:27
  • 4
    `If..else statement inside javascript function not working` - well, you have no `if..else` you only have `if` so, no wonder `if..else` isn't working – Jaromanda X May 15 '18 at 03:28
  • @JaromandaX that's not the point, dont be so picky.. i wrote the if statement, and its not working.. so i didnt wrote the else. – Jt Tan May 15 '18 at 03:44
  • clearly `pp` isn't `Yes` -and you accepted an answer that says **exactly the same thing** – Jaromanda X May 15 '18 at 04:23

3 Answers3

0

Use JavaScript's elseif statement to cover all three conditions:

if (pp == "Yes") {
    //Yes code
} else if (pp == "No") {
    //No code
} else {
    //Unclear code (if by unclear you meant undefined)
}
Tim Schorr
  • 1
  • 3
0

You don't have else statements in your code. Therefore it is working only for the if statement. Implement else if and else statements to cover all 3 instances.

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
  • 1,697
  • 2
  • 14
  • 19
  • This is what i want, thankyou @Kavindra... like your answer, straight to the point, better than those who talk grandma story and doesnt help. – Jt Tan May 15 '18 at 03:46
0

to add on above answer, you can wanna use a switch-case statment. like this:

       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;
           }
       }
Yosef Tukachinsky
  • 5,570
  • 1
  • 13
  • 29