2

I thought doing something like this would have worked, but I'm confused as to why it isn't when the style is hiding the image to begin with, but not showing it when the button is pressed. Here's the code:

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>

I've also tried this in both situations:

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

and:

<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>

I'm really lost as to how neither of these worked, could I get some help on this please?

user2279496
  • 65
  • 1
  • 1
  • 6

3 Answers3

1

You shouldn't* wrap the input element in a form if you don't want the standard submit behavior.

In your code as written, the form triggers a page load or an error, which prevents the script from running.

DougM
  • 2,808
  • 17
  • 14
1

You don't really need the form on either of your examples.

Your JavaScript should be in a <script> block and you have a couple of syntax errors.

Try

<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>
Klors
  • 2,665
  • 2
  • 25
  • 42
  • Oh it was in a – user2279496 May 18 '13 at 13:17
  • Fair enough, glad to hear it. – Klors May 18 '13 at 13:21
-1

DougM is right (+1)

In addition it should be showImg = function()

Here is a demo: http://jsfiddle.net/Uppt6/

Miro
  • 8,402
  • 3
  • 34
  • 72
  • Ah I did not know the function should be like that, thanks to the help from both you and thank you as well doug (: it worked now. – user2279496 May 18 '13 at 13:10
  • Glad to hear that! You can upvote Doug and mark as answered now. :) – Miro May 18 '13 at 13:14
  • @user2279496 The function **should not** be like that. The way you have it is perfectly fine. The way being suggested is just an option; here's an explanation of the differences: http://stackoverflow.com/questions/336859/javascript-var-functionname-function-vs-function-functionname . The thing you should use is `var` to declare your variable `x`, or use Klor's answer's way of changing the style. – Ian May 18 '13 at 13:55
  • @Ian said "The way you have it is perfectly fine" Can you please explain why it doesn't work with functionOne(){} Here is a non-working fiddle: http://jsfiddle.net/Uppt6/1/ Also isn't there a big difference between `display` and `visibility`? Doesn't `display` "hide" the element completely? That's not what OP wants and Klors's answer uses display. Looking forward to your response. – Miro May 18 '13 at 14:52
  • 1
    @miro That's because you have the fiddle set up to run `onLoad` of the page - that means the JavaScript you declare will be in a local scope, which cannot be accessed globally. When you try to call the function globally (like the inline event handler does), it doesn't exist. If you change the fiddle to run properly, it works: http://jsfiddle.net/Uppt6/2/ . I literally only changed the setting on the left hand side of the window to be `No wrap - in `. – Ian May 18 '13 at 14:56
  • @miro As for me saying "or use Klor's answer's way of changing the style" - I meant that instead of getting the element by `id` and storing it in a variable, it's easier to just do it in one line. About `visibility` vs. `display`: they both "hide" the element, but with `display`, the element doesn't take up any visual space when hidden. The OP didn't seem to way which one they wanted to use, because they both "hide" something, and the OP tries both. The problem was that the form was submitted – Ian May 18 '13 at 14:58
  • Thanks! Makes more sense now. – Miro May 18 '13 at 15:00