Использование document.writeln с формой ввода в Javascript

Question

Я пытаюсь ввести форму с помощью Javascript.В форме, если выпадающий выбор является определенным выбором, ниже будут отображаться определенные поля формы.

Вот код, который у меня есть в настоящее время, но он, кажется, не работает, я предполагаю, что document.writelnне правильный метод.Если я добавлю оповещение, чтобы проверить, работает ли оно с выделением, оно работает, поэтому что-то с добавлением формы не работает.После document.writeln оповещение больше не появляется?

<script language="javascript">
  var HelpTopic = document.getElementById('type');
  HelpTopic.onchange=function() {
    if(HelpTopic.value == "Analytics") {
      alert("Congrats");
      document.writeln('\<li\>
        \<label for\=\"confirm\"\>Input name*\<\/label\>
        \<input type\=\"text\" name\=\"inputs\" id\=\"names\" required \/\>
        \<\/li\>');
    } else {
      alert("Fails");
    }
  }
</script>

Answer 1

Чтобы правильно добавить элемент списка в какой-то список, вместо этого используйте такой код:

var oList = document.getElementById("MyList");
var oItem = document.createElement("li");
oItem.innerHTML = "<label for='confirm'>Input name*</label><input type='text' name='inputs' required />";
oList.appendChild(oItem);

Это добавит элемент в список с идентификатором MyList.

Answer 2

Вы не можете разбить строку на несколько строк в JS. Вам нужно что-то вроде этого:

document.writeln('\<li\>' +
  '\<label for\=\"confirm\"\>Input name*\<\/label\>' +
  '\<input type\=\"text\" name\=\"inputs\" id\=\"names\" required \/\>' +
'\<\/li\>');

РЕДАКТИРОВАТЬ : Вам не нужно так много бежать. Это будет работать так же хорошо:

document.writeln(
  '<li>' +
   '<label for="confirm">Input name*</label> ' +
   '<input type="text" name="inputs" id="names" required />' +
  '</li>');

Answer 3

То, как вы пытаетесь динамически изменить "onChange" (отсутствует заглавная буква C), похоже, имеет проблемы с Chrome

Кроме того, вы не можете разделить строку на несколько строк, как вы это сделали

Следующий код должен работать, обратите внимание, что я добавил "onChange = myfunc ();" на выбор:

<select id=type onChange=myfunc();>";
<option value=Other>Other</option>
<option value=Analytics>Analytics</option>
</select>


<script language="javascript">
function myfunc()
{
var HelpTopic = document.getElementById('type');

if(HelpTopic.value == "Analytics") {
    alert("Congrats");
    document.write('<li><label for="confirm">Input name*</label><input type="text" name="inputs" id="names" required></li>');
} else {
    alert("Fails");
}

}
</script>

Answer 4

просто быстрое примечание, многострочные строки поддерживаются в javascript, как это

'<li>\
  <label for="confirm">Input name*</label>\
  <input type="text" name="inputs" id="names" required />\
</li>'

Я согласен с Shadow Wizard, это был бы лучший способ добавить список