Javascript 为什么我的变量会被警告为空？

为什么我的变量会被警告为空

因此，我试图通过警报将变量中的字符串从外部javascript页面传递回主页面

起初我认为javascript没有正确地从php页面提取信息，然后我尝试直接在javascript页面上键入一个变量。拉取的信息和我在javascript上描述的信息都直接发送null

现在我知道了一个事实，变量名称和email都不是空的，正如我刚刚定义的那样

这是我遇到问题的代码

let name = "test";
let email = 11;
let company = document.getElementById($("#Company").value);
let phone = document.getElementById($("#Phone").value);
let city = document.getElementById($("#City").value);
let state = document.getElementById($("#State").value);
let country = document.getElementById($("#Country").value);

alert("Test Alert");
alert(name);
alert(email);
alert(company);
alert(phone);
alert(city);
alert(state);
alert(country); 

以下是完整的javascript文件：

ROICalc3.js

const getErrorMsg2 = lbl =>
  `${lbl} must be a valid percent less than or equal to 100.`;

const focusAndSelect = selector => {
  const elem = $(selector);
  elem.focus();
  elem.select();
};

const processEntries = () => {
  let ActiveNumberOfMolds = parseFloat($("#activeNumberOfMolds").value);
  let PercentOfDownMolds = parseFloat($("#percentOfDownMolds").value);
  PercentOfDownMolds = PercentOfDownMolds * .01;
  let AverageLaborHours = parseFloat($("#averageLaborHours").value);
  let RepairRatePerHour = parseFloat($("#repairRatePerHour").value);
  let CostOfCurrentLifter = parseFloat($("#costOfCurrentLifter").value);
  let AverageProfitPerPressHour = parseFloat($("#averageProfitPerPressHour").value);
  let EstimatedPriceOfAnAcculifter = parseFloat($("#estimatedPriceOfAnAcculifter").value);
  let PercentageReductionInLifterFailureUsingAcculignLifters = parseFloat($("#percentageReductionInLifterFailureUsingAcculignLifters").value);
  let AverageNumberOfLiftersPerMold = parseFloat($("#averageNumberOfLiftersPerMold").value);
  PercentageReductionInLifterFailureUsingAcculignLifters = PercentageReductionInLifterFailureUsingAcculignLifters * .01;
  let LifterCostDifference = (EstimatedPriceOfAnAcculifter - CostOfCurrentLifter);

  if (isNaN(ActiveNumberOfMolds) || ActiveNumberOfMolds <= 0) {
    alert(getErrorMsg("Enter The Active Number Of Molds"));
    focusAndSelect("#activeNumberOfMolds");
  } else if (isNaN(AverageNumberOfLiftersPerMold) || AverageNumberOfLiftersPerMold <= 0) {
    alert(getErrorMsg("Enter the Average Number Of Lifters Per Mold:"));
    focusAndSelect("#averageNumberOfLiftersPerMold");
  } else if (isNaN(PercentOfDownMolds) || PercentOfDownMolds <= 0) {
    alert(getErrorMsg("Enter the Percentage Of Down Molds:"));
    focusAndSelect("#percentOfDownMolds");
  } else if (isNaN(AverageLaborHours) || AverageLaborHours <= 0) {
    alert(getErrorMsg("Enter the Average Labor Hours:"));
    focusAndSelect("#averageLaborHours");
  } else if (isNaN(RepairRatePerHour) || RepairRatePerHour <= 0) {
    alert(getErrorMsg("Enter the repair rate per hour:"));
    focusAndSelect("#repairRatePerHour");
  } else if (isNaN(AverageProfitPerPressHour) || AverageProfitPerPressHour <= 0) {
    alert(getErrorMsg("Enter the average profit per press hour:"));
    focusAndSelect("#averageProfitPerPressHour");
  } else if (isNaN(CostOfCurrentLifter) || CostOfCurrentLifter <= 0) {
    alert(getErrorMsg("Enter the average profit per press hour:"));
    focusAndSelect("#costOfCurrentLifter");
  } else if (isNaN(EstimatedPriceOfAnAcculifter) || EstimatedPriceOfAnAcculifter <= 0) {
    alert(getErrorMsg("Enter the estimated price of an acculifter:"));
    focusAndSelect("#estimatedPriceOfAnAcculifter");
  } else if (PercentageReductionInLifterFailureUsingAcculignLifters <= 0) {
    alert(getErrorMsg("Enter the percentage reduction in lifter failure using accualign lifters:"));
    focusAndSelect("#percentageReductionInLifterFailureUsingAcculignLifters");
  } else if (PercentOfDownMolds > 1) {
    alert(getErrorMsg2("Enter the percentage of down molds:"));
    focusAndSelect("#percentOfDownMolds");
  } else if (PercentageReductionInLifterFailureUsingAcculignLifters > 1) {
    alert(getErrorMsg2("Enter the Percentage Reduction In Lifter Failure Using Accualign Lifters:"));
    focusAndSelect("#percentageReductionInLifterFailureUsingAccualignLifters");
  } else {
    $("#MRRPA").value = (ActiveNumberOfMolds * PercentOfDownMolds);
    let mrrpa = parseFloat($("#MRRPA").value);
    $("#ANHPL").value = (mrrpa * AverageLaborHours);
    let anhpl = parseFloat($("#ANHPL").value);
    $("#ALCRFLPM").value = ((anhpl * RepairRatePerHour) + (mrrpa * CostOfCurrentLifter * AverageNumberOfLiftersPerMold));
    let alcrflpm = parseFloat($("#ALCRFLPM").value);
    $("#PLDDM").value = (AverageProfitPerPressHour * anhpl * .3);
    let plddm = parseFloat($("#PLDDM").value);
    let eacfl = (plddm + alcrflpm);
    $("#EACFL").value = (eacfl);
    $("#CDBCLVAL").value = (EstimatedPriceOfAnAcculifter - CostOfCurrentLifter);
    let pldtd = (PercentageReductionInLifterFailureUsingAcculignLifters * plddm);
    let cdbclval = parseFloat($("#CDBCLVAL").value);
    $("#TCDBCLVAL").value = (cdbclval * (ActiveNumberOfMolds * AverageNumberOfLiftersPerMold));
    let tcdbclval = parseFloat($("#TCDBCLVAL").value);
    let acrnm = ((anhpl * RepairRatePerHour * PercentageReductionInLifterFailureUsingAcculignLifters) + (EstimatedPriceOfAnAcculifter * AverageNumberOfLiftersPerMold * ActiveNumberOfMolds * PercentOfDownMolds * PercentageReductionInLifterFailureUsingAcculignLifters));
    let cdnlptrc = (tcdbclval + acrnm + pldtd);
    let rlfcical = (eacfl - cdnlptrc);
    $("#RLFCICAL").value = rlfcical;
    $("#EMUUPI").value = ((tcdbclval / rlfcical) * 12).toFixed(2);;
    let emuupi = parseFloat($("#EMUUPI").value);
    console.log("EACFL: " + eacfl);
    console.log("cdnlptrc: " + cdnlptrc);
    document.getElementById("MRRPA").innerHTML = mrrpa + " Molds";
    document.getElementById("ANHPL").innerHTML = anhpl + " Hours";
    document.getElementById("ALCRFLPM").innerHTML = "$" + alcrflpm;
    document.getElementById("PLDDM").innerHTML = "$" + plddm;
    document.getElementById("CDBCLVAL").innerHTML = "$" + cdbclval;
    document.getElementById("TCDBCLVAL").innerHTML = "$" + tcdbclval;
    document.getElementById("RLFCICAL").innerHTML = "$" + rlfcical;
    document.getElementById("EACFL").innerHTML = "$" + eacfl;
    document.getElementById("EMUUPI").innerHTML = emuupi + " Months";
    document.getElementById("ACRNM").innerHTML = "$" + acrnm;
    document.getElementById("PLDTD").innerHTML = "$" + pldtd;
    document.getElementById("CDNLPTRC").innerHTML = "$" + cdnlptrc;

    if (rlfcical > 0) {
      document.getElementById("RLFCICAL").style.color = "green";
    } else {
      document.getElementById("RLFCICAL").style.color = "red";
    }
    if (eacfl > 0) {
      document.getElementById("EACFL").style.color = "red";
    } else {
      document.getElementById("EACFL").style.color = "green";
    }
    if (alcrflpm > 0) {
      document.getElementById("ALCRFLPM").style.color = "red";
    } else {
      document.getElementById("ALCRFLPM").style.color = "green";
    }
    if (plddm > 0) {
      document.getElementById("PLDDM").style.color = "red";
    } else {
      document.getElementById("PLDDM").style.color = "green";
    }
    if (tcdbclval > 0) {
      document.getElementById("TCDBCLVAL").style.color = "red";
    } else {
      document.getElementById("TCDBCLVAL").style.color = "green";
    }
    if (cdbclval) {
      document.getElementById("CDBCLVAL").style.color = "red";
    } else {
      document.getElementById("CDBCLVAL").style.color = "green";
    }
    if (emuupi > 0) {
      document.getElementById("EMUUPI").style.color = "green";
    } else {
      document.getElementById("EMUUPI").style.color = "red";
    }
    if (anhpl > 0) {
      document.getElementById("ANHPL").style.color = "red";
    } else {
      document.getElementById("ANHPL").style.color = "green";
    }
    if (mrrpa > 0) {
      document.getElementById("MRRPA").style.color = "red";
    } else {
      document.getElementById("MRRPA").style.color = "green";
    }
    if (acrnm > 0) {
      document.getElementById("ACRNM").style.color = "red";
    } else {
      document.getElementById("ACRNM").style.color = "green";
    }
    if (pldtd > 0) {
      document.getElementById("PLDTD").style.color = "red";
    } else {
      document.getElementById("PLDTD").style.color = "green";
    }
    if (cdnlptrc > 0) {
      document.getElementById("CDNLPTRC").style.color = "red";
    } else {
      document.getElementById("CDNLPTRC").style.color = "green";
    }

    let name = "test";
    let email = 11;
    let company = document.getElementById($("#Company").value);
    let phone = document.getElementById($("#Phone").value);
    let city = document.getElementById($("#City").value);
    let state = document.getElementById($("#State").value);
    let country = document.getElementById($("#Country").value);

    alert("Test Alert");
    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 = "https://staging-dmecompany.kinsta.cloud/Submissions/submitjson.php";

    // open a connection 
    xhr.open("POST", url, true);

    // Set the request header i.e. which type of content you are sending 
    xhr.setRequestHeader("Content-Type", "application/json");

    // Create a state change callback 
    xhr.onreadystatechange = function() {
      if (xhr.readyState === 4 && xhr.status === 200) {
        // Print received data from server 
        document.getElementById("result").innerHTML = this.responseText;
      }
    };

    // Converting JSON data to string 
    var data = JSON.stringify({
      "Name": name,
      "Email": email,
      "Company": company,
      "Phone": phone,
      "City": city,
      "State": state,
      "Country": country,
      "ActiveNumberOfMolds": ActiveNumberOfMolds,
      "PercentOfDownMolds": PercentOfDownMolds,
      "Average Labor Hours": AverageLaborHours,
      "RepairRatePerHour": RepairRatePerHour,
      "AverageProfitPerPressHour": AverageProfitPerPressHour,
      "AverageNumberOfLiftersPerMold": AverageNumberOfLiftersPerMold,
      "rlfcical": rlfcical,
      "LifterCostDifference": LifterCostDifference,
      "anhpl": anhpl,
      "alcrflpm": alcrflpm,
      "plddm": plddm,
      "cdbclval": cdbclval,
      "pldtd": pldtd,
      "cdbclval": cdbclval,
      "emuupi": emuupi,
      "mrrpa": mrrpa,
      "acrnm": acrnm,
      "pldtd": pldtd,
      "cdnlptrc": cdnlptrc
    });
    // Sending data with the request 
    xhr.send(data);
  }
};

document.addEventListener("DOMContentLoaded", () => {
  $("#calculate").addEventListener("click", processEntries);
  $("#activeNumberOfMolds").focus();
});

第一个警报是“测试” 第二个警报是“11” 其余所有警报均为“未定义”

如果javascript代码本身描述了变量，那么警报现在似乎正在反馈数据。我似乎无法从我的php文件中提取它们。

---

.value

不应位于

文档的参数中。getElementById（）

，它应用于此操作的结果

您不应该调用

$（）

或在

getElementById（）

的参数中使用

#

前缀，参数本身应该是ID

let company = document.getElementById($("#Company").value);

应该是

let company = document.getElementById("Company").value;

或者，如果

$（）

是

document.querySelector（）

的缩写，则可以编写

let company = $("#Company").value;

如果是jQuery，那么正确的语法是

let company = $("#Company").val();

---

#用于CSS选择器或querySelector。不要将它与document.getElementById一起使用事实上，在较新的web浏览器中，实际上根本不需要它。如果您使用id=“foo”设置元素，那么就可以将foo用作JavaScript变量（非严格模式）应用程序中的

$

是什么？它是jQuery还是

document.querySelector（）

的缩写？@ControlAltDel这不是一个“新浏览器”的东西，它是一个古老的JavaScript功能。依赖它不是一个好主意，因为与其他窗口属性冲突的ID将不会以这种方式工作。知道这一点很好。当我开始将数字导入页面时，我相信我已经复制了它的语法。我知道#并没有引起这个特定的问题，因为我手工定义了其中的一些，即变量名和email，这两个都失败了。不过，当我稍后将信息从php页面导入javascript页面时，您提供给我的这些信息可能非常重要！所以，谢谢你。所以我测试了你的语法，它通过警报返回为未定义。让name=“test”；让email=11；让company=document.getElementById（“company”）.value；让phone=document.getElementById（“phone”）.value；让city=document.getElementById（“city”）.value；让state=document.getElementById（“state”）.value；让country=document.getElementById（“国家”）.value；警报（“测试警报”）；警报（名称）；警报（电子邮件）；警报（公司）；警报（电话）；警报（城市）；警报（状态）；警报（国家）@Barmara JavaScript控制台中是否存在任何错误？是的，尽管这些错误用于通过xhr将信息发送到phpfile#2。我相信这是因为我正在向php页面发送未定义的变量。一旦我能够弄清楚如何将我的变量从第一个php页面转移到这个javascript页面，并将它们转换为变量格式，那么应该可以解决这个问题。未捕获的TypeError:无法在XMLHttpRequest.xhr.onreadystatechange（ROICalc3.js:243）处将属性“innerHTML”设置为null。我想不出您在警报中得到未定义的

的任何原因。如果找不到元素，您将得到一个关于尝试访问null属性的错误。如果未填写输入，则值将是一个空字符串，而不是未定义的
。错误发生在此行：
document.getElementById（“结果”）.innerHTML=this.responseText但是在任何地方都没有
结果
元素。
let company = $("#Company").val();