То же действие по добавлению, но разные результаты в Javascript

Question

То же действие по добавлению, но разные результаты в Javascript

1

Я пытаюсь создать новый узел с уникальным идентификатором в Javascript. Для этого я создал кнопку

<input type="button" value="Add Field" onclick="AddField(this.parentElement);" />

И функция Javascript

AddField = function (ParentDom){
     var uniqueValue = ParentDom.children.length;
     var newNode = "<input id='InputName"+uniqueName+"' type='text' dir='ltr' autocomplete='on' class='form-field marge-top-20' placeholder='Name Eng' value='' oninput='SafeCopy(this, document.getElementById('inputName"+uniqueName+"')); return false;'>";
     //here will be a code to add 'newNode' as last child to 'ParentDom'
}

но когда я отлаживаю код, я получаю это

newNode = <input id="InputName7" type="text" dir="ltr" autocomplete="on" class="form-field marge-top-20" placeholder="Name Eng" value="" oninput="SafeCopy(this, document.getElementById(" inputname7'));="" return="" false;'="">

Я не понимаю, почему

id="InputName7"

работает, но

document.getElementById(" inputname7'));="" return="" false;'=""

перепутался.

После многих ответов, которые предложили добавить обратную косую черту к одинарным кавычкам, я все равно перепутаю результат:

Код:

<input id=\'InputName" + uniqueName + "\' type='text' dir='ltr' autocomplete='on' class='form-field marge-top-20' placeholder='Name Eng' value='' oninput='SafeCopy(this, document.getElementById(\'inputName" + uniqueName + "\')); return false;'>

Результат:

"<input id="InputName7" type="text" dir="ltr" autocomplete="on" class="form-field marge-top-20" placeholder="Name Eng" value="" oninput="SafeCopy(this, document.getElementById(" inputname7'));="" return="" false;'="">"

Пожалуйста помоги!

levkaster 30 июль 2017, в 20:34

Источник

Теги:

javascript

4 ответа

2

Вам нужно поставить обратную косую черту перед вашими одиночными кавычками, или ваш код будет испорчен внутри вашего oninput.

oninput='SafeCopy(this, document.getElementById(\'inputName"+uniqueName+"\')); return false;'

Val Berthe 30 июль 2017, в 16:44

1

Ваши внутренние кавычки не экранированы. Вы должны добавить обратную косую черту перед одиночными кавычками в этой части:

document.getElementById('inputName"+uniqueName+"')

потому что они встречаются в части, которая уже цитируется одинарными кавычками. Так:

document.getElementById(\'inputName"+uniqueName+"\')

(Перед исправлением вашего вопроса у вас был <div class='block'>, который игнорируется, потому что вы не закрываете тег.)

Также проверьте капитализацию inputName. Вероятно, это должно быть InputName. Но тогда все еще кажется странным, что вы хотите позвонить:

SafeCopy(this, document.getElementById(\'InputName"+uniqueName+"\')

... поскольку оба аргумента будут ссылаться на один и тот же элемент, т.е. на input на котором было инициировано событие.

trincot 30 июль 2017, в 15:23

0

uniqueName не определяется нигде, он должен быть уникальным.
Вы неправильно создаете параметр для getElementById. Это должно быть getElementById('InputName" + uniqueValue + "'). Обратите внимание, что параметр чувствителен к регистру.
Тег Div не закрыт в newNode

Sam 30 июль 2017, в 14:51

Ещё вопросы

levkaster · Accepted Answer · 2017-08-22T09-17-00.000Z

Финал получил работу! В конце нет необходимости добавлять обратную косую черту! Что нужно сделать, так это удалить ВСЕ одинарные кавычки в одинарных кавычках, а код работает:

var newNode = "<input id='InputName"+uniqueName+"' type='text' dir='ltr' autocomplete='on' class='form-field marge-top-20' placeholder='Name Eng' value='' oninput=SafeCopy(this, document.getElementById('inputName"+uniqueName+"'))>";

И это работает!

Проблема была в этом коде:

'SafeCopy(this, document.getElementById('inputName"+uniqueName+"')); return false;'

как вы можете видеть, у меня есть одиночные кавычки внутри одинарных кавычек. После того, как я изменил его на:

SafeCopy(this, document.getElementById('inputName"+uniqueName+"'))

Он работал так, как должен!