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

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

javascript html flask

如何将JavaScript应用于具有不同ID的文本框数组？,javascript,html,flask,Javascript,Html,Flask,除此之外,；感谢阿尔肖先生提供了这样一个可解释的答案。在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（或使用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模板的索引如下所示：

<!-- dynamic_input.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>


评分
{s的%s在学生%}
{{s}}：
{%endfor%}

我们可以写一个JavaScript来添加quiz1-quiz4并显示总数吗。我可以这样做，如果文本框是固定在这里它是动态的，所以我需要专家的帮助

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

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

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

let数组=[1,2,3,4,5]
{array.map（（id）=>）}

然后在某个地方：

function getTotal(array) {
  var i = 0, total = 0, el;
  while (i < array.length) {
    el = document.getElementById('quiz-' + array[i++]);
    if (el) total += parseInt(el.value) | 0;
  }
  return total;
}

函数getTotal（数组）{
var i=0，总计=0，el；
while（i


希望它能对你有所帮助。
作为JS解决方案的补充，你可以使用dict
代替列表

// python
students = {1: 'Mr. A', 2: 'Mr. B', 3: 'Mr. C'}

// html
{% for id, name in students.items() %}
<div>
   {{ name }}:
     <input type="text" value="Quiz1" name="quiz-{{ id }}[]" id="quiz-{{ id }}">
     <input type="text" value="Quiz2" name="quiz-{{ id }}[]" id="quiz-{{ id }}">
     <input type="text" value="Quiz3" name="quiz-{{ id }}[]" id="quiz-{{ id }}">
     <input type="text" value="Total" name="total-{{ id }}[]" id="quiz-total-{{ id }}">
 </div>
{% endfor %}

//python
学生={1:'A先生'，2:'B先生'，3:'C先生'}
//html
{id为%s，名称为students.items（）%}
{{name}}：
{%endfor%}
在模板中，您可以应用JavaScript的onchange
事件，以获取每个文本框在更改时的值。然后您可以将该值添加到同一学生的总分中
另外,，
我已经更新了Python代码以使用字典
，而不是学生姓名列表
。它使用request.form.getlist（）
方法将每个学生的分数作为一个列表来获取。此列表包含3个测验分数和每个学生的总分数
app.py
：
from flask import Flask, render_template, url_for, request, jsonify, redirect

app = Flask(__name__)

@app.route('/')
def search():
    students = {1: 'Mr. A', 2: 'Mr. B', 3: '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('search'))
    else:
        data = []
        for student in request.form:
            data.append(request.form.getlist(student))
        return jsonify(data)

动态输入.html
：
<html>
<head>
  <title>Dynamic calculation using JS</title>
</head>
<body>
  <div class="container">
    <h1>Give the grades</h1>
    <form action="/results" method="post">
      {% for student_id, student_name in students.items() %}
      <div class="student_wrapper">
        {{ student_name }}:
        <input type="text" onchange="update_marks(this);" placeholder="Enter Quiz 1 marks of {{ student_name }}" name="students_{{ student_id }}_marks" id="quiz_1_{{ student_id }}">
        <input type="text" onchange="update_marks(this);" placeholder="Enter Quiz 2 marks of {{ student_name }}" name="students_{{ student_id }}_marks" id="quiz_2_{{ student_id }}">
        <input type="text" onchange="update_marks(this);" placeholder="Enter Quiz 3 marks of {{ student_name }}" name="students_{{ student_id }}_marks" id="quiz_3_{{ student_id }}">
        <input type="text" class="total_marks" value="0" placeholder="Total marks of {{ student_name }}" name="students_{{ student_id }}_marks">
      </div>
      {% endfor %}
      <input type="submit" value="Select">
    </form>
  </div>
  <script>
    function update_marks(current_element){
      var student_element = current_element.closest(".student_wrapper");
      var total_marks_element = student_element.querySelector(".total_marks");
      total_marks_element.value=parseInt(total_marks_element.value)+parseInt(current_element.value);
    }
  </script>
</body>
</html>


用JS进行动力计算
评分
{%对于学生id，学生名在students.items（）%}
{{学生姓名}}：
{%endfor%}
功能更新标记（当前元素）{
var student\u element=当前的\u元素。最近的（“.student\u包装”）；
var total_marks_element=student_element.querySelector（“.total_marks”）；
total_marks_element.value=parseInt（total_marks_element.value）+parseInt（current_element.value）；
}

如果标记可以是浮点数，请使用parseFloat
函数而不是parseInt

图1:在提交表格之前，总分数将在测验分数的一次更改事件中更新

图2:提交表单后，表单值被解析到列表中，其中最后一项是总分
谢谢你，亲爱的。真的很感谢你的时间和努力。@JunaidBaber，如果答案能解决你的问题，请投票并接受它。非常感谢。