Показ игры закончен

Question

Я пытаюсь отобразить игру поверх текста после достижения определенного игрового счёта, но я не могу заставить его появиться.

<svg id="canvas" width="600" height="600">
<text id="left" x="135" y="70" font-size = 60 font-family = "Menlo, sans-serif" fill="white">0</text>
<text id= "right" x= "435" y = "70" font-size = 60 font-family = "Menlo, sans-serif" fill = "white">0</text>
<div id= "game-over" x = "100" y = "100" font-size = 40 font-family = "Menlo, sans-serif" fill = "white"> Winner:</div>
</svg>

Левая оценка будет основана на идентификаторе «left», а правая оценка будет основана на id «right», и когда любой из этих показателей достигнет 2, я хочу, чтобы отображался оператор over over with id «game-over» Победитель на холсте html.

В Javascript я пытался заставить левого игрока выиграть:

    function declareWinner(score_left:HTMLElement) {
        let max_point:number = 2;
        let winner = document.getElementById("game-over")!;
        if (score_left.innerHTML == max_point.toString()) {
            winner.innerHTML += "Left Player";
        }
    }

но текст победителя не отображается при достижении определенного результата.

Answer 1

@ Комментарий Кайидо - это решение. Это говорит:

Там нет HTML-холста ...

Потому что <svg> - это не холст HTML, как вы сказали в вопросе.

Я хочу, чтобы оператор game over с идентификатором "game-over" отображал победителя на html-холсте.

И проблема в том, что вы используете div внутри svg, что не поддерживается.

А ваша разметка svg недействительна: не является частью элементов svg

Таким образом, замена его текстом должна работать:

<text id="game-over" x="100" y="100" font-size="40" font-family="Menlo, sans-serif" fill="white">Winner:</text>

Также убедитесь, что вы не отображаете белый текст на белом фоне или что-то связанное с цветом, потому что ваши тексты fill="white".