如何將 JavaScript 應用於具有不同 ID 的文本框數組？

Question

除了這篇文章； 感謝 Arsho 先生提供如此可解釋的答案。 在 HTML （或使用燒瓶）中，我有以下代碼：

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>

我們可以寫一個 JavaScript 將添加 quiz1-quiz4 並顯示總數。 如果文本框固定在這里，我可以做到，它是動態的，所以我需要專家的幫助。

Answer 1

您需要創建一個數組和 map 輸入字段，例如：

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

{ array.map((id) => <input type="number" value={"quiz-" + id} id={"quiz-" + 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;
}

希望，它會幫助你。

Answer 2

作為 JS 解決方案的補充，您可以使用dict代替學生list 。

// 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 %}

Answer 3

在模板中，您可以應用 JavaScript 的onchange事件來獲取每個文本框更改時的值。然后您可以將此值添加到同一學生的總分中。

此外，我更新了 Python 代碼以使用Dictionary而不是學生姓名List 。 它使用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)

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

如果標記可以是浮點數，請使用parseFloat function 而不是parseInt 。

圖 1：在提交表單之前，總分在測驗分數的 onchange 事件中更新。

圖 2：提交表單后，值被解析為列表，其中最后一項是總分。

如何將 JavaScript 應用於具有不同 ID 的文本框數組？

問題描述

3 個解決方案

解決方案1
1 2020-05-13 20:15:43

解決方案2
0 2020-05-13 21:06:32

解決方案3
0 已采納 2020-05-14 15:08:07

如何將 JavaScript 應用於具有不同 ID 的文本框數組？

問題描述

3 個解決方案

解決方案1 1 2020-05-13 20:15:43

解決方案2 0 2020-05-13 21:06:32

解決方案3 0 已采納 2020-05-14 15:08:07

解決方案1
1 2020-05-13 20:15:43

解決方案2
0 2020-05-13 21:06:32

解決方案3
0 已采納 2020-05-14 15:08:07