Javascript 未捕获的TypeError:在值更改时无法读取null的属性“value”

我正在制作一个动态添加行和动态选择框选项，在两个javascript函数中使用增量“x”和“I”值，如下代码所示。当选择选项为0.5时工作，但当将其更改为1时，会出现未捕获的类型错误：无法读取null的属性“value”

var x=1； 函数appendRow{ var newTextBoxDiv=$document.createElement'div' .attrid，'TextBoxDiv'+x； newTextBoxDiv.after.htmlDate：请选择休假日10.5； newTextBoxDiv.appendTodiv； x++； } var i=0； 功能改变{ i++； var select=document.getElementByIdslct+i； var divv=document.getElementByIdcontainer+i； var值=select.value； 如果值==0.5{ toAppend=时间：； divv.innerHTML=toAppend； 回来 } 如果值==1{ toAppend=； divv.innerHTML=toAppend； 回来 } }

---

添加行将您的“返回”放在if之外，并放在最后的结束括号之前

if (value== 1) {
        toAppend = "";
        divv.innerHTML = toAppend;  
    }
return;

---

我发现哪里出了问题。在名为change的函数中，您正在递增i。每次运行它时，它都会递增。这将导致对不存在的id的引用，从而导致出现错误

我制定了一个解决方案，在函数中输入相关的参考号。只需在运行函数之前检索数字。在这种情况下，在你做出改变之后

你应该可以从这里找到答案。我还在代码中输入了一些注释来解释这些更改

html

js/jQuery

---

您确定0.5被读取为正确的数字而不是字符串吗。你应该试试'parseFloat0.5；是的，它可以在不添加parseFloat的情况下工作，因为它不限制是string还是float。注意引号之间的空格。如果值==1{toAppend=；divv.innerHTML=toAppend；}你能提供一个工作的JSFIDLE或类似的东西吗？它在JSFIDLE中工作很好，但是当我把它放在我的计算机上运行时，它完全没有响应：@user3168370如果它在JS FIDLE中工作，那么同样的东西就没有理由不在另一个环境中工作。您是否通过在函数开始时运行console.logtest来检查函数是否运行？您如何调用该函数？现在它已经可以正常工作了，因为我将脚本移到html代码下面。感谢您的建议，您可能需要使用$document.ready。这样可以确保代码在页面加载后运行。

<div id="div">
  <button value="Add Row" id="button">Add row</button>
</div>

var x = 1;
function appendRow() {
  var newTextBoxDiv = $(document.createElement('div'))
    .attr("id", 'TextBoxDiv' + x);
// I ASSIGNED A CLASS CALLED INPUT TO THE ELEMENT YOU WANT TO SELECT
  newTextBoxDiv.after().html("<div class='form-group'><label class='control-label col-sm-3'  style='text-align:right;'>Date:</label><div class='col-sm-3'><div class='input-group date' ><span class='input-group-addon'><i class='fa fa-calendar'></i></span><input type='Date' class='form-control'  name='Dates'> <select class='form-control input' id='slct" + x + "' name='Branch''><option  disabled=''  selected=''>Please Select Leave Day</option> <option value='1' >1</option><option value='0.5' >0.5</option></select></div></span></div><div id='container" + x + "'></div></div>");
  newTextBoxDiv.appendTo("#div");
  x++;
}


function changeIt(rowIndex) {
    //i++; DO NOT INCREMENT I!!! IT WILL CREATE THE REFERRAL ERROR YOU HAD. BECAUSE THE FUNCTION WOULD BE REFERRING TO A NON-EXISTING INPUT ELEMENT. I REPLACED IT WITH ROWINDEX, WHICH IS INITIATED WHILE CALLING THE FUNCTION
  var select = document.getElementById("slct" + rowIndex);

  var divv = document.getElementById("container" + rowIndex);
  var value = select.value;

  if (value == 0.5) {
    toAppend = "<label class='control-label col-sm-1'>Time:</label><div class='col-sm-2'><div class='input-group date' id = 'date'> <span class='input-group-addon'><i class='fa fa-clock-o'></i></span><input type='time' class='form-control' ></div></div><div class='col-sm-2'><div class='input-group date' id = 'dates'> <span class='input-group-addon'><i class='fa fa-clock-o'></i></span><input type='time' class='form-control'  ></div></div>";
    divv.innerHTML = toAppend;
    return;
  }
  if (value == 1) {
    toAppend = "";
    divv.innerHTML = toAppend;
    return;
  }
}
$("#button").click(function(){
    appendRow();
});
$("#div").on("change",".input", function(){
   //EXTRACT THE NUMBER FROM THE CLICKED ITEM'S ID
   let rowIndex = $(this).attr("id").replace(/.[^0-9]/g, "");
  changeIt(rowIndex);
});