javascript - 如何将文本输入绑定(bind)到同一 html 页面上的另一个 div

Question

我制作了一个标签列表，它接受用户输入并将其作为标签列表绑定(bind)到另一个输入字段。然而，在使用 Javascript 和 JQuery 数周后，我能够做到这一点的唯一方法(重要的是一种优雅的方法)就是使用 Brython。不幸的是，这似乎以某种方式禁用了 jinja2 模板，因此没有任何内容提交到数据库。所以，毕竟，我的问题是，这样一个看似简单的任务可以在 Flask 中本地完成吗？

这是 Brython 脚本工作原理的精髓 https://jsfiddle.net/5nt39deo/2/但问题所在的代码如下:

<form action="" id="homeForm" class="centered" role="form" method="post">
    {{ form1.hidden_tag() }}
    {{ form1.toppings(type="text",id="homeInput",autocomplete="off",list="topps",placeholder="Toppings...") }}
    <datalist id="topps">{% for top in topps %}<option value="{{ sym }}">{% endfor %}</datalist>
    <button action="" type="submit" id="homeAddTags" class="button">Add</button><br><br>
    {{ form1.tags(id="tagList") }}<br>
    {{ form1.agree(id="homeAgreement") }}
    {{ form1.agree.label() }}<br><br>
    <button type="reset" id="homeResetTags" class="button">Reset</button>
    {{ form1.sendtags(type="submit",class_="button",id="homeSubmit") }}<br><br>
</form>


<script type="text/python" id="script1">
    from browser import document, html, window, console, alert

    storage = []

    def addTag(e):
        item = document['homeInput'].value
        if item not in storage and item != '':
            storage.append(item)
            document['homeInput'].value = ''
            document['tagList'].textContent = storage
        else:
            alert('Tag already added.')
            document['homeInput'].value = ''

    def resetTags(e):
        storage = []
        document['homeInput'].value = ''
        document['tagList'].textContent = storage

    document['homeAddTags'].bind('click', addTag)
    document['homeResetTags'].bind('click', resetTags)
</script>

Answer 1

看看这个原生 javascript 解决方案

...
 <input type="text" id="text" placeholder="Enter something" oninput="outputUpdate();">
...

<script type="text/javascript" id="script2">

function outputUpdate(e){
let currentText=document.getElementById('text').value;

document.getElementById('output').innerHTML = currentText;

</script>

https://jsfiddle.net/kalovelo/z5ngxp31/