title: in a callBack function if Statement is not working;
body: <p>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.</p>
  <pre><code>function transform(){
     if ( value1.innerText== &quot;Feet&quot; &amp;&amp; value2.innerText== &quot;Meter&quot;){
               
     } else if( value1.innerText==&quot;Feet&quot; &amp;&amp; value2.innerText== &quot;Meter&quot;){
      console.log(&quot;hello&quot;)
     }
     else if( value1.innerText==&quot;Meter&quot; &amp;&amp; value2.innerText===&quot;Feet&quot;){
      console.log(&quot;hello&quot;)
     }
  }    `
  </code></pre>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>//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" &amp;&amp; value2.innerText== "Meter"){
                   
          console.log("hello");
         } else if( value1.innerText=="Feet" &amp;&amp; value2.innerText== "Meter"){
          console.log("hello")
         }
         else if( value1.innerText=="Meter" &amp;&amp; value2.innerText==="Feet"){
          console.log("hello")
         }
      }    </code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.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&gt; 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%;
        
        }
    }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
      &lt;title&gt;Document&lt;/title&gt;
      &lt;link rel="stylesheet" href="conversition.css" class="css"&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div class="feet-to-meter"&gt; 
          
          &lt;form&gt;
          
        &lt;div class="variables"&gt; 
          
          &lt;fieldset&gt;
            &lt;legend class="legend"&gt; FEET TO METER &lt;/legend&gt;
          
            &lt;lebel style="margin-right:33px;" class="value1"&gt; Feet &lt;/lebel&gt; &lt;input class="value1-input" type= "number"&gt; &lt;br/&gt;
             
          &lt;lebel class="value2"&gt; Meter &lt;/lebel&gt; &lt;input style="margin-bottom:10px;" class="value2-input" type= "number"&gt;
          &lt;/fieldset&gt;
          
          &lt;div class="pick"&gt;
               
           &lt;h2&gt; Format 
              &lt;select class="pickup"&gt;
                &lt;option&gt;  PICK YOUR FORMAT  &lt;/option&gt;    
                 &lt;option value="Feet-to-Meter"&gt; Feet To Meter  &lt;/option&gt; 
                 &lt;option value="Meter-to-Feet"&gt;  Meter  To Feet &lt;/option&gt;                    
              &lt;/select&gt;
           &lt;/h2&gt;
          &lt;/div&gt;
  
          &lt;/div&gt;
          
          &lt;div class="button-group"&gt; 
              &lt;button class="convert"&gt; CONVERT &lt;/button&gt;
              &lt;button class="meter-to-feet"&gt; METER TO FEET &lt;/button&gt;
          &lt;/div&gt;
           
         
      &lt;/form&gt;
  &lt;/div&gt;
  
      &lt;script src="conversion.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>