Passing a variable to a function through a button (HTML/Javascript)
Question
I'm attempting to create a page that will allow me to select from a series of images, with the option of choosing your own via URL, but I have stumbled on an issue. I am attempting to use buttons placed under the sample images to change the source image that is piped into a function, but I can't seem to get it to work. Here is my code:
<html>
<head>
<script>
function updateImage(imageUsed)
{
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.drawImage(imageUsed,0,0,500,500);
}
</script>
<style>
#header
{
background-color:brown;
color:black;
text-align:center;
padding:5px;
}
#defaultSelection
{
line-height:30px;
background-color:#eeeeee;
width:200px;
float:left;
padding:5px;
text-align:center;
}
#canvasID
{
background-color:grey;
width:1000px;
float:left;
padding:10px;
text-align:center;
}
</style>
</head>
<body">
<div id="header">
<h1> Welcome</h1>
<h2>Please select an image, or upload your own below.</h2>
</div>
<div id="defaultSelection">
<img id="Image1" src="Image1.jpg" style="width:128px;height:128px">
<br>
<button onclick="updateImage(Image1)">Use this image</button>
<br>
<img id="Image2" src="Image2.jpg" style="width:128px;height:128px">
<br>
<button onclick="updateImage(Image2)">Use this image</button>
<br>
<img id="Image3" src="Image3.jpg" style="width:128px;height:128px">
<br>
<button onclick="updateImage()">Use this image</button>
<br>
<img id="Image4" src="Image4.jpg" style="width:128px;height:128px">
<br>
<button onclick="updateImage()">Use this image</button>
</div>
<div id="canvasID">
<canvas id="myCanvas" width="500" height="500" style="border:1px solid #d3d3d3; background-color:white;">
</canvas>
</div>
</body>
</html>
Does anyone know why it might not be passing the images through? They display correctly on the page, so I know the source is correct, but they don't seem to want to be passed to the function.
3 answers
solution1
2 ACCPTED 2014-11-30 10:43:05
Try updating your javascript function to:
function updateImage(imageUsed) {
var c = document.getElementById("myCanvas"),
ctx = c.getContext("2d"),
image = document.getElementById(imageUsed);
ctx.drawImage(image,0,0,500,500);
}
Then output your buttons like:
<button onclick="updateImage('Image1')">Use this image</button>
solution2
1 2014-11-30 10:48:35
You need to pass the ID of the element as a string
<button onclick="updateImage('Image1')">Use this image</button>
and in updateImage method you need get the image object from the passed ID
function updateImage(imageUsed)
{
var c = document.getElementById("myCanvas");
**imageUsed = document.getElementById(imageUsed);**
var ctx = c.getContext("2d");
ctx.drawImage(imageUsed,0,0,500,500);
}
Here is the full working code
<html>
<head>
<script>
function updateImage(imageUsed)
{
var c = document.getElementById("myCanvas");
imageUsed = document.getElementById(imageUsed);
var ctx = c.getContext("2d");
ctx.drawImage(imageUsed,0,0,500,500);
}
</script>
<style>
#header
{
background-color:brown;
color:black;
text-align:center;
padding:5px;
}
#defaultSelection
{
line-height:30px;
background-color:#eeeeee;
width:200px;
float:left;
padding:5px;
text-align:center;
}
#canvasID
{
background-color:grey;
width:1000px;
float:left;
padding:10px;
text-align:center;
}
</style>
</head>
<body">
<div id="header">
<h1> Welcome</h1>
<h2>Please select an image, or upload your own below.</h2>
</div>
<div id="defaultSelection">
<img id="Image1" src="Image1.jpg" style="width:128px;height:128px">
<br>
<button onclick="updateImage('Image1')">Use this image</button>
<br>
<img id="Image2" src="Image2.jpg" style="width:128px;height:128px">
<br>
<button onclick="updateImage('Image2')">Use this image</button>
<br>
<img id="Image3" src="Image3.jpg" style="width:128px;height:128px">
<br>
<button onclick="updateImage('Image3')">Use this image</button>
<br>
<img id="Image4" src="Image4.jpg" style="width:128px;height:128px">
<br>
<button onclick="updateImage('Image4')">Use this image</button>
</div>
<div id="canvasID">
<canvas id="myCanvas" width="500" height="500" style="border:1px solid #d3d3d3; background-color:white;">
</canvas>
</div>
</body>
</html>
solution3
0 2014-11-30 10:43:21
I think you need to load the image, so it can find the URL
function updateImage(imageUsed)
{
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById(imageUsed);
ctx.drawImage(img,0,0,500,500);
}
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.