如何使用輸入值在HTML上書寫？

我想了解的Javascript是如何工作的，我是龍捲風（Python）的用戶，並把一個變量，我用{{variable}}，所以我只是做：如何使用輸入值在HTML上書寫？

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

來源

2013-03-13 Abdelouahab Pp

取決於您要在哪個頁面上放置數據。 – 2013-03-13 21:00:46

我想把它放在窗體外的同一頁面上，只是爲了幫助人們看到他們寫的值（格式化的） – 2013-03-13 21:03:38

最簡單的方法是修改你的目標元素的.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,或keyup，具體取決於您想更新價值的頻率。

來源

2013-03-13 21:03:21 Zeta

so'document.getElementById（「target」）。innerHTML = val'將扮演角色'{{val}}' – 2013-03-13 21:06:04

@AbdelouahabPp：大部分是的。但是，這背後的具體結構是DOM的一部分。如果修改'.innerHTML'，它將刪除元素中存在的所有子節點，所以您應該只在沒有子元素的元素中使用此方法，因爲它們也將失去事件處理程序和其他添加的功能。 – Zeta 2013-03-13 21:08:51

我會修改問題並添加代碼，我堅持如何添加變量？ – 2013-03-13 21:11:24

如何使用輸入值在HTML上書寫？

回答

相關問題