JSFiddle - React, Tailwind, and code Playground

by scotchhammer

HTML

<p>Выбирите клуб нажатием радиокнопки</p>
<div id="clubs">
    <input type="radio" name="club" checked id="MilanCheck"><span>Милан</span><br>
    <p>Бюджет клуба: <span id="MilBud">600</span>  млн. $</p>
    <div id="MilanPlayers">
        <p>Список купленных игроков:</p>
    </div>
    <input type="radio" name="club" id="spartChek"><span>Спартак</span><br>
    <p>Бюджет клуба: <span id="SpaBud">120</span>  млн. $</p>
    <div id="spartPlayers">
        <p>Список купленных игроков:</p>
    </div>
</div>
<div id="play">
    <div id="messi">
        <p>Леонель Месси</p>
        <p>Цена трансфера 220 млн. $</p>
        <input type="button" value="КУПИТЬ ИГРОКА" id="mesB">
    </div>
    <div id="neimar">
            <p>Неймар</p>
            <p>Цена трансфера 300 млн. $</p>
            <input type="button" value="КУПИТЬ ИГРОКА" id="neiB">
    </div>
</div>

CSS

body {
            font-family: Verdana;
        }
        #clubs {
            float: left;
            background-color: burlywood;
        }
        #play {
            background-color: coral;
            width: 480px;
        }

JavaScript

function Club(clubName, budg) {
        this.clubName = clubName;
        this.budg = budg;
    }
    function Player(playName, price) {
        this.playName = playName;
        this.price = price;
    }
    var Milan = new Club('Милан',600);
    var Spartak = new Club('Спартак',120);
    var Messi = new Player('Леонель Месси',220);
    var Neimar = new Player('Неймар',300);
           function playerToBye() {
            console.log(club.budg);
            if (club.budg < player.price) {
                alert('No money');
                return;
            }
            else {
                console.log('Бюджет клуба ' + club.budg);
                club.budg  -=  player.price;
                console.log('Цена игрока ' + player.price);
                var p = document.createElement('p');
                p.innerHTML = player.playName;
                listToAppend.appendChild(p);
            }
        }
          mesB.onclick = function () {
                player = Messi;
                if (MilanCheck.checked) {
                    club = Milan;
                    listToAppend = MilanPlayers;
                    playerToBye();
                    MilBud.innerHTML = club.budg;
                }
                if (spartChek.checked) {
                    club = Spartak;
                    listToAppend = spartPlayers;
                    playerToBye();
                    SpaBud.innerHTML = club.budg;
            }
              this.disabled = 'true';
        }
    neiB.onclick = function () {
        player = Neimar;
        if (MilanCheck.checked) {
            club = Milan;
            listToAppend = MilanPlayers;
            playerToBye();
            MilBud.innerHTML = club.budg;
        }
        if (spartChek.checked) {
           club = Spartak;
            listToAppend = spartPlayers;
            playerToBye();
            SpaBud.innerHTML = club.budg;
        }
        this.disabled = 'true';
    }