Reputation: 1577
I'm currently working on a project where I'm writing a webpage that gives basic diagrams about human anatomy. What I'm currently testing is the ability to switch dynamically between different images at the press of a button using a Javascript function, so that the user will eventually be able to switch between different views of the human body.
This is the code that I have so far.
<!DOCTYPE html>
<html lang="en">
<head>
<script>
function skin()
{
document.getElementById("image").src="humanoutline.jpg";
}
function muscle()
{
document.getElementById("image").src="humanoutline2.jpg";
}
function organs()
{
document.getElementById("image").src="humanoutline3.jpg";
}
function skeleton()
{
document.getElementById("image").src="humanoutline4.jpg";
}
</script>
</head>
<body>
<style>
.button
{
background-color: green;
border-radius: 4px;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}
#image
{
position:absolute;
width:500px;
height:700px;
z-index: 0;
top: 30%;
left: 45%;
padding:50px;
margin: -100px 0 0 -200px;
text-align:center;
align-content:center;
outline-style:solid;
outline-width:1px;
outline-color:black;
}
#rightside
{
text-align:center;
width:400px;
height:1000px;
padding: 30px;
line-height: 100px;
float:right;
outline-style:solid;
outline-width:1px;
outline-color:black;
}
</style>
<div id="rightside">
<p>Select Layer</p>
<form>
<button class="button" onclick="skin()">Skin</button><br>
<button class="button" onclick="muscle()">Muscle</button><br>
<button class="button" onclick="organs()">Organs</button><br>
<button class="button" onclick="skeleton()">Skeleton</button><br>
</form>
</div>
<div>
<img id="image" src="humanoutline.jpg" alt="Body" style="width:464px;height:700px; ">
</div>
</body>
</html>
While this should work in theory, the problem is that whenever each of the buttons is pressed, the page only partially loads the new image and then switches back to the default image, which is humanoutline.jpg.
For reference, here are the four images that I'm currently using.
Upvotes: 1
Views: 93
Reputation: 26180
The issue is that the button is "submitting" the form, which causes the page to reload.
The simple solution is to modify your functions as follows:
function skin() {
document.getElementById("image").src="humanoutline.jpg";
// the "return false" will cause the button to NOT submit the form
return false;
}
however your code as written so far is going to get large quickly, and be difficult to maintain, so I'd like to suggest / offer an alternative method of doing this.
You can change your buttons to call the same function, but pass in the parameter that is relevant. Additionally, they should return
, see below:
<form>
<button class="button" onclick="return changeImage('humanoutline.jpg')">Skin</button><br>
<button class="button" onclick="return changeImage('humanoutline2.jpg')">Muscle</button><br>
<button class="button" onclick="return changeImage('humanoutline3.jpg')">Organs</button><br>
<button class="button" onclick="return changeImage('humanoutline4.jpg')">Skeleton</button><br>
</form>
And also change your script to accept a parameter, and use that in the image:
function changeImage(img) {
document.getElementById("image").src=img;
return false;
}
Upvotes: 3
Reputation: 898
You just need to add type="button"
to the <button>
tags, like this:
<form>
<button type="button" class="button" onclick="skin()">Skin</button><br>
<button type="button" class="button" onclick="muscle()">Muscle</button><br>
<button type="button" class="button" onclick="organs()">Organs</button><br>
<button type="button" class="button" onclick="skeleton()">Skeleton</button><br>
</form>
And here's a codepen with the change that's working (though the image URLs are hotlinked from the uploads in this SO question, so I'm not sure if they'll keep working): http://codepen.io/anon/pen/GZZJVv
Upvotes: 1