Помогите со стартом в javascript

[djamali]

До этого 7 лет программировал на php, решил перейти на сторону добрых сил)). Начал писать первое приложение и сразу проблемы, собственно код:

function createItem(element) {
    var li=document.createElement('li');
    li.innerText=element.value;
    var ul=document.getElementById('todo');
    ul.appendChild(li);
    return li;
}
var element =document.getElementById("input");
document.getElementById("submit").onclick=createItem;
console.log(element);

<div id="todo_root">
    <form id="form">
    <ul id="todo">
        <li><input type="text" id="input"><button id="submit">Добавить</button></li>
    </ul>
    </form>
</div>

в консоле пишет Uncaught TypeError: Cannot set property 'onclick' of null
Что я делаю неправильно? В кратаце пытаюсь добавить новый элемент сиписка.

[Dilettante_Pro]

<div id="todo_root">
  
    <ul id="todo">
        <li><input type="text" id="input"><button id="submit">Добавить</button></li>
    </ul>
 
</div>
<script>
function createItem() {
    var li=document.createElement('li');
    li.innerText=element.value;
    var ul=document.getElementById('todo');
    ul.appendChild(li);
}
var element =document.getElementById("input");
document.getElementById("submit").onclick=createItem;
console.log(element);
</script>

Или так

<div id="todo_root">
    <form id="form">
    <ul id="todo">
        <li><input type="text" id="input"><button id="submit">Добавить</button></li>
    </ul>
    </form>
</div>
<script>
function createItem() {
    var li=document.createElement('li');
    li.innerText=element.value;
    var ul=document.getElementById('todo');
    ul.appendChild(li);
}
var element =document.getElementById("input");
document.getElementById("submit").onclick=createItem;
document.getElementById("form").onsubmit = function() { return false;};
console.log(element);
</script>

[Nexus]

djamali, Лучше не использовать innerText:
https://developer.mozilla.org/ru/doc...Node/innerText
На момент выполнения кода на странице отсутствует элемент с id submit.
Поместите ваш js код перед </body> или выполняйте его после загрузки страницы.
При событии "click" listener'у в кач-ве аргумента передается только экземпляр "Event", если его назвать как внешнюю переменную, то доступа к ней (внешней переменной) уже не будет.

<div id="todo_root">
    <form id="form">
    <ul id="todo">
        <li><input type="text" id="input"><button id="submit">Добавить</button></li>
    </ul>
    </form>
</div>
<script>
function createItem() {
    var li=document.createElement('li');
    li.innerText=element.value;
    var ul=document.getElementById('todo');
    ul.appendChild(li);
    return false;
}
var element =document.getElementById("input");
document.getElementById("submit").onclick=createItem;
</script>