javascript - Making images appear AND other images disappear with the click of a button - Stack Overflow

admin管理员组

文章数量:1323035

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

Share Improve this question Follow edited Apr 7, 2014 at 21:05 Ms. Speled asked Apr 7, 2014 at 20:52 Ms. SpeledMs. Speled 3511 gold badge11 silver badge88 bronze badges 1

• 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

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 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');
}

本文标签： javascriptMaking images appear AND other images disappear with the click of a buttonStack Overflow