如何添加一旦输入值将更新的输入字段？

Question

I am creating a javascript for creating SVG graphs based on user-input parameters, and I would like to add some input fields that can accept numeric input and string input. 我正在创建一个JavaScript，用于根据用户输入的参数创建SVG图，并且我想添加一些可以接受数字输入和字符串输入的输入字段。 Imagine something like: 想象一下：

Graph height: [600]
Background Color: [#dfe0ef]
...

^ ^{Imagine that instead of brackets those are text fields on the page.} ^ ^{想象一下，不是括号，而是页面上的文本字段。}

I was wondering if I should use a form for this. 我想知道是否应该为此使用表格。 But I don't need to send any data to a server, so I would like to stick with only js if possible to keep it simple. 但是我不需要将任何数据发送到服务器，因此我想尽可能地坚持使用js。 I do need the SVG graph to update in the browser every time a new value is entered. 每当输入新值时，我确实需要在浏览器中更新SVG图。

All of the examples I've found so far are more complex than what I need, so it has been difficult to use them as references. 到目前为止，我发现的所有示例都比我需要的复杂，因此很难将它们用作参考。 So hopefully somebody here can explain: How to add input fields that will update the script (and therefor the SVG) once entered? 因此希望这里的人可以解释一下：如何添加输入字段，一旦输入将更新脚本（以及SVG）？

Thanks 谢谢

Update: I've got a proof-of-concept working with a DIV tag. 更新：我有一个使用DIV标签的概念验证。 So now all that's left is to replace the DIV with an SVG and populate it with more parameters. 所以现在剩下的就是用SVG替换DIV并用更多参数填充它。

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

Answer 1

You can attach listeners for the oninput event in JavaScript like so: 您可以像这样在JavaScript中为oninput事件附加侦听器：

text_field_element.addEventListener('oninput', () => {
    //redraw 
}

where text_field_element is some <input> element. 其中text_field_element是一些<input>元素。

Without seeing more details about your implementation, I'm not sure what to say about redrawing the actual graphs, though attaching that listener should get your foot in the door. 在没有看到有关实现的更多详细信息的情况下，我不确定要重画实际的图形该说些什么，尽管附加该侦听器应该会使您步入正轨。

Answer 2

This is how I would do it: 这就是我要做的：

 theHeight.addEventListener("input", () => { theRect.setAttributeNS(null, "height", theHeight.value); });

 svg{border:1px solid; width:90vh}

 <svg viewBox="0 0 100 50"> <rect id="theRect" x="20" y="10" width="60" height="30" fill="skyBlue" /> </svg> <input id="theHeight" type="number" min="1" max="40" value="30" />

如何添加一旦输入值将更新的输入字段？

问题描述

2 个解决方案

解决方案1
1 已采纳 2018-12-26 04:00:57

解决方案2
1 2018-12-26 08:26:04

如何添加一旦输入值将更新的输入字段？

问题描述

2 个解决方案

解决方案1 1 已采纳 2018-12-26 04:00:57

解决方案2 1 2018-12-26 08:26:04

解决方案1
1 已采纳 2018-12-26 04:00:57

解决方案2
1 2018-12-26 08:26:04