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

【问题标题】：Passing a variable to a function through a button (HTML/Javascript)通过按钮将变量传递给函数（HTML/Javascript）
【发布时间】：2015-01-28 12:11:06
【问题描述】：

我正在尝试创建一个允许我从一系列图像中进行选择的页面，并且可以通过 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>

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

【问题讨论】：

标签： javascript html image function button

【解决方案1】：

您需要将元素的 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>

【讨论】：

【解决方案2】：

我认为您需要加载图像，以便它可以找到 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);
}

【讨论】：

【解决方案3】：

尝试将您的 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>

【讨论】：

太棒了，您可以将其中一个答案标记为所选答案吗？看起来他们几乎都在说同样的话。