Форум программистов
 

Восстановите пароль или Зарегистрируйтесь на форуме, о проблемах и с заказом рекламы пишите сюда - alarforum@yandex.ru, проверяйте папку спам!

Вернуться   Форум программистов > Web программирование > JavaScript, Ajax
Регистрация

Восстановить пароль
Повторная активизация e-mail

Купить рекламу на форуме - 42 тыс руб за месяц

Ответ
 
Опции темы Поиск в этой теме
Старый 20.05.2015, 00:27   #1
usa-1500
Пользователь
 
Регистрация: 02.02.2014
Сообщений: 22
По умолчанию document.createElement

Тестирую свойство createElement, документа (document).


Код:
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
<style>
td select, td input {
  width: 150px;
}

label {
  display: block;
}

.error input, .error textarea {
  border: 1px solid red;
}
.error {
  color: red;
}
.myclass {border:3px solid red; 
font-size:36px; width: 115px; 
padding:10px; background:#FFCCCC; }

</style>
</head>
<body>

<div id="sos">Привет</div>
<br>
<form>
<table>
  <tr>
  <td>От кого</td>
  <td><input name="from" type="text"></td>
  </tr>
  <tr>
  <td>Ваш пароль</td>
  <td><input name="password" type="password"></td>
  </tr>
  <tr>
  <td>Повторите пароль</td>
  <td><input name="password2" type="password"></td>
  </tr>
  <tr>
  <td>Куда</td>
  <td>
    <select name="to">
      <option></option>
      <option value="1">Отдел снабжения</option>
      <option value="2">Отдел разработки</option>
      <option value="3">Директору</option>
    </select>
  </td>
  </tr>
</table>

Сообщение:
<label>
<textarea name="message" style="display:block;width:400px;height:80px"></textarea>
</label>

<input type="button" onClick="validate(this.form)" value="Проверить">
</form>

<script>

var s = document.getElementById('sos').className = 'myclass';
var mama = document.createElement('h1');
    mama.innerHTML = 'Салют!'; 
	
function showError(container, errorMessage) {
  container.className = 'error';
  var msgElem = document.createElement('span');
  msgElem.className = "error-message";
  msgElem.innerHTML = errorMessage;
  container.appendChild(msgElem);
}

function resetError(container) {
  container.className = '';
  if (container.lastChild.className == "error-message") {
    container.removeChild(container.lastChild);
  }
}

function validate(form) {
  var elems = form.elements;

  resetError(elems.from.parentNode);
  if (!elems.from.value) {
    showError(elems.from.parentNode, ' Укажите от кого.');
  }

  resetError(elems.password.parentNode);
  if (!elems.password.value) {
    showError(elems.password.parentNode, ' Укажите пароль.');
  } else if (elems.password.value != elems.password2.value) {
    showError(elems.password.parentNode, ' Пароли не совпадают.');
  }

  resetError(elems.to.parentNode);
  if (!elems.to.value) {
    showError(elems.to.parentNode, ' Укажите, куда.');
  }

  resetError(elems.message.parentNode);
  if (!elems.message.value) {
    showError(elems.message.parentNode, ' Отсутствует текст.');
  }

}

</script>


</body>
</html>
После слова "Привет", не отобразилось слово "Салют", почему?
Речь идет о фрагменте:
Код:
var s = document.getElementById('sos').className = 'myclass';
var mama = document.createElement('h1');
    mama.innerHTML = 'Салют!';
usa-1500 вне форума Ответить с цитированием
Старый 20.05.2015, 08:44   #2
Alex11223
Старожил
 
Аватар для Alex11223
 
Регистрация: 12.01.2011
Сообщений: 19,500
По умолчанию

Вы создали его, но не добавили никуда.
Ушел с форума, https://www.programmersforum.rocks, alex.pantec@gmail.com, https://github.com/AlexP11223
ЛС отключены Аларом.
Alex11223 вне форума Ответить с цитированием
Старый 27.05.2015, 22:20   #3
usa-1500
Пользователь
 
Регистрация: 02.02.2014
Сообщений: 22
По умолчанию

Написал так:

Код:
var s = document.getElementById('sos').className = 'myclass';
var mama = document.createElement('h1');
    mama.innerHTML = 'Салют!'; 
	s.appendChild(mama);
Все равно не сработало
usa-1500 вне форума Ответить с цитированием
Старый 28.05.2015, 00:15   #4
Fenex
Форумчанин
 
Аватар для Fenex
 
Регистрация: 15.02.2012
Сообщений: 823
По умолчанию

Возможно потому что DOM ещё не готов.

Попробуйте так:
Код:
document.addEventListener('DOMContentLoaded', function() {
    var s = document.getElementById('sos').className = 'myclass';
    var mama = document.createElement('h1');
    mama.innerHTML = 'Салют!'; 
    s.appendChild(mama);
});
^-.-^ My GitHub
Fenex вне форума Ответить с цитированием
Старый 28.05.2015, 00:46   #5
usa-1500
Пользователь
 
Регистрация: 02.02.2014
Сообщений: 22
По умолчанию

Не, так не срабатывает.
Код:
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
<style>
td select, td input {
  width: 150px;
}

label {
  display: block;
}

.error input, .error textarea {
  border: 1px solid red;
}
.error {
  color: red;
}
.myclass {border:3px solid red; 
font-size:36px; width: 115px; 
padding:10px; background:#FFCCCC; }

</style>
</head>
<body>
<div id="sos">Привет</div>

<br>
<form>
<table>
  <tr>
  <td>От кого</td>
  <td><input name="from" type="text"></td>
  </tr>
  <tr>
  <td>Ваш пароль</td>
  <td><input name="password" type="password"></td>
  </tr>
  <tr>
  <td>Повторите пароль</td>
  <td><input name="password2" type="password"></td>
  </tr>
  <tr>
  <td>Куда</td>
  <td>
    <select name="to">
      <option></option>
      <option value="1">Отдел снабжения</option>
      <option value="2">Отдел разработки</option>
      <option value="3">Директору</option>
    </select>
  </td>
  </tr>
</table>

Сообщение:
<label>
<textarea name="message" style="display:block;width:400px;height:80px"></textarea>
</label>

<input type="button" onClick="validate(this.form)" value="Проверить">
</form>

<script>

document.addEventListener('DOMContentLoaded', function() {
    var s = document.getElementById('sos').className = 'myclass';
    var mama = document.createElement('h1');
    mama.innerHTML = 'Салют!'; 
    s.appendChild(mama);
});
		
	
function showError(container, errorMessage) {
  container.className = 'error';
  var msgElem = document.createElement('span');
  msgElem.className = "error-message";
  msgElem.innerHTML = errorMessage;
  container.appendChild(msgElem);
}

function resetError(container) {
  container.className = '';
  if (container.lastChild.className == "error-message") {
    container.removeChild(container.lastChild);
  }
}

function validate(form) {
  var elems = form.elements;

  resetError(elems.from.parentNode);
  if (!elems.from.value) {
    showError(elems.from.parentNode, ' Укажите от кого.');
  }

  resetError(elems.password.parentNode);
  if (!elems.password.value) {
    showError(elems.password.parentNode, ' Укажите пароль.');
  } else if (elems.password.value != elems.password2.value) {
    showError(elems.password.parentNode, ' Пароли не совпадают.');
  }

  resetError(elems.to.parentNode);
  if (!elems.to.value) {
    showError(elems.to.parentNode, ' Укажите, куда.');
  }

  resetError(elems.message.parentNode);
  if (!elems.message.value) {
    showError(elems.message.parentNode, ' Отсутствует текст.');
  }

}

</script>


</body>
</html>
usa-1500 вне форума Ответить с цитированием
Старый 28.05.2015, 02:10   #6
Fenex
Форумчанин
 
Аватар для Fenex
 
Регистрация: 15.02.2012
Сообщений: 823
По умолчанию

Да, фэил. Так надо:

Код:
document.addEventListener('DOMContentLoaded', function() {
    var s = document.getElementById('sos');
    s.className = 'myclass';
    var mama = document.createElement('h1');
    mama.innerHTML = 'Салют!'; 
    s.appendChild(mama);
});
^-.-^ My GitHub
Fenex вне форума Ответить с цитированием
Ответ


Купить рекламу на форуме - 42 тыс руб за месяц

Опции темы Поиск в этой теме
Поиск в этой теме:

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Не работает document.open poctek JavaScript, Ajax 6 31.01.2014 19:51
Document Root ROMIK XAKER Помощь студентам 12 07.08.2013 14:48
Ошибка на document.getelementbyid в ИЕ! Andrey771 JavaScript, Ajax 3 05.09.2011 20:05
Особенности document.write() Vitalyk JavaScript, Ajax 8 14.02.2010 22:41
document.write Flamberg JavaScript, Ajax 1 10.01.2010 15:07