如何使用输入值编写HTML

How to write on an HTML using an input value?

本文关键字：HTML 何使用 输入      更新时间：2023-09-26

我想了解Javascript是如何工作的，我是Tornado (Python)的用户，并且要放一个变量，我使用{{variable}}，所以我只是做:

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

现在我试着做一个实时的HTML编辑，如果一个用户写1000为例，有一个地方他可以看到一个格式化的值，例如1 000

在javascript中，我可以使用document.getElementById("price").value从控制台获得值，然后，我如何放入HTML代码?

对不起，这似乎是一个愚蠢的问题。

下面是代码: 
<input id="price" type="number" name="prix" required title="put here..." placeholder="example: 800000" min="1" step="1">
<script>var val = document.getElementById("price").value;
document.getElementById("ggg").innerHTML = val;</script>`<h1 id="ggg">test</h1>`

最简单的方法是修改目标元素的.innerHTML属性:

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

你也可以修改.textContent。

要做实时部分，你必须使用事件处理程序，当值发生变化时调用:

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

注意，change可能只在元素失去焦点时触发。其他可能方便的事件是keypress, keydown或keyup，这取决于您想要更新值的频率。

相关文章：