Uncaught TypeError: не определено не является функцией на .GetElementByID

Question

Вот что я пытаюсь сделать:

Я таблица создана следующим образом:

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

Я пытаюсь получить информация из этой формы для заполнения таблиц:

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

Я написал это немного JQuery, чтобы попытаться сделать это:

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; 

          } 
        )}; 

Когда я нажимаю кнопку «Добавить», которую я создал, я получаю сообщение об ошибке «Ошибка типа Uncaught: undefined не является функцией», которая указывает на .getElementByID.

Возможно, я подхожу ко всему, что неправильно, но я пытаюсь получить имя драйвера, чтобы оно отображалось в файле с идентификатором номера, который был нарисован драйвером.

Любые идеи?

Answer 1

Вы используете jQuery, и вы не можете использовать стандартный getElementById в объекте коллекции jQuery. Вместо этого вы можете использовать .find() или получить реальный Element в каком-то индексе. Вот два решения:

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

Answer 2

Так, его JQuery, она имеет следующий синтаксис:

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

, где, <selector> это селектор объекта (.class и #id).

так, вместо $("draw2").getElementById(".driver").innerHTML = name; использовать это:

$(".driver").html(name); или $(".driver").text(name);

Answer 3

сделать код как можно более простым. Попробуйте это, сначала отредактируйте свой HTML-код. Поместите другой класс для двух элементов, содержащего класс драйвера:

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

измените свой Javascript, чтобы что-то вроде этого:

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

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

если .html() не будет работать, а затем изменить ее .text()

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

Просто совет: При использовании JQuery Dont объединить синтаксис из JavaScript потому что это будет просто дать вам ошибки. Вместо этого, найдите эквивалент jQuery функции javascript: например, innerHTML = 0 на собственном javascript - это только .html (0) для jQuery или getElementById для собственного javascript - это просто знак $ jQuery.

Answer 4

Я получил его для работы. Вот что я в итоге сделал, и резюме проекта.

Это мой первый проект JavaScript/JQuery. Я пытаюсь написать программу для гоночной трассы, в которой я участвую в гонке, которая создаст список записей, рассчитает список жары на основе номера, случайным образом нарисованного во время ввода драйвером, а затем рассчитать линейки функций на основе их результатов от теплоты.

Вот форма, которую чиновник будет использовать для добавления каждого водителя. Кнопка «Добавить» запускает сценарий jQuery для заполнения имени драйвера в строке в таблице, равной количеству, которое они нарисовали.

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

Образец таблицы:

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

У меня 60 строк в общей сложности. Прямо сейчас идентификатор ничего не делает ... Я просто оставил его там, потому что раньше у меня он был там, пока я экспериментировал, и я оставляю его там, если он будет полезен раньше.

Тогда есть классы «driver1», «driver2», «driver3» и т. Д. То есть для использования jQuery.

Вот мой JQuery скрипт:

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

Делаю объект под названием «Driver», который я буду использовать позже. Прямо сейчас, это просто.

Создание переменной «name2» позволяет «$ (name2) .text (name);» найти соответствующий класс в строке, равный «draw», и поместить имя водителя в эту ничью. Например, если Джефф Гордон рисует 24, его имя будет идти в строке 24, а переменная «name2» для него в конечном итоге будет «name24».

Это имеет смысл?

Я получил эту часть для работы сейчас. Спасибо за вашу помощь.