Блог

Главная - Вопросы по программированию - Элемент не создается и не вставляется со значениями

Элемент не создается и не вставляется со значениями

#javascript #html

Вопрос:

 var input = document.getElementById("input").value;
var split1 = input.split(";");
var split2 = input.split(":");
var canvas = document.getElementById("canvas");

if (split2[0] === "draw") {
  var thing = document.createElement("div");
  thing.style.backgroundColor = split2[1];
  thing.style.height = split2[2];
  thing.style.width = split2[3];
  thing.appendChild(canvas);
}

Итак, я пытаюсь создать элемент с пользовательскими значениями в поле ввода, почему все определено, но это не работает? вот что я ввожу (значение поля ввода): «слово(двоеточие)lol(двоеточие)красный(двоеточие)без засечек»

Комментарии:

1. Вы говорите ему делать что-то только тогда, когда произносится первое слово draw . Ввод word текста не заставит его это сделать. Кроме того, вы слушаете событие, подобное change или input называете этот код?

2. Нет, чтобы вызвать код, это кнопка для запуска всего этого, но я попробую изменить несколько вещей

Ответ №1:

Я внес некоторые изменения в ваш код и добавил тест для него, вы можете запустить : «draw:red:100:200» — и проверить, что вам нужно .

Вы можете видеть, что я изменил линию :

 canvas.appendChild(thing);

поскольку вы хотите добавить «холст» , вы попытались добавить холст в новый элемент, который вы создали прямо перед этим.

 <input type="text" id="input">
<script>
  function testClick() {
    const input = document.getElementById("input").value;
    const split2 = input.split(":");
    const canvas = document.getElementById("canvas");
    if (split2[0] === "draw") {
      var thing = document.createElement("div");
      thing.style.backgroundColor = split2[1];
      thing.style.height = `${split2[2]}px`;
      thing.style.width = `${split2[3]}px`;
      canvas.appendChild(thing);
    }
  }
</script>
<button onclick="testClick()">test</button>

<div id="canvas"></div>

stackblitz : https://js-lwpolg.stackblitz.io

Рабочий пример:

Комментарии:

1. Привет, Мединиос, и добро пожаловать в SO. Знаете ли вы, что вы можете создавать фрагменты стека для создания выполняемого кода здесь, на странице? Найдите <> значок в меню «Правка». Ссылки на внешние страницы могут порваться или быть удалены, поэтому лучше всего хранить все на сайте, если только это невозможно иначе.

2. @EmielZuurbier Спасибо за совет!, я им воспользуюсь 🙂

Ответ №2:

 var input = document.getElementById("input").value;

var split2 = input.split(":");
var canvas = document.getElementById("canvas");


if (split2[0] === "draw") {
  var thing = document.createElement("div");
  
  //var textnode = document.createTextNode("xxx");
  //thing.appendChild(textnode);
  thing.style.backgroundColor = split2[1];
  thing.style.height = split2[2];
  thing.style.width = split2[3];
  canvas.append(thing);  //canvas.appendChild(thing)
  
 } 
 <input id='input' value='draw:red:15px:30px'>
<div id='canvas'></div>
Метки: