I am having some trouble with my webpage. I researched on this topic for 30 minutes straight and still found no direct answer.

If I click button1:

• image1 visible

• image2 invisible

• image3 invisible

If I click button2:

• image1 invisible

• image2 visible

• image3 invisible

If I click button3:

• image1 invisible

• image2 invisible

• image3 visible

Here is my Javascript:

function rock(){
document.getElementById('image1').style.display = 'block';
}
document.getElementById('image2').style.display = 'none';
}
document.getElementById('image3').style.display = 'none';
}

function paper(){
document.getElementById('image1').style.display = 'none';
}
document.getElementById('image2').style.display = 'block';
}
document.getElementById('image3').style.display = 'none';
}

function scissors(){
document.getElementById('image1').style.display = 'none';
}
document.getElementById('image2').style.display = 'none';
}
document.getElementById('image3').style.display = 'block';
}

Here is my HTML:

<button id="rock" onclick="rock()">Rock</button>
<button id="paper" onclick="paper()">Paper</button>
<button id="scissors" onclick="scissors()">Scissors</button>

I am having some trouble with my webpage. I researched on this topic for 30 minutes straight and still found no direct answer.

If I click button1:

• image1 visible

• image2 invisible

• image3 invisible

If I click button2:

• image1 invisible

• image2 visible

• image3 invisible

If I click button3:

• image1 invisible

• image2 invisible

• image3 visible

Here is my Javascript:

function rock(){
document.getElementById('image1').style.display = 'block';
}
document.getElementById('image2').style.display = 'none';
}
document.getElementById('image3').style.display = 'none';
}

function paper(){
document.getElementById('image1').style.display = 'none';
}
document.getElementById('image2').style.display = 'block';
}
document.getElementById('image3').style.display = 'none';
}

function scissors(){
document.getElementById('image1').style.display = 'none';
}
document.getElementById('image2').style.display = 'none';
}
document.getElementById('image3').style.display = 'block';
}

Here is my HTML:

<button id="rock" onclick="rock()">Rock</button>
<button id="paper" onclick="paper()">Paper</button>
<button id="scissors" onclick="scissors()">Scissors</button>

• javascript
• button
• onclick
• visible
• invisible

• 1 If you want us to tell you what's wrong with what you've tried, you have to post the code. We're not going to just write it for you. – Barmar Commented Apr 7, 2014 at 20:55

2 Answers 2

simply use this to hide it:

document.getElementById("thingid").style.visibility="hidden";

use this to show it:

document.getElementById("thingid").style.visibility="visible";

Very nice tutorial on this page: http://www.w3schools./jsref/prop_style_visibility.asp

2ndary suggestion: you can use jquery to create nice transition effects

1. Give id to all buttons
2. Give id to all images
3. Add event handler to each button

4. Hide an image like this

   document.getElementById("id-of-the-image").style.display = "none";

5. Show an image like this

   document.getElementById("id-of-the-image").style.display = "inline-block";

Your code (with correction)

function rock(){
    document.getElementById('image1').style.display = 'block';
    document.getElementById('image2').style.display = 'none';
    document.getElementById('image3').style.display = 'none';
}

function paper(){
    document.getElementById('image1').style.display = 'none';
    document.getElementById('image2').style.display = 'block';
    document.getElementById('image3').style.display = 'none';
}

function scissors(){
    document.getElementById('image1').style.display = 'none';
    document.getElementById('image2').style.display = 'none';
    document.getElementById('image3').style.display = 'block';
}

An optimized version of your code

function showImage(imageId) {
    document.getElementById(imageId).style.display = 'block';
}
function hideImage() {
    document.getElementById(imageId).style.display = 'none';
}


function rock(){
    showImage('image1');
    hideImage('image2');
    hideImage('image3');
}

function paper(){
    hideImage('image1');
    showImage('image2');
    hideImage('image3');
}

function scissors(){
    hideImage('image1');
    hideImage('image2');
    showImage('image3');
}