Object Required Error on document.getElementById

I just want to ask why I'm getting object required error? is my incrementation not working?
Here are the codes:

<html>
<script>

var counter1 = 0;
var counter2 = 0;

function doValidate() {

      //alert("" + counter1);

      var componentFromInner1 = document.getElementById("innerSelect1" + counter1).value;
      //var componentFromInner2 = document.getElementById("innerSelect2" + counter2).value;

      if(componentFromInner1 != null && componentFromInner2 != null) {
            if (componentFromInner1 == componentFromInner2) {
                  alert("You can not select 2 similar components.");
            }
      }
}

function doAdd() {

      
      var str = '<table><tr><td><select id=\"innerSelect1" + counter1 + "\">';
      str += '<option name="option1">option1</option>';
      str += '<option name="option2">option2</option>';
      str += '<option name="option3">option3</option>';
      str += '</select>';
      str += '<select id=\"innerSelect2" + counter2 + "\">';
      str += '<option name="option1">option1</option>';
      str += '<option name="option2">option2</option>';
      str += '<option name="option3">option3</option>';
      str += '</select></td></tr></table>';

      document.getElementById('tb').innerHTML += str;
      counter1++;
      counter2++;
      
}
</script>
<body>
<table>
<tr>
<td>
<table>
<select name="select1">
<option name="option1">option1</option>
<option name="option2">option2</option>
<option name="option3">option3</option>
</select>
<select name="select2">
<option name="option1">option1</option>
<option name="option2">option2</option>
<option name="option3">option3</option>
</select>
</table>
<span id="tb"></span>
<button onclick="doAdd()">Add</button>
<button onclick="doValidate()">validate</button>
<script>
<td>
<tr>
</table>

</script>
</body>
</html>
simple21Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Ivo StoykovCommented:
Hello simple21:

Here
>   var str = '<table><tr><td><select id=\"innerSelect1" + counter1 + "\">';

quotes seems unbalanced

try

var str = '<table><tr><td><select id="innerSelect1' + counter1 + '">';

HTH

!i!
0
JaaxArchitectCommented:
The select objects are treated merely strings within a div and hence it is not added to the dynamic dom.
So javascript complains that the object not found

Anyway there are few errors too.
1.The <script>
<td>
<tr>
</table>
</script> shud be removed

2.><select id=\"innerSelect1" + counter1 + "\">';
shud be defined as ><select id="innerSelect'+counter1+'">';
Same applies for innerSelect2 too.

3.I tried replacing document.getElementById('tb').innerHTML += str; with document.writeln(str);
But still ran into problems
0
Sinoj SebastianCTO & OpenERP Project managerCommented:
try my code

<html>
      <script>

var counter1 = 0;
var counter2 = 0;

function doValidate() {

      //alert("" + counter1);

      var componentFromInner1 = document.getElementById("innerSelect1" + counter1).value;
      var componentFromInner2 = document.getElementById("innerSelect2" + counter2).value;

      if(componentFromInner1 != null && componentFromInner2 != null) {
            if (componentFromInner1 == componentFromInner2) {
                  alert("You can not select 2 similar components.");
            }
      }
}

function doAdd() {

     
      counter1++;
      counter2++;
      var str = "<table><tr><td><select id='innerSelect1" + counter1 + "'>";
      str += "<option value=Option1>option1</option>";
      str += "<option value=Option2>option2</option>";
      str += "<option value=Option3>option3</option>";
      str += "</select>";
      str += "<select id='innerSelect2" + counter2 + "'>";
      str += "<option value=Option1>option1</option>";
      str += "<option value=Option2>option2</option>";
      str += "<option value=Option3>option3</option>";
      str += "</select></td></tr></table>";

      document.getElementById('tb').innerHTML += str;
     
}
      </script>
      <body>
            <table id="Table1">
                  <tr>
                        <td>
                              <table>
                                    <tr>
                                          <td><select id="innerSelect10" name="innerSelect10">
                                                      <option selected value=Option1>option1</option>
                                                      <option value=Option2>option2</option>
                                                      <option value=Option3>option3</option>
                                                </select>
                                                <select id="innerSelect20" name="innerSelect20">
                                                      <option selected value=Option1>option1</option>
                                                      <option value=Option2>option2</option>
                                                      <option value=Option3>option3</option>
                                                </select>
                                          </td>
                                    </tr>
                              </table>
                              <span id="tb"></span>
                              <INPUT id="Button1" type="button" value="Add" name="Button1" onclick="doAdd()"> <INPUT id="Button2" type="button" value="validate" name="Button2" onclick="doValidate()">
                        <td>
                  <tr>
                  </tr>
            </table>
      </body>
</html>


tell me if you have any problem
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

Sinoj SebastianCTO & OpenERP Project managerCommented:
>I'm getting object required error?
You started with
    var counter1 = 0;
when you add new select id will be
    id="innerSelect10"
after that you incremented counter1
    counter1++;

then, when you press validate,
    var componentFromInner1 = document.getElementById(innerSelect11).value;
there is no element with id = innerSelect11, so the error.
0
simple21Author Commented:
It's working cool but it only validates the last one how about the other similar drop downs? It should be able to detect the old ones created and has similar value?
0
Sinoj SebastianCTO & OpenERP Project managerCommented:
What about this one?

<html>
      <script>            
            var counter = 0;

            function doValidate() {

                  for( var i=0;i<=counter;i++)
                  {
                        var componentFromInner1 = document.getElementById("innerSelect1" + i).value;
                        var componentFromInner2 = document.getElementById("innerSelect2" + i).value;

                        if(componentFromInner1 != null && componentFromInner2 != null) {
                                    if (componentFromInner1 == componentFromInner2) {
                                          alert("You can not select 2 similar components. Check row nomber " + (i+1));
                                          return;
                                    }
                        }
                  }
            }

            function doAdd() {
            
                  counter++;
                  var str = "<table><tr><td><select id='innerSelect1" + counter + "'>";
                  str += "<option value=Option1>option1</option>";
                  str += "<option value=Option2>option2</option>";
                  str += "<option value=Option3>option3</option>";
                  str += "</select>";
                  str += "<select id='innerSelect2" + counter + "'>";
                  str += "<option value=Option1>option1</option>";
                  str += "<option value=Option2>option2</option>";
                  str += "<option value=Option3>option3</option>";
                  str += "</select></td></tr></table>";

                  document.getElementById('tb').innerHTML += str;                  
            }            
      </script>
      <body>
            <form id=f1>
                  <table id="Table1">
                  <tr>
                        <td>
                              <table>
                                    <tr>
                                          <td><select id="innerSelect10" name="innerSelect10">
                                                      <option selected value=Option1>option1</option>
                                                      <option value=Option2>option2</option>
                                                      <option value=Option3>option3</option>
                                                </select>
                                                <select id="innerSelect20" name="innerSelect20">
                                                      <option selected value=Option1>option1</option>
                                                      <option value=Option2>option2</option>
                                                      <option value=Option3>option3</option>
                                                </select>
                                          </td>
                                    </tr>
                              </table>
                              <span id="tb"></span>
                              <INPUT id="Button1" type="button" value="Add" name="Button1" onclick="doAdd()">
                              <INPUT id="Button2" type="button" value="validate" name="Button2" onclick="doValidate()">
                        <td>
                  <tr>
                  </tr>
            </table>
      </body>
</html>
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.