通过按钮将变量传递给函数（HTML / Javascript）

Question

我正在尝试创建一个页面，允许我从一系列图像中进行选择，并可以选择通过URL选择自己的图像，但是我偶然发现了一个问题。 我试图使用放置在示例图像下方的按钮来更改通过管道传递到函数中的源图像，但是我似乎无法使其正常工作。 这是我的代码：

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

有谁知道为什么它可能无法通过图像？ 它们在页面上正确显示，所以我知道源是正确的，但是它们似乎不想传递给函数。

Answer 1

尝试将您的JavaScript函数更新为：

function updateImage(imageUsed) {
    var c = document.getElementById("myCanvas"),
        ctx = c.getContext("2d"),
        image = document.getElementById(imageUsed);
    ctx.drawImage(image,0,0,500,500);
}

然后输出您的按钮，如：

<button onclick="updateImage('Image1')">Use this image</button>

Answer 2

您需要将元素的ID作为字符串传递

<button onclick="updateImage('Image1')">Use this image</button>

在updateImage方法中，您需要从传递的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);
}

这是完整的工作代码

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

Answer 3

我认为您需要加载图片，以便找到网址

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);
}

通过按钮将变量传递给函数（HTML / Javascript）

问题描述

3 个解决方案

解决方案1
2 已采纳 2014-11-30 10:43:05

解决方案2
1 2014-11-30 10:48:35

解决方案3
0 2014-11-30 10:43:21

通过按钮将变量传递给函数（HTML / Javascript）

问题描述

3 个解决方案

解决方案1 2 已采纳 2014-11-30 10:43:05

解决方案2 1 2014-11-30 10:48:35

解决方案3 0 2014-11-30 10:43:21

解决方案1
2 已采纳 2014-11-30 10:43:05

解决方案2
1 2014-11-30 10:48:35

解决方案3
0 2014-11-30 10:43:21