烧瓶重定向后字母无法正确显示

Question

实时站点：https://charlie-project3-aebf005f6451.herokuapp.com/viewlib 仓库：https://github.com/Tropicalbunny/FLASK

我遇到一个问题，我的刽子手页面没有在屏幕中央显示显示的字母（甚至没有显示），但似乎每次 /gameboard 重新加载时都会删除更新的显示字母。

我最初通过游戏板路由将变量发送到 HTML，但它正在更新到之前的会话 [' Correct_letters']。每次猜测都会情感上“落后”一个。

所以我尝试了这种通过JS更新的方法。不幸的是造成了这个。 我已经添加了存储库和实时站点，以防有任何帮助。

相关的Python代码：

@app.route('/button', methods=["POST"])
def buttonpress():
    data = request.json
    value = data['value']
    hangman(value, session)
    
    session.modified = True
    
    return jsonify({
        'status': 'success',
        'correct_letters': session['correct_letters'],
        'guessed_letters': session['guessed_letters'],
        'guesses_left': session['guesses_left'],
        'game_over': session['game_over']
    })

@app.route('/gameboard')
def gameboard():
    return render_template('gameboard.html')

def hangman(guess, session):
    guesses_left = session['guesses_left']
    guessed_letters = session['guessed_letters']
    correct_letters = session['correct_letters']
    game_over = session['game_over']
    database_word = session['database_word']

    guessed_letters = guessed_letters + guess
    correct_letters = ""
    if guess not in database_word:
        guesses_left -= 1
        session['guesses_left'] = guesses_left
        if guesses_left == 0:
            session['game_over'] = 1
            return game_over

    for letter in database_word:
        if letter in guessed_letters:
            correct_letters += f"{letter} "
        else:
            correct_letters += "_ "

    session['correct_letters'] = correct_letters
    session['guessed_letters'] = guessed_letters
    print("cookie", session['correct_letters'])
    if all(letter in guessed_letters for letter in database_word):
        session['game_over'] = 2

JS 函数：

function sendValue(buttonValue) {
    fetch('/button', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify({ value: buttonValue }),
    })
    .then(response => response.json())
    .then(data => {
        if (data.status === 'success') {
            document.querySelector('#displayedLetters').textContent = data.correct_letters;
        }else {
            console.error('Error processing guess:', data);
        }
    })
}

带有按钮的 HTML 片段，以便您可以看到正在调用的内容：

    <div id="word-guess"><p id="displayedLetters"></p></div>
    <div id="letter-guesses">
        <form>
        <button onclick="sendValue(this.value)" class="guess-button" id="a" value ="a">A</button>

....

我尝试了一些不同的事情： 在 Hangman 函数中重定向游戏板页面（当我使用 jinja 来显示猜测的字母时）。 尝试使用 time.sleep 来减慢该功能，直到会话更新为止。 现在尝试更新 js 端以显示猜测的字母。 我已使用 Print 和 console.log 将问题范围缩小到此处。有趣的是，hangman 函数正确更新了 session[' Correct_letters'] 。但看起来 /gameboard 在更新之前正在运行。

Answer 1

我无法在完整代码上测试它，但是当您按

<button>

时，浏览器会将完整的

<form>

发送到服务器，稍后它会得到响应并重新加载整个页面。

您必须将

event

发送到您的函数

onclick="sendValue(event, this.value)

并使用

preventDefault()

来停止它

function sendValue(event, buttonValue) {
    event.preventDefault(); 
    
    // ... rest ...
}