简体   繁体   中英

Issue with Button Revealing Image

I'm having a problem with revealing an image using a button; the image already appears, without clicking the designated button, when the pages loads.

I've tried:

<HTML>
<head>
<style> 

  body {
  background-image: url("a2_page_3.JPG");
  background-size: cover;
  background-attachment: fixed;
  margin: 0;
  padding: 0;
}
</style>
<script>
  function showImage() {
    document.getElementById("stipends").style.display="";
  }
</script>
</head>
<body>
  <img id="stipends" src="a2_page_3_1.PNG" style="diaplay:none;"/>
  <input type=button value="Produce Stipends" onclick="showImgage()"/>
</body>
</html>

Thanks for all your input in advance!

you have 2 typos: showImgage() in your button should be showImage() and diaplay:none in your image should be display: none

Here's it working with jsut those 2 chages (and a cat image added in place of your image)

 <HTML> <head> <style> body { background-image: url("a2_page_3.JPG"); background-size: cover; background-attachment: fixed; margin: 0; padding: 0; } </style> <script> function showImage() { document.getElementById("stipends").style.display=""; } </script> </head> <body> <img id="stipends" src="https://external-content.duckduckgo.com/iu/?u=http%3A%2F%2Fgetwallpapers.com%2Fwallpaper%2Ffull%2Ff%2F3%2Fa%2F807159-download-funny-cats-wallpapers-1920x1200-meizu.jpg&f=1&nofb=1" style="display:none;"/> <input type=button value="Produce Stipends" onclick="showImage()"/> </body> </html>

 function showImage() { document.getElementById("stipends").style.display=""; }
 <body> <img id="stipends" src="a2_page_3_1.PNG" style="display:none;"/> <input type=button value="Produce Stipends" onclick="showImage()"/> </body> </html>

Additionally to the misspelling of display, as I commented, you misspelled the function showImage() as "showImgage()" in the button "onclick" statement.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM