#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>