Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Динамическое создание элементов. Не работает onclick (https://javascript.ru/forum/dom-window/49107-dinamicheskoe-sozdanie-ehlementov-ne-rabotaet-onclick.html)

Master_Sergius 29.07.2014 17:35

Динамическое создание элементов. Не работает onclick
 
Здравствуйте! Пытаюсь сделать маленький тест, каждый новый вопрос появляется после ответа на предыдущий.
Создаю кнопку перехода к следующему вопросу.
var next = document.createElement("input");
  next.setAttribute('type','button');
  next.setAttribute('value','next');
  next.setAttribute('onclick',question2);
  //next.attachEvent('onclick',question2);
  document.body.appendChild(next);

где question2 - функция, в которую хотелось бы передать ещё параметр - ответ на предыдущий вопрос. Но это потом. Для начала у меня не срабатывает она никак:
function question2()
{
  document.write('it works!');
  alert("wtf");
}

Если расскоментирую attachEvent, а через аттрибут закоментирую, то кнопка вообще не появляется. Подскажите в чём проблема, или хотя бы где посмотреть/почитать.

Erolast 29.07.2014 18:03

http://javascript.ru/tutorial/events/intro

И можно писать просто next.type = "button", next.value = "next"

Master_Sergius 29.07.2014 21:27

Цитата:

Сообщение от Erolast (Сообщение 323295)
http://javascript.ru/tutorial/events/intro

И можно писать просто next.type = "button", next.value = "next"

Большое спасибо! Теперь вроде всё понятно. Но, как присваивать аттрибуты лучше по стилю? По-моему, через точку доступаться к полям лучше только при работе со своими объектами, не?

Sklifosofsky 29.07.2014 21:55

Здесь конструкция с кавычками setAttribute аналогична
next.setAttribute('onclick','question2()');

Vlasenko Fedor 30.07.2014 00:49

Цитата:

Сообщение от Sklifosofsky (Сообщение 323320)
Здесь конструкция с кавычками setAttribute аналогична
next.setAttribute('onclick','question2()');

Может все таки так уже писать
next.onclick = question2;
function question2(){
	alert('Ya');
}

еще статья на заметку
http://javascript.ru/unsorted/top-10...ns#10-addevent

Erolast 30.07.2014 07:20

Цитата:

Но, как присваивать аттрибуты лучше по стилю? По-моему, через точку доступаться к полям лучше только при работе со своими объектами, не?
Важно понимать разницу между свойствами и аттрибутами - http://javascript.ru/tutorial/dom/attributes.
Обычно изменяют через свойства.

Master_Sergius 30.07.2014 09:48

И всё-таки, что-то никак не получается сделать рабочим онклик!!!
прошу взглянуть весь код (там пока бардак, но даже с алертом не пашет):
function start()
{
  document.write('Choose importance of decision<br />');
  // Create a select element dynamically
  var select = document.createElement("select");
  for (var i=1; i<=10; i++)
  {
    var option = document.createElement("option");
    option.text = i;
    option.value = i;
    try
    {
      select.add(option, null); //Standard
    } catch(error)
    {
      select.add(option); // IE only
    }
  }
  document.body.appendChild(select);
  // End of creating select
  var next = document.createElement("input");
  next.setAttribute('type','button');
  next.setAttribute('value','next');
  //next.addEventListener = ("click", function() { alert('whats up, nigga?') }, false)
  next.onclick = function() { alert('whats up, nigga?'); };
  //next.onclick = function() { question2('whats up, nigga?') }
  //next.setAttribute('onclick',question2);
  //next.attachEvent('onclick',question2);
  document.body.appendChild(next);
}

function question2(msg)
{
  document.write('it works!');
  alert(msg);
}


Почему не хочет кликаться? (там закомментированы все попытки)

Erolast 30.07.2014 09:53

Как так? Код рабочий.
Загляни в консоль ошибок, должно проясниться. Обычно она открывается по Ctrl+Shift+I.

Master_Sergius 30.07.2014 11:07

Ничего не показывает. У вас код работает?

Erolast 30.07.2014 11:14

http://learn.javascript.ru/play/Ul7x4b

Aetae 30.07.2014 11:34

Автору темы будет нелишним.

Master_Sergius 30.07.2014 16:22

Цитата:

Сообщение от Aetae (Сообщение 323377)
Автору темы будет нелишним.

Спасибо, нелишнее )

А вот это:
Цитата:

Сообщение от Erolast (Сообщение 323370)

Действительно, рабатает. Тогда почему у меня в браузере не работает, если открываю сам файл index.html? Не появляется алерт и всё!

Erolast 30.07.2014 17:17

Я же сказал - посмотри в консоль ошибок.

Master_Sergius 30.07.2014 18:08

Не пишет же, я писал раньше. Реально, не могу понять в чём прикол. Что в мозилле, что в хроме

Erolast 30.07.2014 18:15

Покажи свой index.html

Master_Sergius 30.07.2014 18:42

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”
“http://www.w3.org/TR/html4/strict.dtd”>
<html>
<head>
  <META http-equiv="Content-Script-Type" content="text/javascript">
  <title>Decision Helper, v1.0</title>
  <LINK rel=“stylesheet” href=“styles.css" type=“text/css”>
  <script type="text/javascript" src="scripts.js"></script>
</head>

<body>
  <h3>Decision Helper</h3>
  <form>
    <input type="button" value="Start" onclick="start()">
  </form>
</body>
</html>

Master_Sergius 30.07.2014 19:11

Цитата:

Сообщение от Rise (Сообщение 323478)
Master_Sergius, а scripts.js?

Выложен выше

рони 30.07.2014 19:18

Master_Sergius,
браузер ie?

Master_Sergius 30.07.2014 19:25

Цитата:

Сообщение от Rise (Сообщение 323481)
Master_Sergius, в порядок его приведи...


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

Erolast 30.07.2014 19:29

Прочти статью по ссылке, что дал Aetae.
Нельзя использовать document.write после того, как документ загружен.

Master_Sergius 30.07.2014 19:32

Цитата:

Сообщение от Erolast (Сообщение 323483)
Прочти статью по ссылке, что дал Aetae.
Нельзя использовать document.write после того, как документ загружен.

Это я понял, но почему ф-ия с алертом не работает?

рони 30.07.2014 19:35

Master_Sergius,
попробуйте переписать свой код и неиспользовать это
Цитата:

Сообщение от Master_Sergius
document.write

Цитата:

Сообщение от Master_Sergius
start()


Master_Sergius 31.07.2014 13:13

Переписал, это заработало! Теперь, пытаюсь создать область с радио кнопками, и они без подписей получаются...

var question = document.createElement("p");
  question.setAttribute('class', 'question');
  question.setAttribute('id', 'question');
  question.innerHTML = 'Is it your intension or somebody\'s offer?';
  document.body.appendChild(question);
  var fieldset = document.createElement("fieldset");
  var legend = document.createElement("legend");
  legend.innerHTML = 'Choose one of:';
  fieldset.appendChild(legend);
  var option = document.createElement("input");
  option.setAttribute('type', 'radio');
  option.setAttribute('name', 'answer');
  option.setAttribute('id', 'a1');
  option.setAttribute('value', 'a1');
  fieldset.appendChild(option);
  option.innerHTML = 'my intension';
  var br = document.createElement("br");
  fieldset.appendChild(br);
  var option = document.createElement("input");
  option.setAttribute('type', 'radio');
  option.setAttribute('name', 'answer');
  option.setAttribute('id', 'a2');
  option.setAttribute('value', 'a2');
  option.innerHTML = 'somebody\'s offer';
  fieldset.appendChild(option);
  document.body.appendChild(fieldset);


Тобишь вот этих option.innerHTML не видно. Но когда беру инспект елемент, то код вроде всё ок, по образу и подобию написал чисто хтмл и всё ок. В чём может быть проблема?

Erolast 31.07.2014 15:02

А ты где-нибудь видел, чтобы у инпутов был innerHTML?

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

Master_Sergius 31.07.2014 15:17

А как тогда создать скриптом инпуты радиобаттоны? В обычных кнопках - велью - подпись

Master_Sergius 01.08.2014 00:35

Спасибо, через лабел работает. Но, если просто писать сам код хтмл вот так:

<fieldset>
<legend>Choose one of:</legend>
<input type="radio" name="answer" id="a1" value="a1">answer 1</input>
<br />
<input type="radio" name="answer" id="a2" value="a2">answer 2</input>
</fieldset>


То есть подписи без лабелов

Erolast 01.08.2014 08:54

Нет, это не подпись. Это просто текст после инпута. Браузер отбрасывает ненужный закрывающий тег, и получается так:
<fieldset>
<legend>Choose one of:</legend>
<input type="radio" name="answer" id="a1" value="a1">answer 1
<br />
<input type="radio" name="answer" id="a2" value="a2">answer 2
</fieldset>

Master_Sergius 02.08.2014 11:51

Большое всем спасибо! Всё теперь получается. Как тему закрыть? Или позначить, что "решено"?

Erolast 02.08.2014 12:43

Никак. Зачем это?

Master_Sergius 02.08.2014 15:57

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

Aetae 02.08.2014 21:56

Тут формат форума, а не q&a. Суть тут не решить чьи-то проблемы, а всесторонне оные обсудить.=)


Часовой пояс GMT +3, время: 16:20.