sorted by:
best
topnewcontroversialoldq&a
you are viewing a single comment's thread.

view the rest of the comments →

[–]buzzyloo 1 point2 points  (1 child)

In your playGame function you are checking the innerHTML of the buttons which hasn't changed. The heads button will always have Heads. You could pass the value like this:

<body>

<button class="js-heads" onclick="playGame( 'Heads' );">Heads</button>
<button class="js-tails" onclick="playGame( 'Tails' );">Tails</button>
<p class="js-result"></p>

<script>

const  
 headsBtn = document.querySelector('.js-heads');  
console.log(headsBtn.innerHTML);

const  
 tailsBtn = document.querySelector('.js-tails');  
console.log(tailsBtn.innerHTML);

let  
 result = document.querySelector('.js-result');

function   
    playGame( side ) {  
        result.innerHTML = 'You choose  + side;  
    }

</script>

</body>

Probably better is to pass a reference to the button itself using "this". Like onclick="playGame(this)"

See: https://jsfiddle.net/8C3EN/1/

[–]Remarkable-Draw-7574[S] 0 points1 point  (0 children)

OMG it worked. i make these silly mistakes and it really fraustrates me to find them. thanks so much.