Javascript: Some Variables Defined, Some Undefined

I am writing a basic casino javascript game that will randomly pick 3 numbers 1-10. If each number is 7, it will display an alert box saying 'You Win!'. In the function below:

function StartSpin(){
        var one;
        var two;
        var three;
        var cone;
        var ctwo;
        var cthree;
        var one = Math.floor((Math.random() * 10) + 1);
        var two = Math.floor((Math.random() * 10) + 1);
        var three = Math.floor((Math.random() * 10) + 1);
        if(one == 1){var cone = "Ace";}
        if(two == 1){var ctwo = "Ace";}
        if(three == 1){var cthree = "Ace";}
        document.getElementsByClassName("Spinner")[0].innerHTML= cone
        document.getElementsByClassName("Spinner")[1].innerHTML= ctwo
        document.getElementsByClassName("Spinner")[2].innerHTML= cthree
    }

On the actual page before clicking the button to start randomizing it says: --|--|--. When clicking it, it sets the --'s to the randomized number. Every number/-- set says undefined except sometimes one will say 'Ace' meaning it was 1. So it might say: undefined|Ace|undefined, or undefined|undefined|undefined, etc. Here is the HTML:

<div id="GameOne">
    <h1>~ Game One ~</h1>
    <h2>Try to get three 7's!</h2>
    <span class="so Spinner">--</span> | 
    <span class="st Spinner">--</span> | 
    <span class="sth Spinner">--</span>
    <br/>
    <button id="SpinButton" onclick="StartSpin()">Spin!</button>
</div>

EDIT: I re-defined variables to see if that would help the undefined problem(In the javascript code fyi)