in a callBack function if Statement is not working;-CodePudding

Here This part of my code is not working i don't know what is the problem, and why it is not working. plese help me. this is the part where my code is not working, i tried ths similar code inside code , not exactly this one but almost similar one it worked perfectly, by this is not working.

function transform(){
   if ( value1.innerText== "Feet" && value2.innerText== "Meter"){
             
   } else if( value1.innerText=="Feet" && value2.innerText== "Meter"){
    console.log("hello")
   }
   else if( value1.innerText=="Meter" && value2.innerText==="Feet"){
    console.log("hello")
   }
}    `

//LELBEL VALE SELECTION

const value1= document.querySelector(".value1");
const value2= document.querySelector(".value2");
console.log(value1.innerText, value2.innerText);

// VALUE INPUT SELECTION

const value1Input= document.querySelector(".value1-input");
const value2Input= document.querySelector(".value2-input");

//CONVERTING THIS VALUE INTO NUMBER



// Selectiong the button chhose
const choice= document.querySelector(".pickup");
const convert= document.querySelector(".convert");

console.log(choice.value);
// USING CHANGE EVENT TO CHANGE THE LEBEL VALUE
 choice.addEventListener("change", function(){

    if (choice.value==="Feet-to-Meter"){
        value1.innerText= "Feet:";
        value2.innerText= "Meter:";
    }
    if (choice.value==="Meter-to-Feet"){
        value1.innerText= "Meter:";
        value2.innerText= "Feet:";
    }
})

convert.addEventListener("click", function(e){
    e.preventDefault();
    return  transform();
       
})

//GRABING THE LEBEL VALUE AND USING THE CONVERT BUTTON TO GET THE RESULT

function transform(){
    if ( value1.innerText== "Feet" && value2.innerText== "Meter"){
                 
        console.log("hello");
       } else if( value1.innerText=="Feet" && value2.innerText== "Meter"){
        console.log("hello")
       }
       else if( value1.innerText=="Meter" && value2.innerText==="Feet"){
        console.log("hello")
       }
    }

.feet-to-meter{
    width:40vw;
    height:auto;
    background:#e8c245;
    overflow:hidden;
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -80%);
  }
  legend{
    font-family:arabic-indic;
    font-weight:900;
    font-size:1.5rem;
    padding-top: 10px;
   
  }
  form{
    height:100%;
  }
  input{
    padding:10px;
    font-size:1.1rem;
   
  }
  lebel{
   
    font-size: 2rem;
  }

  .variables{
    display: flex;
    align-items: cneter;
  }
  fieldset{
    border:2px solid lightcyan;
    height:65%;
    width:50%;
  }
  .pick{
    width:50%;
    height: 100%;
  }
  select{
    padding:1.2rem;
    font-size:1rem;
  }
  
  .button-group{
    display:flex;
    justify-content:space-around;
    width:80%;
    height:18%;
    align-items:center;
    padding-bottom:10px;
   
  }
  
  .button-group> button{
   padding: 5px 15px;
    
    
  }
  
  @media only screen and (min-width: 1328px){
    body{
      background-color: rgb(0, 0, 0);
    }
  }

  @media only screen and (max-width: 999px){
    body{
        background-color: aquamarine;
    }
    .feet-to-meter{
        width:100vw;
        height:300px;
        background:#e8c245;
        overflow:hidden;
        position:absolute;
        top:90%;
        left:50%;
      
      }
  }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="conversition.css" >
</head>
<body>
    <div > 
        
        <form>
        
      <div > 
        
        <fieldset>
          <legend > FEET TO METER </legend>
        
          <lebel style="margin-right:33px;" > Feet </lebel> <input  type= "number"> <br/>
           
        <lebel > Meter </lebel> <input style="margin-bottom:10px;"  type= "number">
        </fieldset>
        
        <div >
             
         <h2> Format 
            <select >
              <option>  PICK YOUR FORMAT  </option>    
               <option value="Feet-to-Meter"> Feet To Meter  </option> 
               <option value="Meter-to-Feet">  Meter  To Feet </option>                    
            </select>
         </h2>
        </div>

        </div>
        
        <div > 
            <button > CONVERT </button>
            <button > METER TO FEET </button>
        </div>
         
       
    </form>
</div>

    <script src="conversion.js"></script>
</body>
</html>

CodePudding user response：

As you can see there are spaces in the innerText of these selectors

const value1= document.querySelector(".value1");
const value2= document.querySelector(".value2");

<lebel style="margin-right:33px;" > Feet </lebel> 
           
<lebel > Meter </lebel>

CodePudding user response：

You need to clear out the whitespaces in the innerText of your selectors.

To do this, just add the .trim() method in your transform() function to clear out the whitespaces.

Old Function

function transform(){
if ( value1.innerText== "Feet" && value2.innerText== "Meter"){
             
    console.log("hello");
   } else if( value1.innerText=="Feet" && value2.innerText== "Meter"){
    console.log("hello")
   }
   else if( value1.innerText=="Meter" && value2.innerText==="Feet"){
    console.log("hello")
   }
}

New and Improved Function.

    function transform() {
        if (value1.innerText.trim().includes("Feet") && value2.innerText.trim().includes("Meter")) {
            console.log("hello");
        }
        else if (value1.innerText.trim().includes("Feet") && value2.innerText.trim().includes("Meter")) {
            console.log("feet clicked")
        }
        else if (value1.innerText.trim().includes("Meter")  && value2.innerText.trim().includes("Feet")) {
            console.log("hello")
        }
    }

I used the includes() method cos your selectors also contains an extra : character which could cause conflict when checking string equality.

More on the .trim() method Trim Method W3School

And .include() Include Method Javascript