javascript 单击一个按钮，使图像出现和其他图像消失

Making images appear AND other images disappear with the click of a button

提问by Ms. Speled

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

我的网页有问题。我连续研究了这个话题 30 分钟，但仍然没有找到直接的答案。

If I click button1:

如果我单击按钮 1：

• image1 visible

• image2 invisible

• image3 invisible

• image1 可见

• image2 不可见

• image3 不可见

If I click button2:

如果我点击 button2：

• image1 invisible

• image2 visible

• image3 invisible

• image1 不可见

• image2 可见

• image3 不可见

If I click button3:

如果我单击 button3：

• image1 invisible

• image2 invisible

• image3 visible

• image1 不可见

• image2 不可见

• image3 可见

Here is my Javascript:

这是我的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:

这是我的 HTML：

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

回答by kiranvj

1. Give id to all buttons
2. Give id to all images
3. Add event handlerto 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";

1. 给所有按钮提供 id
2. 为所有图像提供 id
3. 为每个按钮添加事件处理程序

4. 隐藏这样的图像

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

5. 显示这样的图像

   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');
}

回答by Marc Guiselin

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.com/jsref/prop_style_visibility.asp

此页面上非常好的教程：http: //www.w3schools.com/jsref/prop_style_visibility.asp

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

第二个建议：您可以使用 jquery 创建漂亮的过渡效果