dimanche 13 juin 2021

How to show div element when a certain variable is chosen?

I am doing a school project and I have to make a web-based browser game. Now I want DIV A to appear when someone chooses player 1, and DIV B to appear when a user chooses player 2. I cannot seem to work it out. Here is what I have got so far. I'm not quite good in JS, I hope somebody can help me out! I defined the players at index.php, like this:

<?php

session_start();

header('Content-Type: application/json');

$playerId = $_SESSION['playerId'];
$username = $_SESSION['username'];

if (!isset($playerId) || !isset($username)) {
    echo json_encode(['error' => 'Session not defined!']);
    die;
}

echo json_encode(['success' => true, 'data' => [
    'playerId' => $playerId,
    'username' => $username,
]]);

Then, later onwards, this is the code that I want to work on the game.php page:

The JS part

// player display
var player = ['1', '2'];


if (player == '1') {
    // display #divA
} else {
    // display #divB
}

The html part

<div id="questionarea" style="display:none;">
    <label for="question"></label>
    <textarea name="question" id="question" placeholder="Typ hier je vraag...">
    </textarea>
    <button type="button" id="send_chat">Button</button>
</div>
<div class="divB" style="display:none;">
    <button class="col-3" type="button" id="yes">yes</button>
    <button class="col-3" type="button" id="no">no</button>
    <button class="col-3" type="button" id="maybe">maybe</button>
</div>
<br/>
<div class="divA" style="display:none;">
    <button class="col-3" type="button" id="winner" onclick="won_alert()">you won!</button>
</div>

Aucun commentaire:

Enregistrer un commentaire