Flask wtforms Integerfield() 返回 NaN

Question

有人可以向我解釋 IntegerField() 嗎？ 我到處搜索，但沒有找到我正在尋找的好例子。 我的網站上有一個櫃台； 向上箭頭加 1，向下箭頭減 1。但是，當我單擊任一箭頭時，它只返回 NaN，並且不會更新。 有任何想法嗎？

重量表格：

class BetaForm(FlaskForm):
    streak = IntegerField('Streak')
    total = IntegerField('Total')
    submit = SubmitField('Update')

路線

def beta():
    form = BetaForm()
    if form.validate_on_submit():
        current_user.streak = form.streak.data
        current_user.total = form.total.data
        db.session.commit()
        flash('Your account has been updated!', 'success')
    return render_template('betaone.html', form=form)

HTML：

<div class="row">
   <p class="col-12 font100" id="streakcounter">{{ form.streak }}</p>
   <button id="betabuttonplus" onclick="addStreak()"><i class="fa fa-plus"></i></button>
</div>

<form method="POST" action=""> 
  <div class="form-group">
    {{ form.submit(class="my-button btn btn-outline-info") }}
  </div>
</form>

JS

function addStreak() {
    var streak = document.getElementById("streakcounter").innerHTML;
    streak++;
    document.getElementById("streakcounter").innerHTML = streak;
}

Answer 1

這里的問題在於 javascript：

document.getElementById("streakcounter").innerHTML

檢索整個input元素，但我們只想更新它的value屬性。 此 function 將正確更新值：

function addStreak() {
    document.getElementById("streak").value++;
}

通過使用 html5 type="number"輸入，可以避免必須使用 javascript 來更新表單； 現代瀏覽器會自動提供向上和向下箭頭（“微調器”）來更新值。 WTForms 在其 html5 模塊中提供這些輸入。

from wtforms import Form
from wtforms.fields import html5 as h5fields
from wtforms.widgets import html5 as h5widgets

class MyForm(Form):
    foo = h5fields.IntegerField('foo')
    bar = h5fields.IntegerField('bar', widget=h5widgets.NumberInput(min=1, max=1000, step=5))

form = MyForm()
for f in form:print(f)

<input id="foo" name="foo" step="1" type="number" value="">
<input id="bar" max="1000" min="1" name="bar" step="5" type="number" value="">