Я создаю JavaScript для создания графиков SVG на основе параметров пользовательского ввода, и я хотел бы добавить некоторые поля ввода, которые могут принимать числовой ввод и ввод строки.Представьте себе что-то вроде:
Graph height: [600]
Background Color: [#dfe0ef]
...
^ Представьте себе, что вместо скобок это текстовые поля на странице.
Мне было интересно, стоит ли мне использовать форму для этого,Но мне не нужно отправлять какие-либо данные на сервер, поэтому я хотел бы придерживаться только js, если это возможно, для простоты.Мне нужно, чтобы график SVG обновлялся в браузере каждый раз при вводе нового значения.
Все примеры, которые я нашел до сих пор, являются более сложными, чем мне нужно, поэтому их было трудно использоватьих как ссылки.Так что, надеюсь, кто-то здесь может объяснить: Как добавить поля ввода, которые будут обновлять скрипт (и, следовательно, SVG) после ввода?
Спасибо
Обновление: У меня естьполучил подтверждение концепции работы с тегом DIV.Теперь осталось только заменить DIV на SVG и заполнить его дополнительными параметрами.
<!DOCTYPE html>
<html>
<body>
<p>Please specify a width, a height, and a background color.</p>
<p>Width:</p>
<input
id="i_width"
type="number"
min="1"
max="1024"
value="200"
oninput="render()"
>
<br />
<p>Height:</p>
<input
id="i_height"
type="number"
min="1"
max="1024"
value="100"
oninput="render()"
>
<br />
<p>Background Color:</p>
<input
id="i_bg_color"
type="text"
value="#bada55"
oninput="render()"
>
<p id="text_output"></p>
<br />
<div id="container_output"></div>
<script>
//Gets all variable values from input fields.
//Input IDs are "i_" + "var_name"
function render() {
var width = document.getElementById("i_width").value;
var height = document.getElementById("i_height").value;
var bg_color = document.getElementById("i_bg_color").value;
//text_output
document.getElementById("text_output").innerHTML = "The width is " + width + ", and the height is " + height + ". The background color is " + bg_color + ".";
//container_output
document.getElementById("container_output").innerHTML = `
<div
style="
width:${width}px;
height:${height}px;
background-color:${bg_color};
">
</div>
`
}
</script>
</body>
</html>