I have a form that allows users to input the names of "Player A" and "Player B". When the user clicks on the "Start Game" button, the game begins by redirecting to a Flask route (/players). I want the "player-text" section to be updated with the player names when the game starts. I've tried implementing this using d3.js but it's not working as expected. The d3.click event is not being recognized. Is there a way to achieve both functionalities successfully? Thank you.
index.html:
<div>
<form method="POST" action="/players" role="form", name="playerform">
<div class="form-group">
<label for="playerA">Player A</label>
<input type="text" class="form-control" id="playerA" name="playerA" placeholder="Player A">
</div>
<div class="form-group">
<label for="playerB">Player B</label>
<input type="text" class="form-control" id="playerB" name="playerB" placeholder="Player B">
</div>
<input type="submit" id="playerform" name="playerform" value="Start Game" class="btn btn-primary btn-lg">
</form>
</div>
<div id = "player-text"> </div>
<script type="text/javascript" src="../static/game.js"></script>
app.py:
@app.route("/players", methods=["GET", "POST"])
def send():
global ds_game
if request.method == "POST":
playerA = request.form["playerA"]
playerB = request.form["playerB"]
#return jsonify({"playerA":playerA, "playerB" : playerB})
return redirect("/index", code=302)
game.js
d3.select("#playerform")
.on("click", function(){
console.log("Clicked on player form")
d3.json("/show",($dict)=> {
let $scores = $dict["scores"]
let $player = $dict["player"]
d3.select("#player_score").remove();
d3.select("#player-text").append("div").attr("id","player_score")
.append("p").attr("align","center").html($player)
.append("p").attr("align","center").html($scores);
});
});