如何将JavaScript应用于具有不同ID的文本框数组

问题描述 投票:0回答:1

[除此post之外,感谢Arsho先生提供了这种可解释的答案。在HTML(或带有flask)中,我有以下代码

from flask import Flask, render_template, url_for, request

app = Flask(__name__)

@app.route('/')
def search():
    students = ["Mr. A", "Mr. B", "Mr. C"]
    return render_template('dynamic_input.html', students=students)

@app.route('/results', methods = ['GET', 'POST'])
def results():
    if request.method == 'GET':
        return redirect(url_for('/'))
    else:
        ##I can handle this here

if __name__ == '__main__':
    app.run(debug = True)

HTML模板如下索引

<!DOCTYPE html>

<div class = "container">
  <h1>give the grades</h1>
  <form action='/results' method="post">
      {% for s in students%} 
    <div>
    
       {{s}}:<input type="text" value="Quiz1" name="quiz1[]">
        <input type="text" value="Quiz2" name="quiz2[]">
         <input type="text" value="Quiz3" name="quiz3[]">
         <input type="text" value="Total" name="total[]">
            
     </div>
   {%endfor%}
    <input type='submit' value='Select'>
  </form>
</div>

我们可以编写一个Javascript来添加quiz1-quiz4并显示总数吗。如果texboxes固定在这里,那是动态的,所以我可以做得到,所以我需要专家的帮助。

javascript html flask
1个回答
1
投票

您需要创建一个数组并映射输入字段,例如:

let yourArray = [1, 2, 3, 4, 5]

{yourArray.map(value => <input type="number" value={"quiz-" + value} id={"quiz-" + value}> )

然后在某处:

function getTotal(){
  let myTotal = 0;
  for (let i = 0; i < yourArray.length; i++){
    myTotal += parseInt(document.getElementById(`quiz-${yourArray[i]}`).value)
  }
  return myTotal
}

希望,它将对您有帮助

© www.soinside.com 2019 - 2024. All rights reserved.