Question

DEMO Picture我正在创建一个动态添加行和动态选择框选项，在两个javascript函数中使用增量'x'和'i'值作为下面的代码。当选择选项0.5但是在更改时它正在工作到1它出来Uncaught TypeError：无法读取null的属性'value'。Error Message

var x = 1;

function appendRow() {

  var newTextBoxDiv = $(document.createElement('div'))
    .attr("id", 'TextBoxDiv' + x);

  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' id='slct" + x + "' name='Branch' onchange='change();'><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++;
}

var i = 0;

function change() {
  i++;
  var select = document.getElementById("slct" + i);

  var divv = document.getElementById("container" + i);
  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;
  }
}

<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" />
<div id="div">
  <button onclick="appendRow()" value="Add Row">Add row</button>

Answer 1

把你的回归＆＃39;在你的if之外和最后的结束之前。

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

Answer 2

我发现了什么问题。在你的函数叫做change（）你正在递增i。每次运行它都会递增。这导致对不存在的id的引用，导致您得到的错误。

我编写了一个解决方案，您可以在函数中输入相关的参考编号。只需在运行该函数之前检索该数字。在这种情况下，您进行了更改。

你应该能够从这里弄明白。我还在代码中输入了一些解释变化的评论。

<强> JS-Fiddle

<强> HTML

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

<强> JS / jQuery的

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);
});

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

2 个答案: