Javascript: document.getElementById() возвращает NULL

Я совершенно новый с Javascript, и у меня возникла проблема с document.getElementById(), которая всегда возвращает NULL, и это приводит меня в бешенство.

У меня есть элемент в моем коде, и я хочу получить его координаты, чтобы я мог его перемещать.

Вот код:

<html>
  <head>
    <script type="text/javascript" >
      function MoveIt(obj) {
        alert(obj); // returns "Object HTMLDivElement"
        var xx = document.getElementById("arect");

        if(document.getElementById("arect").value == null) {
          alert('NULL >> ' + xx.value);
        }
        else {
          alert('NOT NULL >>' + xx.value);
        }

        posX = xx.style.scrollTop;
        posY = xx.style.left;
      }
    </script>
  </head>

  <body bgcolor="white" >
    <DIV class="background" id="MyDiv2">  
      <div id="arect" name="arect" class="transbox" onmousedown="MoveIt(this);" >
      </div>
    </div>
  </body>
</html>

Вышеуказанная функция MoveIt() всегда возвращает NULL

Ответы

Ответ 1

Вы никогда не проверяли getElementById(...) на NULL.

Вы отметили getElementById(...).value для NULL, а divs не имеют значения.

Также обратите внимание, что вы забыли закрыть тег <div />, который является незаконным в вашем XHTML... и по какой-то причине использовал SVG-тип. SVG не является HTML.

Не совсем понятно, что вы пытаетесь сделать здесь.

Ответ 2

Перед тем, как прочитать их, необходимо загрузить содержимое страницы. Попробуйте

window.onload = function() {
  // run your script in here
}

Или, если вы используете jQuery, предпочитайте

$(document).ready(function() {
  ...
}

Ответ 3

Элемент "isct" - это <div>, а элементы <div> не имеют значения.

Избавьтесь от этого фиктивного типа SVG.

Ответ 4

if(document.getElementById("arect").value == null){
    alert('NULL >> '+ xx.value);
  }

Этот код всегда возвращает значение null или error. Если вы хотите увидеть, существует ли объект, сделайте следующее....

if(xx == null)
   alert('Object does not exist');
else 
   alert('Object exists. Inner HTML: ' + xx.innerHTML);

Кроме того, div не имеет value. Если вы хотите получить html внутри div, используйте xx.innerHTML

Ответ 5

Во-первых, то, что вы пытаетесь сделать, чревато кросс-браузерной несогласованностью, которая будет взимать с javascript pro, поэтому вам будет лучше использовать jQuery, если вы новичок в javascript.

Во-вторых, xx не будет иметь значения, так как это DIV. Вы обнаружите, что xx не является само по себе.

Ответ 6

в моем случае это было из-за наличия этой строки в начале файла jsp/html (любой):

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

удаление его решило мою проблему.

Ответ 7

если для кнопки установлено значение visisble = false, вы не можете получить идентификатор этой кнопки на стороне клиента. Чтобы скрыть кнопку, используйте

button1.Style.Add("display","none")-- for visible false

и

button1.Style.Add("display","block")-- for visible true

и даже если кнопка включена false, мы не можем получить идентификатор кнопки на стороне клиента

Вы можете получить идентификатор кнопки document.getElementById('<% = button1.ClientID% > '); Или если вы установили ClientIDMode = "Static" для элемента управления на странице aspx, вы можете получить его напрямую с помощью document.getElementById('button1'); Или document.getElementById('MainContent_button1'); --- MainContent здесь - это идентификатор владельца содержимого, если у вас есть идентификатор заполнителя коннекта, который использует id_button1.