Console.log-getElementsByClassName

Question

I'm trying to learn HTML5 "DnD".

I have a table wich is created with HTML from PHP.

echo "<li class='elements' id='".$row['id']."' draggable='true'>".$row['element_nr']."</li>";

Now i'd like to fetch this text with javascript.

element = document.getElementsByClassName('elements');

Then just for fun i'd like to console that variable to se what's in it. So i use:

var element = document.getElementsByClassName('elements');
console.log(element);

Now when i check my console, i see nothing. When i drag the text i see nothing. I have also tryed "prompt(element);"

How can i see what´s in "var element"?
This is my code.(Not really working yet)

JS

$(document).ready(function(){
function doFirst(){
    element = document.getElementsByClassName('elements');
    element.addEventListener('dragstart', startDrag, false);
    drop_element = document.getElementById('drop_element');
    drop_element.addEventListener('dragenter', function(e){e.preventDefault();}, false);
    drop_element.addEventListener('dragover', function(e){e.preventDefault();}, false);
    drop_element.addEventListener('drop', dropped, false);
}
function startDrag(e){
    var element = document.getElementsByClassName('elements');
    console.log(element);
    e.dataTransfer.setData('Text', element);
}
function dropped(e){
    e.preventDefault();
    drop_element.innerHTML = e.dataTranfer.getData('Text');
}

window.addEventListener('Load', doFirst, false);
});

HTML

<section id="drag_element">
  <ul>
    <?php echo "<li class='elements' id='".$row['id']."' draggable='true'>".$row['element_nr']."</li>";?>
  </ul>

<section id="drop_element">
  drop here
</section>

Answer 1

The issue here is that doFirst() is never invoked because the vent listener you attached is incorrect.

Additionally, element.addEventListener isn't going to work because it's actually a live array of elements.

Try this

jQuery(function(){

  function doFirst(){
    jQuery('.elements').on('dragstart', startDrag);
    jQuery('#drop_element').on('dragenter dragover', function(e) { e.preventDefault(); });
    jQuery('#drop_element').on('drop', dropped);
}

function startDrag(e){
    var elements = document.getElementsByClassName('elements');
    console.log(elements);
    e.dataTransfer.setData('Text', element);
}
function dropped(e){
    e.preventDefault();
    jQuery('#drop_element').html(e.dataTranfer.getData('Text'));
}

jQuery('window').on('load', doFirst);
});