Untitled

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Juego! Número al azar</title>
    <link rel="stylesheet" href="css/styles.css" media="screen" title="no title" charset="utf-8">
    <script>
        function jugar() {
            var eleccionUsuario = document.getElementById('eleccionUsuario').value;
            var ganadas = document.getElementById('ganadas');
            var perdidas = document.getElementById('perdidas');
            var mensaje = document.getElementById('mensaje');
            var seleccionado = document.getElementById('eleccionPC');

            var eleccionPC = document.getElementById('eleccionPC');

            if(eleccionUsuario != '' && eleccionUsuario < 10 && eleccionUsuario > 0){          //así no nos pueden poner un número vacío o un número no válido

                var randomPC = Math.floor(Math.random() * (11 - 1)) + 1;                        //Fórmula mejorada para no poner 10 if
                eleccionPC.innerHTML = randomPC;

                if (eleccionUsuario == randomPC) {
                    var ganancia = eleccionUsuario * 2
                    mensaje.innerHTML = "¡¡Ganaste!! Te llevas $" + ganancia;
                    mensaje.style.color = "green";
                    seleccionado.style.color = "green";
                    ganadas.innerHTML = parseInt(ganadas.innerHTML) + 1;                        //acumulamos una victoria
                }

                else{                                                                           //con el else nos ahorramos una comprobación
                    mensaje.innerHTML = "¡¡Perdiste!!  $" + eleccionUsuario;
                    mensaje.style.color = "orange";
                    seleccionado.style.color = "orange";
                    perdidas.innerHTML = parseInt(perdidas.innerHTML) + 1;                      //acumulamos una derrota
                }
            }
        }
    </script>
</head>

<body>
    <center>
        <div class="contenedor">
            <h1>Adivina el Número</h1>
            <table>
                <tr>
                    <td>
                        <h2 id="mensaje">¿Cual número saldrá?</h2>
                    </td>
                    <td>
                        <label id="ganancia"></label>

                    </td>
                </tr>
            </table>


            <table>
                <tr>
                    <td>
                        <label>Digita un número:</label>
                    </td>
                    <td>
                        <input type="text" id="eleccionUsuario" name="eleccionUsuario" value="">
                    </td>
                </tr>
                <tr>
                    <td>
                        <label>Número de la PC: </label>
                    </td>
                    <td>
                        <label id="eleccionPC"></label>
                    </td>
                </tr>

                <tr>
                    <td colspan="2" style="border: dashed black">
                        <hide>
                            <center>
                                <input type="button" id="jugar" name="jugar" value="¡Apostar!" onclick="jugar()" </center>
                    </td>
                </tr>
                <tr>
                    <td>
                        Ganadas:
                    </td>
                    <td>
                        <label for="" id="ganadas" value="0">0</label>
                    </td>
                </tr>
                <tr>
                    <td>
                        Perdidas:
                    </td>
                    <td>
                        <label for="" id="perdidas" value="0">0</label>
                    </td>
                </tr>
            </table>
        </div>
        </center>
        <script type="text/javascript" src="js/javascript.js">
        </script>

</body>

</html>