单击按钮可显示图像,其他图像消失

时间:2014-04-07 20:52:26

标签: javascript button onclick visible invisible

我的网页遇到了一些问题。我连续30分钟研究了这个话题,但仍未找到直接答案。

如果我点击button1:

  • image1 visible

  • image2 invisible

  • image3 invisible

如果我点击button2:

  • image1 invisible

  • image2 visible

  • image3 invisible

如果我点击button3:

  • image1 invisible

  • image2 invisible

  • image3 visible

这是我的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';
}

这是我的HTML:

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

2 个答案:

答案 0 :(得分:1)

  1. 为所有按钮提供ID
  2. 为所有图片提供ID
  3. Add event handler 到每个按钮
  4. 隐藏此类图片

    document.getElementById(“id-of-the-image”)。style.display =“none”;

  5. 显示此类图片

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

  6. 您的代码(有更正)

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

    代码的优化版本

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

答案 1 :(得分:1)

只需使用它来隐藏它:

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

用它来表明:

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

本页非常好的教程: http://www.w3schools.com/jsref/prop_style_visibility.asp

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