Question

我认为做这样的事情会起作用，但我很困惑为什么不是在风格隐藏图像开始时，而是在按下按钮时不显示它。这是代码：

function showImg() {
    x=document.getElementById("map_img")
    x.style.visibility="visible";
}

<body>
    <img id="map_img" src="map.jpg" style="visibility:hidden" width="400" height="400"/>

    <form id="form1" name="form1" align="center">
        <input type="submit" id="Map" value="Map" onclick="showImg()"/>
    </form>

我也在两种情况下都试过这个：

<input type=button id="Map" value="Map" onclick="showImg()"/>

和

<style>
    .hidden{display:none;}
    .show{display:block;}
</style>

function showImg() {
    x=document.getElementById("map_img")
    x.class="show";
}

<body>
    <img id="map_img" src="map.jpg" class="hide" width="400" height="400"/>

    <form id="form1" name="form1" align="center">
        <input type="submit" id="Map" value="Map" onclick="showImg()"/>
    </form>

我真的很遗憾这些都不起作用，我能得到一些帮助吗？

Answer 1

如果您不想要标准的提交行为，则不应将input元素包装在form中。

在您编写的代码中，form会触发页面加载或错误，从而阻止脚本运行。

Answer 2

您不需要任何一个示例中的表单。

您的JavaScript应该在<script>块中，并且您有几个语法错误。

尝试

<head>
    <script>
        function showImg() {
            document.getElementById("map_img").style.display = "";
        }
    </script>
</head>
<body>
    <img id="map_img" src="map.jpg" style="display: none;" width="400" height="400"/>
    <input type="submit" id="Map" value="Map" onclick="showImg()"/>
</body>

Answer 3

DougM是对的（+1）

此外，它应该是showImg = function()

以下是演示：http://jsfiddle.net/Uppt6/

如何在html中按下按钮时显示图像？

3 个答案: