1
こんにちは：私はプログラミングの初心者ですので、この問題は些細なことになるかもしれません。
私はパイソンを教えるためにサイコロゲーム（10,000と呼ばれる）をプログラムしました。私は今、単純なWebアプリケーションをそのPythonコードのいくつかを再利用したいと思っています。私はFlaskフレームワークを使用しています（+ Pythonanywhereは私のWeb開発者です）。 CSSスタイルシートと一緒にシンプルなCSSグリッドを配置し、いくつかのJSボタンといくつかのHTMLオブジェクトを挿入することができました。私はPythonコードからいくつかの値を取得するボタンにJQuery GET要求を追加しました。ここまでは順調ですね。
ボタンをクリックすると、グリッドが複製されます（つまり、ページ上のすべてが2回表示されます）。奇妙なことに、ボタンの1つのみが動作しているように見え、ランダムな値が返されます。
今私は何が間違っているのか分かりません。私は開発者のツールでエラーが表示されず、乱数が画面に表示されるのがわかります。私がどこを台無しにしたのかを教えてくれませんか？
私のフラスコアプリ：import random
from flask import Flask, render_template, request
app = Flask(__name__)
@app.route('/')
def hello():
data = random.randint(1,6)
if request.method == "GET":
return render_template('main.html',data=data)
if __name__ == '__main__':
app.run()
HTMLテンプレート：HTMLの使用に
from flask import Flask, render_template, request, jsonify
# add jsonfy to ipmport ^^^^^^^
def hello():
data = random.randint(1, 6)
# add next two line
if request.is_xhr:
return jsonify(data=data)
if request.method == "GET":
return render_template('main.html', data=data)
：あなたはAJAXのチェックを追加し、JSONを返す必要があるアプリで
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to- fit=no">
<meta name="description" content="">
<meta name="author" content="">
<link rel="stylesheet" linkhref="/static/css/styles.css">
</head>
<body>
<div class="grid">
<div class="title">
<h1>10,000</h1>
</div>
<div class="dice">
<div class="card" id="card1">
<p>{{ data }}</p>
</div>
</div>
<div class="roll">
<div class="round-button" id="roll-button">
<div class="round-button-circle">
<a class="round-button">Save</a>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script>
$(function() {
$('#roll-button').click(function() {
$.get('/', function(data){
var data = data;
document.getElementById("card1").innerHTML = data;
});
});
});
</script>
「div」の代わりにボタンを使用するか、https://stackoverflow.com/questions/7034342/jquery-onclick-on-divを参照してください。 –