javascript - 用 javascript 调用替换内部 html 时出错

Question

见下面的代码。

根据在选择框中选择的选项，我想用 id=specific_dates_input 和 id=evt_date_input2 替换 div 的 innerHTML。

但页面上没有发生任何变化并返回空错误。

你能告诉我我的代码有什么问题吗？

function addDates() {
  var occurance = document.getElementById("evt_occurance").value;

  if (occurance == 'daily') {
    alert("hi");
    document.getElementById("evt_date_txt").innerHTML = "";
    document.getElementById("evt_date_input1").innerHTML = "";
    document.getElementById("evt_date_txt2").innerHTML = "";
    document.getElementById("evt_date_input2").innerHTML = "";
    document.getElementById("specific_dates_btn").innerHTML = "";
    document.getElementById("specific_dates_input").innerHTML = "";


  }
}

<tr>
  <td class="reg_lable">
    <label for="evt_occurance">Event Occurance:</label>
  </td>
  <td>
    <select id="evt_occurance" name="occurance" onchange="addDates();">
      <option>Select</option>
      <option value="daily">Daily</option>

    </select>
  </td>
</tr>
<tr>
  <td>
    <br>
  </td>
</tr>
<tr>
  <td>
    <label id="evt_date_txt"></label>
  </td>
  <td id="evt_date_input1"></td>
</tr>
<tr>
  <td>
    <br>
  </td>
</tr>
<tr>
  <td>
    <label id="evt_date_txt2"></label>
  </td>
  <td>
    <div id="evt_date_input2">hi</div>
  </td>
</tr>
<tr>
  <td></td>
</tr>
<tr>
  <td id="specific_dates_btn"></td>
  <td>
    <div id="specific_dates_input" class="bok">hiiii</div>
  </td>
</tr>
<tr>
  <td>
    <br>
  </td>
</tr>

Answer 1

如果您将所有 tr 放在 table 标记中，您的代码工作正常。

<table>
<tr>
   <td class="reg_lable"><label for="evt_occurance">Event Occurance:</label></td>
   <td>
      <select id="evt_occurance" name="occurance" onchange="addDates();">
         <option>Select</option>
         <option value="daily">Daily</option>
      </select>
   </td>
</tr>
<tr>
   <td><br></td>
</tr>
<tr>
   <td><label id="evt_date_txt"></label></td>
   <td id="evt_date_input1"></td>
</tr>
<tr>
   <td><br></td>
</tr>
<tr>
   <td><label id="evt_date_txt2"></label></td>
   <td>
      <div id="evt_date_input2">hi</div>
   </td>
</tr>
<tr>
   <td></td>
</tr>
<tr>
   <td id="specific_dates_btn"></td>
   <td>
      <div id="specific_dates_input" class="bok">hiiii</div>
   </td>
</tr>
<tr>
   <td><br></td>
</tr>
<table>

还有你的 JS:

function addDates() {
  var occurance = document.getElementById("evt_occurance").value;

  if (occurance == 'daily') {
    alert("hi");
    document.getElementById("evt_date_txt").innerHTML = "";
    document.getElementById("evt_date_input1").innerHTML = "";
    document.getElementById("evt_date_txt2").innerHTML = "";
    document.getElementById("evt_date_input2").innerHTML = "";
    document.getElementById("specific_dates_btn").innerHTML = "";
    document.getElementById("specific_dates_input").innerHTML = "";


  }
}