Uncaught TypeError: undefined is not a function on .GetElementByID

Question

Here's what I'm trying to do:

I have a table set up as follows:

<tbody id="entryTable" class="entryHead">
            <tr id="1">
                <td id="1">1</td>
                <td class = driver></td>
                <td><div id="button">Clear!</div></td>
            </tr>
            <tr id="2">
                <td>2</td>
                <td class = driver></td>
                <td><div id="button">Clear!</div></td>
            </tr>
            <tr id="3">

I'm trying to get the information from this form to fill in the tables:

<form>
        Driver Name:<br>
        <input type="text" name="name">
        <br>
        Driver Draw:<br>
        <input type="text" name="draw">
<div id="button">Add!</div>
    </form>

I've written this bit of jquery to try to do that:

var main = function () {
    $('#button').click(function ( ) {
        var name = $('input[name=name]').val();
        var draw = $('input[name=draw]').val();
        var clear = "clear";
        var draw2 = "#"+draw;
        console.log(draw2);
        $("draw2").getElementById(".driver").innerHTML = name;

                           }
                      )};

When I press the "Add" button I've made, I get the error "Uncaught Type Error: undefined is not a function" that points to .getElementByID.

Maybe I'm approaching it all wrong, but I'm trying to get the name of the driver to appear in the for the with the id of the number the driver drew.

Any ideas?

Answer 1

I got it to work. Here's what I ended up doing, and a summary of the project.

This is my first JavaScript/JQuery project. I'm trying to write a program for a race track I race at that will create an entry list, calculate the heat lineups based on the number the driver randomly drew when entering, and then calculate feature lineups based on their results from the heats.

Here's the form the official will use to add each driver. The "add" button will run the jQuery script to fill the driver name into the row in the table equal to the number they drew.

 <form>
        Driver Name:<br>
        <input type="text" name="name">
        <br>
        Driver Draw:<br>
        <input type="text" name="draw">
<div id="button">Add!</div>
    </form>

A sample of the table:

<thead>
        <tr class="entryHead">
          <th>Draw</th>
          <th>Driver Name</th>
          <th>clear</th>
        </tr>
    </thead>
    <tbody id="entryTable" class="entryHead">
        <tr id="1">
            <td>1</td>
            <td class = "driver1" ></td>
            <td><div id="button">Clear!</div></td>
        </tr>
        <tr id="2">
            <td>2</td>
            <td class = "driver2"></td>
            <td><div id="button">Clear!</div></td>
        </tr>
        <tr id="3">
            <td>3</td>
            <td class = "driver3"></td>
            <td><div id="button">Clear!</div></td>
        </tr>
        <tr id="4">
            <td>4</td>
            <td class = "driver4"></td>
            <td><div id="button">Clear!</div></td>
        </tr>
        <tr id="5">
            <td>5</td>
            <td class = "driver5"></td>
            <td><div id="button">Clear!</div></td>
        </tr>

I have 60 rows in total. Right now, the ID doesn't do anything... I just left it there because I had it there earlier while I was experimenting, and I'm leaving it there in case it's useful earlier.

Then there's the classes "driver1", "driver2", "driver3", etc. That is for jQuery to use.

Here's my jQuery script:

function Driver(draw, name) {
    this.draw = draw;
    this.name = name;
}



var main = function () {
    $('#button').click(function ( ) {
        var name = $('input[name=name]').val();
        var draw = $('input[name=draw]').val();
        var clear = "clear";
        var draw2 = "#"+draw;
        var name2 = ".driver"+draw
        console.log(draw2);
        console.log(name2);
        $(name2).text(name);
        });
}


$(document).ready(main);

I'm making an object called "Driver" that I will use later. Right now, it's just there.

Creating the variable "name2" allows "$(name2).text(name);" to find the appropriate class in the row equal to "draw", and put the driver's name in that draw. For example, if Jeff Gordon draws 24, his name would go in row 24, and the "name2" variable for him would end up being "name24".

Does that make sense?

I got this part to work for now. Thanks for your help.

Answer 2

Make your code as simple as possible. Try this, first edit your HTML code. Put a different class for your two elements that contains the driver class:

 <tbody id="entryTable" class="entryHead">
        <tr id="1">
            <td id="1">1</td>
            <td class = driverName></td>
            <td><div id="button">Clear!</div></td>
        </tr>
        <tr id="2">
            <td>2</td>
            <td class = driverDraw></td>
            <td><div id="button">Clear!</div></td>
        </tr>

Then edit your Javascript to something like this:

$(function () {
      $('#button').click(function ( ) {
          var name = $('input[name=name]').val();
          var draw = $('input[name=draw]').val();

          $(".driverName").html(name);
          $(".driverDraw").html(draw);
      }
)};

if .html() wont work then change it to .text()

   $(".driverName").text(name);
   $(".driverDraw").text(draw);

Just a tip: When using jQuery dont combine syntax from javascript cause it will just give you errors. Instead, search for the jQuery equivalent of the javascript function: like innerHTML = 0 on native javascript is only .html(0) on jQuery or getElementById on native javascript is just simply a $ sign in jQuery.

Answer 3

Since, its jquery, it has the following syntax:

$(<selector>).function()...;

where, <selector> is the selector of the object(.class and #id).

so, instead of $("draw2").getElementById(".driver").innerHTML = name; use this:

$(".driver").html(name); or, $(".driver").text(name);

Answer 4

You're using jQuery, and you cannot use the standard getElementById on a jQuery collection object. You can use .find() instead, or get the real Element at some index. Here are two solutions:

$("selector").find("#your-id");
// or
$("selector")[0].getElementById("your-id");