title: Why are my variables being alerted back to me as null?
body: <p>Why are my variables being alerted back to me as null?</p>
  <p>So, I'm trying to pass a string in a variable back to a main page from an external javascript page via alerts.</p>
  <p>At first I thought that the javascript wasn't pulling information from the php page properly, then I tried just typing in a variable directly on the javascript page. Both the pulled information and the information that I described on the javascript directly send null.</p>
  <p>Now I know for a fact that the varibles name and email are not null, as I literally just defined them.</p>
  <p>Here is the code I am having an issue with.</p>
  <pre><code>let name = &quot;test&quot;;
  let email = 11;
  let company = document.getElementById($(&quot;#Company&quot;).value);
  let phone = document.getElementById($(&quot;#Phone&quot;).value);
  let city = document.getElementById($(&quot;#City&quot;).value);
  let state = document.getElementById($(&quot;#State&quot;).value);
  let country = document.getElementById($(&quot;#Country&quot;).value);
  
  alert(&quot;Test Alert&quot;);
  alert(name);
  alert(email);
  alert(company);
  alert(phone);
  alert(city);
  alert(state);
  alert(country); 
  </code></pre>
  <p>Here is the full javascript file:</p>
  <p>ROICalc3.js</p>
  <pre><code>const getErrorMsg2 = lbl =&gt;
    `${lbl} must be a valid percent less than or equal to 100.`;
  
  const focusAndSelect = selector =&gt; {
    const elem = $(selector);
    elem.focus();
    elem.select();
  };
  
  const processEntries = () =&gt; {
    let ActiveNumberOfMolds = parseFloat($(&quot;#activeNumberOfMolds&quot;).value);
    let PercentOfDownMolds = parseFloat($(&quot;#percentOfDownMolds&quot;).value);
    PercentOfDownMolds = PercentOfDownMolds * .01;
    let AverageLaborHours = parseFloat($(&quot;#averageLaborHours&quot;).value);
    let RepairRatePerHour = parseFloat($(&quot;#repairRatePerHour&quot;).value);
    let CostOfCurrentLifter = parseFloat($(&quot;#costOfCurrentLifter&quot;).value);
    let AverageProfitPerPressHour = parseFloat($(&quot;#averageProfitPerPressHour&quot;).value);
    let EstimatedPriceOfAnAcculifter = parseFloat($(&quot;#estimatedPriceOfAnAcculifter&quot;).value);
    let PercentageReductionInLifterFailureUsingAcculignLifters = parseFloat($(&quot;#percentageReductionInLifterFailureUsingAcculignLifters&quot;).value);
    let AverageNumberOfLiftersPerMold = parseFloat($(&quot;#averageNumberOfLiftersPerMold&quot;).value);
    PercentageReductionInLifterFailureUsingAcculignLifters = PercentageReductionInLifterFailureUsingAcculignLifters * .01;
    let LifterCostDifference = (EstimatedPriceOfAnAcculifter - CostOfCurrentLifter);
  
    if (isNaN(ActiveNumberOfMolds) || ActiveNumberOfMolds &lt;= 0) {
      alert(getErrorMsg(&quot;Enter The Active Number Of Molds&quot;));
      focusAndSelect(&quot;#activeNumberOfMolds&quot;);
    } else if (isNaN(AverageNumberOfLiftersPerMold) || AverageNumberOfLiftersPerMold &lt;= 0) {
      alert(getErrorMsg(&quot;Enter the Average Number Of Lifters Per Mold:&quot;));
      focusAndSelect(&quot;#averageNumberOfLiftersPerMold&quot;);
    } else if (isNaN(PercentOfDownMolds) || PercentOfDownMolds &lt;= 0) {
      alert(getErrorMsg(&quot;Enter the Percentage Of Down Molds:&quot;));
      focusAndSelect(&quot;#percentOfDownMolds&quot;);
    } else if (isNaN(AverageLaborHours) || AverageLaborHours &lt;= 0) {
      alert(getErrorMsg(&quot;Enter the Average Labor Hours:&quot;));
      focusAndSelect(&quot;#averageLaborHours&quot;);
    } else if (isNaN(RepairRatePerHour) || RepairRatePerHour &lt;= 0) {
      alert(getErrorMsg(&quot;Enter the repair rate per hour:&quot;));
      focusAndSelect(&quot;#repairRatePerHour&quot;);
    } else if (isNaN(AverageProfitPerPressHour) || AverageProfitPerPressHour &lt;= 0) {
      alert(getErrorMsg(&quot;Enter the average profit per press hour:&quot;));
      focusAndSelect(&quot;#averageProfitPerPressHour&quot;);
    } else if (isNaN(CostOfCurrentLifter) || CostOfCurrentLifter &lt;= 0) {
      alert(getErrorMsg(&quot;Enter the average profit per press hour:&quot;));
      focusAndSelect(&quot;#costOfCurrentLifter&quot;);
    } else if (isNaN(EstimatedPriceOfAnAcculifter) || EstimatedPriceOfAnAcculifter &lt;= 0) {
      alert(getErrorMsg(&quot;Enter the estimated price of an acculifter:&quot;));
      focusAndSelect(&quot;#estimatedPriceOfAnAcculifter&quot;);
    } else if (PercentageReductionInLifterFailureUsingAcculignLifters &lt;= 0) {
      alert(getErrorMsg(&quot;Enter the percentage reduction in lifter failure using accualign lifters:&quot;));
      focusAndSelect(&quot;#percentageReductionInLifterFailureUsingAcculignLifters&quot;);
    } else if (PercentOfDownMolds &gt; 1) {
      alert(getErrorMsg2(&quot;Enter the percentage of down molds:&quot;));
      focusAndSelect(&quot;#percentOfDownMolds&quot;);
    } else if (PercentageReductionInLifterFailureUsingAcculignLifters &gt; 1) {
      alert(getErrorMsg2(&quot;Enter the Percentage Reduction In Lifter Failure Using Accualign Lifters:&quot;));
      focusAndSelect(&quot;#percentageReductionInLifterFailureUsingAccualignLifters&quot;);
    } else {
      $(&quot;#MRRPA&quot;).value = (ActiveNumberOfMolds * PercentOfDownMolds);
      let mrrpa = parseFloat($(&quot;#MRRPA&quot;).value);
      $(&quot;#ANHPL&quot;).value = (mrrpa * AverageLaborHours);
      let anhpl = parseFloat($(&quot;#ANHPL&quot;).value);
      $(&quot;#ALCRFLPM&quot;).value = ((anhpl * RepairRatePerHour) + (mrrpa * CostOfCurrentLifter * AverageNumberOfLiftersPerMold));
      let alcrflpm = parseFloat($(&quot;#ALCRFLPM&quot;).value);
      $(&quot;#PLDDM&quot;).value = (AverageProfitPerPressHour * anhpl * .3);
      let plddm = parseFloat($(&quot;#PLDDM&quot;).value);
      let eacfl = (plddm + alcrflpm);
      $(&quot;#EACFL&quot;).value = (eacfl);
      $(&quot;#CDBCLVAL&quot;).value = (EstimatedPriceOfAnAcculifter - CostOfCurrentLifter);
      let pldtd = (PercentageReductionInLifterFailureUsingAcculignLifters * plddm);
      let cdbclval = parseFloat($(&quot;#CDBCLVAL&quot;).value);
      $(&quot;#TCDBCLVAL&quot;).value = (cdbclval * (ActiveNumberOfMolds * AverageNumberOfLiftersPerMold));
      let tcdbclval = parseFloat($(&quot;#TCDBCLVAL&quot;).value);
      let acrnm = ((anhpl * RepairRatePerHour * PercentageReductionInLifterFailureUsingAcculignLifters) + (EstimatedPriceOfAnAcculifter * AverageNumberOfLiftersPerMold * ActiveNumberOfMolds * PercentOfDownMolds * PercentageReductionInLifterFailureUsingAcculignLifters));
      let cdnlptrc = (tcdbclval + acrnm + pldtd);
      let rlfcical = (eacfl - cdnlptrc);
      $(&quot;#RLFCICAL&quot;).value = rlfcical;
      $(&quot;#EMUUPI&quot;).value = ((tcdbclval / rlfcical) * 12).toFixed(2);;
      let emuupi = parseFloat($(&quot;#EMUUPI&quot;).value);
      console.log(&quot;EACFL: &quot; + eacfl);
      console.log(&quot;cdnlptrc: &quot; + cdnlptrc);
      document.getElementById(&quot;MRRPA&quot;).innerHTML = mrrpa + &quot; Molds&quot;;
      document.getElementById(&quot;ANHPL&quot;).innerHTML = anhpl + &quot; Hours&quot;;
      document.getElementById(&quot;ALCRFLPM&quot;).innerHTML = &quot;$&quot; + alcrflpm;
      document.getElementById(&quot;PLDDM&quot;).innerHTML = &quot;$&quot; + plddm;
      document.getElementById(&quot;CDBCLVAL&quot;).innerHTML = &quot;$&quot; + cdbclval;
      document.getElementById(&quot;TCDBCLVAL&quot;).innerHTML = &quot;$&quot; + tcdbclval;
      document.getElementById(&quot;RLFCICAL&quot;).innerHTML = &quot;$&quot; + rlfcical;
      document.getElementById(&quot;EACFL&quot;).innerHTML = &quot;$&quot; + eacfl;
      document.getElementById(&quot;EMUUPI&quot;).innerHTML = emuupi + &quot; Months&quot;;
      document.getElementById(&quot;ACRNM&quot;).innerHTML = &quot;$&quot; + acrnm;
      document.getElementById(&quot;PLDTD&quot;).innerHTML = &quot;$&quot; + pldtd;
      document.getElementById(&quot;CDNLPTRC&quot;).innerHTML = &quot;$&quot; + cdnlptrc;
  
      if (rlfcical &gt; 0) {
        document.getElementById(&quot;RLFCICAL&quot;).style.color = &quot;green&quot;;
      } else {
        document.getElementById(&quot;RLFCICAL&quot;).style.color = &quot;red&quot;;
      }
      if (eacfl &gt; 0) {
        document.getElementById(&quot;EACFL&quot;).style.color = &quot;red&quot;;
      } else {
        document.getElementById(&quot;EACFL&quot;).style.color = &quot;green&quot;;
      }
      if (alcrflpm &gt; 0) {
        document.getElementById(&quot;ALCRFLPM&quot;).style.color = &quot;red&quot;;
      } else {
        document.getElementById(&quot;ALCRFLPM&quot;).style.color = &quot;green&quot;;
      }
      if (plddm &gt; 0) {
        document.getElementById(&quot;PLDDM&quot;).style.color = &quot;red&quot;;
      } else {
        document.getElementById(&quot;PLDDM&quot;).style.color = &quot;green&quot;;
      }
      if (tcdbclval &gt; 0) {
        document.getElementById(&quot;TCDBCLVAL&quot;).style.color = &quot;red&quot;;
      } else {
        document.getElementById(&quot;TCDBCLVAL&quot;).style.color = &quot;green&quot;;
      }
      if (cdbclval) {
        document.getElementById(&quot;CDBCLVAL&quot;).style.color = &quot;red&quot;;
      } else {
        document.getElementById(&quot;CDBCLVAL&quot;).style.color = &quot;green&quot;;
      }
      if (emuupi &gt; 0) {
        document.getElementById(&quot;EMUUPI&quot;).style.color = &quot;green&quot;;
      } else {
        document.getElementById(&quot;EMUUPI&quot;).style.color = &quot;red&quot;;
      }
      if (anhpl &gt; 0) {
        document.getElementById(&quot;ANHPL&quot;).style.color = &quot;red&quot;;
      } else {
        document.getElementById(&quot;ANHPL&quot;).style.color = &quot;green&quot;;
      }
      if (mrrpa &gt; 0) {
        document.getElementById(&quot;MRRPA&quot;).style.color = &quot;red&quot;;
      } else {
        document.getElementById(&quot;MRRPA&quot;).style.color = &quot;green&quot;;
      }
      if (acrnm &gt; 0) {
        document.getElementById(&quot;ACRNM&quot;).style.color = &quot;red&quot;;
      } else {
        document.getElementById(&quot;ACRNM&quot;).style.color = &quot;green&quot;;
      }
      if (pldtd &gt; 0) {
        document.getElementById(&quot;PLDTD&quot;).style.color = &quot;red&quot;;
      } else {
        document.getElementById(&quot;PLDTD&quot;).style.color = &quot;green&quot;;
      }
      if (cdnlptrc &gt; 0) {
        document.getElementById(&quot;CDNLPTRC&quot;).style.color = &quot;red&quot;;
      } else {
        document.getElementById(&quot;CDNLPTRC&quot;).style.color = &quot;green&quot;;
      }
  
      let name = &quot;test&quot;;
      let email = 11;
      let company = document.getElementById($(&quot;#Company&quot;).value);
      let phone = document.getElementById($(&quot;#Phone&quot;).value);
      let city = document.getElementById($(&quot;#City&quot;).value);
      let state = document.getElementById($(&quot;#State&quot;).value);
      let country = document.getElementById($(&quot;#Country&quot;).value);
  
      alert(&quot;Test Alert&quot;);
      alert(name);
      alert(email);
      alert(company);
      alert(phone);
      alert(city);
      alert(state);
      alert(country);
  
      let result = document.querySelector('.result');
  
      // Creating a XHR object 
      let xhr = new XMLHttpRequest();
      let url = &quot;https://staging-dmecompany.kinsta.cloud/Submissions/submitjson.php&quot;;
  
      // open a connection 
      xhr.open(&quot;POST&quot;, url, true);
  
      // Set the request header i.e. which type of content you are sending 
      xhr.setRequestHeader(&quot;Content-Type&quot;, &quot;application/json&quot;);
  
      // Create a state change callback 
      xhr.onreadystatechange = function() {
        if (xhr.readyState === 4 &amp;&amp; xhr.status === 200) {
          // Print received data from server 
          document.getElementById(&quot;result&quot;).innerHTML = this.responseText;
        }
      };
  
      // Converting JSON data to string 
      var data = JSON.stringify({
        &quot;Name&quot;: name,
        &quot;Email&quot;: email,
        &quot;Company&quot;: company,
        &quot;Phone&quot;: phone,
        &quot;City&quot;: city,
        &quot;State&quot;: state,
        &quot;Country&quot;: country,
        &quot;ActiveNumberOfMolds&quot;: ActiveNumberOfMolds,
        &quot;PercentOfDownMolds&quot;: PercentOfDownMolds,
        &quot;Average Labor Hours&quot;: AverageLaborHours,
        &quot;RepairRatePerHour&quot;: RepairRatePerHour,
        &quot;AverageProfitPerPressHour&quot;: AverageProfitPerPressHour,
        &quot;AverageNumberOfLiftersPerMold&quot;: AverageNumberOfLiftersPerMold,
        &quot;rlfcical&quot;: rlfcical,
        &quot;LifterCostDifference&quot;: LifterCostDifference,
        &quot;anhpl&quot;: anhpl,
        &quot;alcrflpm&quot;: alcrflpm,
        &quot;plddm&quot;: plddm,
        &quot;cdbclval&quot;: cdbclval,
        &quot;pldtd&quot;: pldtd,
        &quot;cdbclval&quot;: cdbclval,
        &quot;emuupi&quot;: emuupi,
        &quot;mrrpa&quot;: mrrpa,
        &quot;acrnm&quot;: acrnm,
        &quot;pldtd&quot;: pldtd,
        &quot;cdnlptrc&quot;: cdnlptrc
      });
      // Sending data with the request 
      xhr.send(data);
    }
  };
  
  document.addEventListener(&quot;DOMContentLoaded&quot;, () =&gt; {
    $(&quot;#calculate&quot;).addEventListener(&quot;click&quot;, processEntries);
    $(&quot;#activeNumberOfMolds&quot;).focus();
  });
  </code></pre>
  <p>Can you tell me why these variables are getting alerted back to me as null?</p>
  <p>Edit: #1:
  I tried swapping the code to this:</p>
  <pre><code>    let name = &quot;test&quot;;
  let email = 11;
  let company = document.getElementById(&quot;Company&quot;).value;
  let phone = document.getElementById(&quot;Phone&quot;).value;
  let city = document.getElementById(&quot;City&quot;).value;
  let state = document.getElementById(&quot;State&quot;).value;
  let country = document.getElementById(&quot;Country&quot;).value;
  
  alert(&quot;Test Alert&quot;);
  alert(name);
  alert(email);
  alert(company);
  alert(phone);
  alert(city);
  alert(state);
  alert(country); 
  </code></pre>
  <p>The first alert had, &quot;test&quot;
  The second alert had, &quot;11&quot;
  All of the rest of the alerts were, &quot;Undefined&quot;.</p>
  <p>The alerts seem to be feeding back data now if the variables are described in the javascript code itself. I don't seem to be able to pull them from my php file.
  <a href="https://i.stack.imgur.com/E4oif.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/E4oif.png" alt="enter image description here" /></a></p>