Databases
StackOverflow2013
Postsdbo
POaspx using html and javascript not changing images in html and javascript coding
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POaspx using html and javascript not changing images in html and javascript coding
    text
    copied!<p>I have a website, very simple one page that uses a master page and one web page. This is done in aspx, but I want to do my coding in html to abide by Markup Validation Service's standards.</p> <p>So, on my page, I have a main image:</p> <pre><code>&lt;asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server"&gt; &lt;img id="imgM" alt="Main Image" runat="server" src="~/images/main-images/01.JPG"/&gt; </code></pre> <p>and i have 10 image buttons. i will list the first 3</p> <pre><code>&lt;table style="padding: 0 38px"&gt; &lt;tr&gt; &lt;td&gt; &lt;input type="image" id="ith1" src="images/thumb-images/01.JPG" alt="01" onclick="changePic(1)" /&gt; &lt;/td&gt; &lt;td&gt; &lt;input type="image" id="ith2" src="images/thumb-images/02.JPG" alt="02" onclick="changePic(2)" /&gt; &lt;/td&gt; &lt;td&gt; &lt;input type="image" id="ith3" src="images/thumb-images/03.JPG" alt="03" onclick="changePic(3)" /&gt; &lt;/td&gt; </code></pre> <p>Now I have this code for java script, in my content placeholder for head</p> <pre><code>&lt;asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server"&gt; &lt;script type="text/javascript"&gt; function changePic(num) { switch (num) { case 1: mypic = "/images/main_images/01.jpg"; break; case 2: mypic = "/images/main_images/02.jpg"; break; case 3: mypic = "/images/main_images/03.jpg"; break; case 5: mypic = "/images/main_images/05.jpg"; break; } document.getElementById("imgM").src = mypic; } &lt;/script&gt; &lt;/asp:Content&gt; </code></pre> <p>Which I got of the net by looking at examples of changing pictures. What I have noticed is that without a <code>runat="server"</code> my main image will not display. But try as I might, I can't get the image to change once I've clicked on a image button. What am I doing wrong here? Is it because this is a master page and content page thing? Or am I just coding this wrong? I can do this via .cs pages easily. It's just that I would also have to learn about WS3 validators and how to do my websites in html</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload