javascriptの何かが変でpythonのrequest.form.getで値が上手く取れない

Question

前提

HTMLとjavascriptとpython、mysqlを使っています。
自分の取り出したいカテゴリを選択するとpromptが出てきていくつかの質問に正しく回答するとそのカテゴリの内容が表示されるという機能を作ろうとしています。

実現したいこと

HTMLのカテゴリボタンを押したらpromptが3回出て、全て正しく回答したらそのカテゴリの値をpythonに渡す。
その渡された値を元に該当する内容を持ってきて表示したい。

失敗したときには失敗メッセージを出す。

発生している問題・エラーメッセージ

sqlalchemy.exc.CompileError: Don't know how to render literal SQL value: None

このコードで言うとrecordの値がpythonでのcategory = request.form.get("record")の時に上手く渡されておらずエラーになってる模様です。

javascriptのコードを消したら問題なく値を渡せて機能もしました。ですのでそこが何かおかしいのかと思います。

該当のソースコード

@project.route("/record", methods =["GET", "POST"])
@login_required
def record():
    """Show history of transactions"""
    if request.method == "POST":

        category = request.form.get("record")
        print(category)
        content = category
        try:
            content = db.execute("SELECT content FROM manager WHERE category = ?", category)
            content = content[0]['content']
        except:
            return redirect("/record")
        return render_template("content.html", content=content)

    else:
        user_id = session["user_id"]
        #登録しカテゴリーを表示するためにSELECT
        record_answer = db.execute("SELECT category FROM manager WHERE user_id = ?", user_id)
        #リスト型の不要なもの取り除いて値だけ渡す
        record_number = record = db.execute("SELECT count(category) FROM manager WHERE user_id = ?", user_id)
        record_number = record_number[0]['count(category)']
        record = list()
        for i in range(record_number):
            record.append(record_answer[i]['category'])
        #設定済みのQとAをSELECT
        question_answer_data = db.execute("SELECT answer.answer, id_key.question FROM id_key INNER JOIN answer ON id_key.question_id = answer.question_id WHERE user_id = ?", user_id)
        number = db.execute("SELECT count(answer) FROM answer WHERE user_id = ?", user_id)
        number = number[0]['count(answer)']
        #リスト型を宣言してそれにSELECT内容の値だけを入れていく
        question = list()
        answer = list()
        for i in range(number):
            question.append(question_answer_data[i]['question'])
            answer.append(question_answer_data[i]['answer'])

        return render_template("record.html", record=record, question=question, answer=answer)

{% extends "layout.html" %}

{% block title %}
    Record
{% endblock %}

{% block main %}
    <table class="table">
        <thead>
            <tr>
                <th scope="col">This page, you can see your secret</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th>
                    <form action="/record" method="post" id="category" onsubmit="return check();">
                        <select name="record" id="record">
                            {% for row in record %}
                            <option value="{{ row }}" name="select_category">{{ row }}</option>
                            {% endfor %}
                        </select>
                        <button id="btn_id" type="submit" style="background: #6495ed;">Check</button>
                    </form>
                </th>
            </tr>

                <script>
                let question = {{ question | tojson }}
                let answer = {{ answer | tojson }}
                let record = {{ record | tojson }}
                function check()
                {
                    var collect = 0;
                    console.log(record);
                    for (let step = 0; step < 3; step++)
                    {
                        var rand = Math.floor(Math.random()*question.length);
                        var rValue = question[rand];
                        enter_answer = window.prompt(rValue);
                        if(enter_answer == answer[rand]){
                            collect++;
                            console.log("正解");
                            if(collect == 3)
                            {
                                category.innerHTML='これが内容です'
                            }
                        }
                        else if(enter_answer == null)
                        {
                            return false;
                        }
                        else if(enter_answer == "")
                        {
                            alert('値を入力してください');
                            return false;
                        }
                        else
                        {
                            console.log('回答が間違っています。');
                            alert('本人確認が出来ません。');
                            return false;
                        }
                    }
                }
            </script>

        </tbody>
    </table>
{% endblock %}

Answer 1

ぱっと見で「ここが怪しいかも？」と思った点をひとつ挙げると、以下の行

category.innerHTML='これが内容です'

の category という変数はどこで定義されているのか？という点です。innerHTML プロパティに文字列を設定しているので categoryには何らかのHTML要素が取得できている必要がありますが、要素を取得して category に入れるコードが見当たらないです。

Comments

[toku_code]

ありがとうございます！！
.innerHTML構文を除いたら上手く通るようになりました！！