CODEWITHSUNDEEP
javascripthtml
siva sandeep garapati
siva sandeep garapati

Reputation: 43

Error in replacing inner html with javascript call

See code below.

Based on the option selected in the select box, I want to replace innerHTML of divs with id=specific_dates_input and id=evt_date_input2.

But no change takes place on the page and returns a null error.

Can you tell me what's wrong with my code?

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>

Upvotes: 1

Views: 83

Answers (2)

Adjit
Adjit

Reputation: 10305

You need to wrap your table rows / elements in the <table> tag and it will fix your errors, and your code will now also work correctly.

Table syntax as follows -

<table>
    <tr> <!-- Table Row -->
        <td>Table Cell</td>
    </tr>
</table>

Upvotes: 2

Victor Leontyev
Victor Leontyev

Reputation: 8736

Your code is working fine, if you will place all yours tr inside table tag. 

<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>

And your 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 = "";


  }
}

Upvotes: 2

Related Questions