SpringBoot-Thymeleaf井字棋游戏：点击按钮显示文本框求助

Hey there! Let's get that symbol configuration text box working smoothly for your Tic-Tac-Toe project. Since you're using Spring Boot with Thymeleaf, I'll walk you through two easy approaches—one purely frontend (great for quick setup) and one that integrates with your backend (if you need to save the custom symbols server-side).

Approach 1: Pure Frontend JavaScript (Quick & Simple) #

This is perfect if you just need to show/hide the text box without immediate backend interaction. Here's how to tweak your existing code:

1. First, add your hidden text box section to your Thymeleaf template. We'll set it to display:none initially:

<p>Would you like to configure the symbols you would want to play with?</p>
<input type="button" value="Yes" class="btn" name="btn_yes" id="btnYes"/>
<input type="button" value = "No" class = "btn" name="btn_no" id="btnNo"/>

<!-- Hidden symbol configuration area -->
<div id="symbolConfig" style="display: none; margin-top: 15px;">
    <label for="player1Symbol">Player 1 Symbol:</label>
    <input type="text" id="player1Symbol" name="player1Symbol" maxlength="1"/>
    <br>
    <label for="player2Symbol">Player 2 Symbol:</label>
    <input type="text" id="player2Symbol" name="player2Symbol" maxlength="1"/>
    <!-- Add a submit button here if you want to send the data later -->
</div>

2. Add a small JavaScript snippet (either in a <script> tag at the end of your template or an external JS file) to handle the button clicks:

document.getElementById('btnYes').addEventListener('click', function() {
    document.getElementById('symbolConfig').style.display = 'block';
});

document.getElementById('btnNo').addEventListener('click', function() {
    document.getElementById('symbolConfig').style.display = 'none';
    // Optional: Set default symbols here if needed
});

This will toggle the visibility of the text box section as soon as the user clicks "Yes" or "No".

Approach 2: Thymeleaf + Backend Interaction (For Saving Symbols) #

If you need to process the custom symbols on the server side, you can use Thymeleaf's conditional rendering with a backend flag.

1. First, create a simple model attribute in your Spring Boot controller to track if the user wants to configure symbols:

@Controller
public class TicTacToeController {

    @GetMapping("/game-setup")
    public String gameSetup(Model model) {
        // Initialize the flag to false (hidden by default)
        model.addAttribute("showSymbolConfig", false);
        return "game-setup"; // Your Thymeleaf template name
    }

    @PostMapping("/toggle-symbol-config")
    public String toggleSymbolConfig(@RequestParam("btn") String button, Model model) {
        if ("yes".equals(button)) {
            model.addAttribute("showSymbolConfig", true);
        } else {
            model.addAttribute("showSymbolConfig", false);
        }
        return "game-setup";
    }
}

2. Update your Thymeleaf template to use a form for the buttons and conditionally render the text box with th:if:

<form th:action="@{/toggle-symbol-config}" method="post">
    <p>Would you like to configure the symbols you would want to play with?</p>
    <button type="submit" class="btn" name="btn" value="yes">Yes</button>
    <button type="submit" class="btn" name="btn" value="no">No</button>
</form>

<!-- Conditionally show the text box based on the backend flag -->
<div th:if="${showSymbolConfig}" style="margin-top: 15px;">
    <label for="player1Symbol">Player 1 Symbol:</label>
    <input type="text" id="player1Symbol" name="player1Symbol" maxlength="1"/>
    <br>
    <label for="player2Symbol">Player 2 Symbol:</label>
    <input type="text" id="player2Symbol" name="player2Symbol" maxlength="1"/>
    <br>
    <button type="submit" formaction="/save-symbols" class="btn">Save Symbols</button>
</div>

This approach will trigger a backend request when the user clicks the buttons, and Thymeleaf will render the text box only when showSymbolConfig is true.

Either of these methods should work perfectly for your beginner project. Start with the first one if you want something quick, and move to the second if you need to handle the symbol data on the server!

内容的提问来源于stack exchange，提问作者perpetualcoder