函数在控制台中工作时，不返回嵌入html中的任何内容

Question

我有以下函数。它在控制台中正确运行，但在我的网站上没有返回任何内容。

(对JS来说很新)

控制台输出:

>       function format_number_euro(number) {
...         let formatter = new Intl.NumberFormat('nl-NL', {style: 'currency', currency: 'EUR'})
...         return formatter.format(number)
...       }
undefined
> format_number_euro(25412)
'€ 25.412,00'

我在我的web应用程序中调用它的方式:

1. 在我的body标签中定义函数:

<script type="text/javascript">
function format_number_euro(number) {
let formatter = new Intl.NumberFormat('nl-NL', {style: 'currency', currency: 'EUR'})
return formatter.format(number)
}
</script>

然后，我调用它来格式化数字:

<div class="card-body">
<span class="font-weight-bolder display-4 text-dark-75 py-4 pl-5 pr-5">
<script> format_number_euro( {{ total }} ) </script>
</span>
</div>

total变量来自我的Python代码，它在从数据中检索时传递变量(我认为这是Jinja?):

@app.route("/summary", methods=["GET", "POST"])
@login_required
def summary(total):
return render_template("summary.html", total=total)

但是这没有返回任何东西。我在这里犯了什么错误?

Answer 1

如果你想在HTML文档中插入一个值，你需要使用像Element.append()这样的DOM方法。

例如

<script>
function format_number_euro(number) {
let formatter = new Intl.NumberFormat('nl-NL', {
style: 'currency',
currency: 'EUR'
})
return formatter.format(number)
}
</script>
<div class="card-body">
<span class="font-weight-bolder display-4 text-dark-75 py-4 pl-5 pr-5">
<script>
// Append the text value to this script tag's parent element
document.currentScript.parentElement.append(format_number_euro(25412))
</script>
</span>
</div>

参见文档。currentScript和Node.parentElement