Как быть в этой ситуации с js html и php?

Question

[xto_tbl_takou]

Есть файл с техническим названием "add.php" внутри код начинается с <? и заканчивается ?> .
Внутри этих <? ?> "скобочек" есть следующие строки

<TR class=row2><TD>Тема объявления:<FONT color=#ff0000>*</FONT><BR>(не более $maxzag символов)</TD>
<TD><INPUT id=txtCommand name=zag class=maxiinput maxlength=$maxzag value=\"$zag\" placeholder='например, продам медикаменты...'></TD></TR>

- это первая строка она корректно работает со скриптом в конце страницы вынесенным за пределы <? ?>

Вот вторая часть кода которая не работает находится она сразу же под первой

<TR class=row1><TD>Текст объявления:<FONT color=#ff0000>*</FONT><br><br><br>Выделить текст:</TD>
<TD><TEXTAREA id=txtCommand class=maxiinput name=msg style='HEIGHT: 200px; WIDTH: 370px' id=messageFF required rows=5 placeholder='Текст объявления…'>$msg</TEXTAREA></TD></TR>

Скрипт который работает в первой части но не работает во второй

<script>
	var blackList = ['lorem', 'ipsum', 'dolor', 'sit', 'amet'];

	document.querySelector('input').onkeyup = function() {
	    var expr = new RegExp(blackList.join('|'));
	    if (this.value.search(expr) !== -1) {
	    	this.value = '';
	    }
	}
</script>

Задача скрипта удалять строку введенную пользователем если в ней находится слово из черного списка .
Вопрос , почему в первой строке все работает , а во второй нет ?
И как исправить вторую строку чтоб заработало ?

Comments

[Kovalsky]

Приведенный код отношения ко второй части разметки иметь не может, хотя бы потому что во второй части нету ни одного инпута (querySelector('input'))

[archelon]

html у вас, конечно, потрясающий. 15 лет назад такой писали. аж скупая слеза по щеке скатилась.

[archelon]

Кстати, зачем вы дважды один вопрос задали?
Почему скрипт перестает работать в?

[ThunderCat]

archelon, угу, но даже тогда приличные разрабы за такой код бивали джунов плетьми.

[xto_tbl_takou]

Никита Полевой, спасибо , скопировал скрипт и заменил на тextarea и все заработало .

[ThunderCat]

xto_tbl_takou от умножения количества одинаковых вопросов сумма ответов не меняется.

Answer 1

[archelon]

в первой части - input, а во второй - textarea, скрипт работает с инпутом.
---
перепишите JS: там, где у вас querySelector('input'), попробуйте заменить на querySelector('textarea')

Answer 2

[Владислав Радзимовский]

TL;DR

var blackList = ['lorem', 'ipsum', 'dolor', 'sit', 'amet'];

var keyUp = function() {
    var expr = new RegExp(blackList.join('|'));
    if (this.value.search(expr) !== -1) {
    	this.value = '';
    }
};

document.querySelector('input').onkeyup = keyUp;
document.querySelector('textarea').onkeyup = keyUp;

1. В js вы вешаете обработчик только на input, второе же поле у вас textbox
2. document.querySelector('input').onkeyup
Ставит обработчик только на первый попавшийся элемент
Т.е. будь у вас даже два элемета input вместо input и textare - все равно бы не заработало

Что бы решить

var blackList = ['lorem', 'ipsum', 'dolor', 'sit', 'amet'];

// Выносим функцию обработчик отдельно
var keyUp = function() {
    var expr = new RegExp(blackList.join('|'));
    if (this.value.search(expr) !== -1) {
    	this.value = '';
    }
};

// Ставим обработчик отдельно на input
document.querySelector('input').onkeyup = keyUp;
// Ставим обработчик отдельно на textarea
document.querySelector('textarea').onkeyup = keyUp;