Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 20.11.2017, 14:32
Аватар для djamali
Новичок на форуме
Отправить личное сообщение для djamali Посмотреть профиль Найти все сообщения от djamali
 
Регистрация: 02.03.2015
Сообщений: 5

Помогите со стартом в javascript
До этого 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
Что я делаю неправильно? В кратаце пытаюсь добавить новый элемент сиписка.
Ответить с цитированием
  #2 (permalink)  
Старый 20.11.2017, 14:42
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,888

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

Последний раз редактировалось Dilettante_Pro, 20.11.2017 в 15:42.
Ответить с цитированием
  #3 (permalink)  
Старый 20.11.2017, 14:44
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 2,952

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>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Помогите пожалуйста с калькулятором javascript Хабиб1122 Javascript под браузер 6 27.01.2016 10:56
Помогите поправить код JavaScript на сайте karvor AJAX и COMET 1 08.02.2015 12:13
JavaScript помогите написать программу sasha332 Общие вопросы Javascript 1 04.06.2014 08:19
Последние книги по JavaScript! monolithed Учебные материалы 7 26.10.2010 18:40
Помогите, пож, младенцу восстановить работоспобность JavaScript MishkaKosolapij Общие вопросы Javascript 4 16.08.2009 22:02