начинаю изучать java script

суббота, 25 октября 2014

17:00

все записи пользователя в сообществе .Тапка.

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

function addf()
{
  var a = document.getElementById('text1').value;
  var b = document.getElementById('number').value;

  document.getElementById('list').write('<li>'+a+'</li><li>'+b+'</li>');
}

к кнопке добавила onclick="addf()". но ничего не заработало

эм, вот собственно ошибка.

заранее спасибо за помощь)

решение найдено

@темы: Java script

URL

Жизнь весьма непредсказуемая штука.... Вышел в середине... блииин, ну я совсем этого не понимаю! что это за люди????... Вот стоит только подумать, что все хорошо, обязательно ка...

Оказывается можно убедить себя, что ты не устал, и устало... Корейцы молодцы!!! буду за них болеть! Я не хочу быть дворцом для вечно здравствующих. ...

Комментарии

25.10.2014 в 17:03

Скептичный циник

Миру - мир. А Вам - пломбир!

Без разметки не понятно. Что такое "text1"?
Ошибка явно говорит о том, что у этого узла нет параметра value.

URL

25.10.2014 в 17:16

.Тапка.

Скептичный циник,
но у них же вроде должны быть value, нет? в смысле когда вводишь в текстовом поле что-то, value изменяется на его содержимое.

               <!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Test task</title>
  <link rel="stylesheet" type="text/css" href="style.css">
  <sсript type="text/javasсript"> 

  function addf()
{
  var a = document.getElementById('text1').value;
  var b = document.getElementById('number').value;

  document.getElementById("list").write("<li>"+a+"</li><li>"+b+"</li>");
}

  </sсriрt>
 </head>
 <body>
   <header>
   	  	  <img src="photo.png">
   	  		<span class="name">Name Surname</span>
   	  		<p class="info">email<br/>phone</p>
   </header>
      		<div class="column1">
   			&lt;textarea name="text1" id="text1">&lt;/textarea>
   			<br/><input size="40" id="number">
   			<br/><button onclick="addf();">Add</button>
   		</div>
   		<div class="column2">
   			<ul id="list"></ul>
   		</div>
   <footer>
   		<input size="40" value="filter"></p>
   </footer>
 </body>
</html>

URL

25.10.2014 в 17:30

Скептичный циник

Миру - мир. А Вам - пломбир!

1. js должен быть после разметки (например, перед закрытием тега body).
2. Не используйте write(). Вообще. Вместо него: innerHTML / appendChild.

Ваш пример становится таким (просто заменил write на конкатенацию с innerHTML) и всё работает:

<!DOCTYPE html>
<html>
    <head>
        <title>List test</title>
    </head>
    <body>

        <div class="column1">
            &lt;textarea name="text1" id="text1">&lt;/textarea>
            <br/><input size="40" id="number">
            <br/><button onclick="addf();">Add</button>
        </div>

        <div class="column2">
            <ul id="list"></ul>
        </div>

        <sсript type="text/javasсript">
            function addf() {
              var a = document.getElementById('text1').value;
              var b = document.getElementById('number').value;

              document.getElementById('list').innerHTML += '<li>'+a+'</li><li>'+b+'</li>';
            }
        </sсriрt>
    </body>
</html>

URL

25.10.2014 в 17:33

Скептичный циник

Миру - мир. А Вам - пломбир!

Добавлю хороших практик.

1. Вместо onclick используйте подписку на события иначе при большом количестве или при множественных подписках на одно событие всё может превратиться в кашу:

// Код внутри этой функции будет выполнять код при клике
var onMyButtonClick = function() { console.log('Yay, you clicked button') };
// Находим кнопку в DOM
var button = document.getElementById('MyButton');
// Связываем функцию-обработчик и событие
button.addEventListener('click', onMyButtonClick, false);

Прочесть больше.

2. Используйте innerHTML / createElement / appendChild / ... вместо write ибо он может вызывать проблемы в разных браузерах:

var myList = document.getElementById('MyList');
var newListItem = document.createElement("li");
newListItem.innerHTML = 'Some new cool text';
myList.appendChild(newListItem);

URL

25.10.2014 в 17:47

.Тапка.

Скептичный циник, спасибо! и за инфу особенно.
только теперь пишет что функция не определена. не подскажите, от чего это может быть?

URL

25.10.2014 в 18:19

Скептичный циник

Миру - мир. А Вам - пломбир!

Функция должна быть определена в момент её использования. Теоретически, ваш код должен работать.
Где проверяете? Тестил код из коммента выше в FireFox/Chrome/Safari – всё норм. В он-лайн редакторах – не всегда и зависит от реализации.

Пример: jsfiddle.net/6a4r27Lc/1/
Обратите внимание на селектор слева:
Если в head/body без враппера, то всё ок.
Если onDomReady/onDomLoad, то ошибка – при рендере разметки транслятор не может найти функцию и выкидывает ошибку.

Результирующий совет: используйте addEventListener (или attachEvent для старых IE).

URL

25.10.2014 в 18:27

.Тапка.

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

URL

25.10.2014 в 18:30

Скептичный циник

Миру - мир. А Вам - пломбир!

Не забудьте проверить код, который копируете (: Дайри заботится об xss/xsrf и немного корявит код – меняет латинские "c" на кириллические "с". Это отлично видно в редакторе с подсветкой кода.
Такой код, конечно, не будет работать (:

URL

25.10.2014 в 18:57

.Тапка.

Скептичный циник, нет, это я поправила)

URL


Запомнить

начинаю изучать java script

ru_programming