Javascript 如何使用输入值在HTML上编写？

我想了解Javascript是如何工作的，我是Tornado（Python）的用户，为了放置一个变量，我使用

{{variable}}

，所以我只需要：

<h1> {{variable}} </h1>

---

最简单的方法是修改目标元素的属性：

var val = document.getElementById("price").value;
document.getElementById("target").innerHTML = val;

您还可以修改

要执行实时部分，必须使用事件处理程序，只要值发生更改，就会调用该事件处理程序：

document.getElementById("price").onchange = function(e){
    document.getElementById("target").innerHTML = this.value;
};

---

请注意，

change

只有在元素失去焦点时才会触发。其他可能很方便的事件有

keypress

、

keydown

或

keydup

，这取决于您希望更新值的频率。

取决于您希望将数据放在页面的何处。我想将其放在表单之外的同一页面上，只是为了帮助人们查看他们编写的值（格式化的值）因此

document.getElementById（“target”）.innerHTML=val

将扮演

{{val}}

@AbdelouahabPp:大多数情况下，是的。然而，这背后的具体结构是DOM的一部分。如果修改

.innerHTML

，它将删除元素中存在的所有子节点，因此您应该只在没有子节点的元素中使用此方法，因为它们也将失去事件处理程序和其他添加的功能。我将修改问题并添加代码，我被困于如何添加变量？没有变量。您必须将id应用于目标元素，并使用

document.getElementById

查找该元素。如果您不理解

id

、

document

或

element

中的一个术语，那么您真的需要了解DOM（可能还有一般的JavaScript）。它很有效，谢谢您，正如您所说，我必须处理所有事件：

document.getElementById（“price”）.onchange=function（e）{document.getElementById（“hh”）.innerHTML=this.value；}；document.getElementById（“price”）.onkeydown=function（e）{document.getElementById（“hhh”）.innerHTML=this.value；}
document.getElementById("price").onchange = function(e){
    document.getElementById("target").innerHTML = this.value;
};