使用 Javascript 将单个图像连接到 table 中的单个单元格
Connect single image to single cell in a table with Javascript
我对编程和这个社区都很陌生,我会尽量讲清楚。我需要创建一个 HTML table 16x16,每个单元格中都有一个按钮,每个单元格显示不同的图像 - 一个笑脸,而不会为不同的单元格显示相同的笑脸。我有点卡住了,我也很感激提示,只是想尝试自己继续前进。谢谢!这是我创建 table 并显示图像的代码:
function displayImage(){
var num = Math.floor(Math.random() * 256);
document.canvas.src = '../../output/'+ imagesArray[num]+ '.png';
document.getElementById("YourImage").style.visibility = "visible";
}
for(var r = 0; r < rows;r++)
{
table += '<tr>';
for(var c= 0; c< cols;c++)
{
table += '<td style="width:50px" id="(i++)">' + '<button type="button" onclick="displayImage()">' +
"show me" + '</button>' + '</td>';
}
table += '</tr>';
}
document.write('<table id="grid" border="1">' + table + '</table>');
(为了便于阅读,未显示 ImagesArray,但它只是收集了所有 256 种二进制组合)。
这个问题是每次我点击一个按钮它会显示一个随机图像,如果我再次点击同一个按钮它会显示另一个,而我希望它总是为同一个按钮显示相同的图像。
注意:之后我不能删除按钮或类似的技巧,因为玩家(这是一个 oTree 实验)需要能够回到他在任何时候看到的笑脸。
非常感谢您的帮助!
我会更改生成随机数的点,并将其从显示函数推进到 table 的初始化。
创建一个包含 0 到 255 之间数字的数组。在遍历行和列以创建 table 时,从该数组中选择一个随机数并将其分配给按钮的 id 属性。一定要从数组中删除这个数字,这样它就不能再用于后面的按钮。这样,将使用 256 个数字中的每一个,但顺序是随机的。当用户单击按钮时,使用 displayImage(this.id)
按钮的 ID 用作调用 displayImage()
的参数。因此,将始终使用相同数量的按钮来获取相应的图像。
代码:
// call displayImage() with parameter
function displayImage(num){
document.canvas.src = '../../output/'+ imagesArray[num]+ '.png';
document.getElementById("YourImage").style.visibility = "visible";
}
// create array 'nums' with numbers from 0 to 255 (= rows * cols)
var nums = [];
for (var i = 0; i < (rows * cols); i++) {
nums.push(i);
};
for(var r = 0; r < rows; r++)
{
table += '<tr>';
for(var c = 0; c < cols; c++)
{
// get random index in array 'nums'
var random = Math.floor(Math.random() * nums.length);
// assign an id to the button with a random number from 'nums' and use this id in displayImage()
table += '<td style="width:50px" id="(i++)">' + '<button id="' + nums[random] + '" type="button" onclick="displayImage(this.id)">' +
"show me" + '</button>' + '</td>';
// remove the already used random number from 'nums'
nums.splice(random, 1);
}
table += '</tr>';
}
document.write('<table id="grid" border="1">' + table + '</table>');
这样您就可以将相同的图像连接到每个按钮。它在创建 table 时是随机的,因此每次加载页面时顺序都不同。
我假设你正在使用 HTML5 因为只有这样才允许 id 属性只包含数字。
注意:我不知道你在创建<td>
元素时想要用id="(i++)"
实现什么。你这样做的方式只是用字符串 (i++)
命名每个 id,这与 id 应该是唯一的想法相矛盾。如果你想命名从例如 td-0
到 td-255
升序的 id,你应该将行更改为:
table += '<td style="width:50px" id="td-' + (r * rows + c) + '">' + '<button id="' + nums[random] + '" type="button" onclick="displayImage(this.id)">' + "show me" + '</button>' + '</td>';
你不能只使用数字而不添加像 td-
这样的东西,因为按钮已经有纯数字作为 id。
试试这个:
var rows = 16, cols = 16;
var table = '';
function shuffle(array) { // shuffle (randomize) array elements
var i = array.length, j, x;
while (i) {
j = Math.random() * i-- | 0;
x = array[i];
array[i] = array[j];
array[j] = x;
}
}
var rNums = new Array(rows * cols);
for (var i = 0; i < rows * cols; i++) {
rNums[i] = i;
}
shuffle(rNums);
function displayImage(num) {
//var num = Math.floor(Math.random() * 256);
document.canvas.src = '../../output/'+ imagesArray[num]+ '.png';
//document.getElementById("canvas").innerHTML = num;
document.getElementById("YourImage").style.visibility = "visible";
}
var i = 0;
for (var r = 0; r < rows; r++) {
table += '<tr>';
for (var c = 0; c < cols; c++) {
table += '<td style="width:50px" id="' + i + '"><button type="button" onclick="displayImage(' + rNums[i] + ')">show me</button></td>';
i++; //go to next element of rNums array
}
table += '</tr>';
}
document.write('<table id="grid" border="1">' + table + '</table>');
我对编程和这个社区都很陌生,我会尽量讲清楚。我需要创建一个 HTML table 16x16,每个单元格中都有一个按钮,每个单元格显示不同的图像 - 一个笑脸,而不会为不同的单元格显示相同的笑脸。我有点卡住了,我也很感激提示,只是想尝试自己继续前进。谢谢!这是我创建 table 并显示图像的代码:
function displayImage(){
var num = Math.floor(Math.random() * 256);
document.canvas.src = '../../output/'+ imagesArray[num]+ '.png';
document.getElementById("YourImage").style.visibility = "visible";
}
for(var r = 0; r < rows;r++)
{
table += '<tr>';
for(var c= 0; c< cols;c++)
{
table += '<td style="width:50px" id="(i++)">' + '<button type="button" onclick="displayImage()">' +
"show me" + '</button>' + '</td>';
}
table += '</tr>';
}
document.write('<table id="grid" border="1">' + table + '</table>');
(为了便于阅读,未显示 ImagesArray,但它只是收集了所有 256 种二进制组合)。 这个问题是每次我点击一个按钮它会显示一个随机图像,如果我再次点击同一个按钮它会显示另一个,而我希望它总是为同一个按钮显示相同的图像。 注意:之后我不能删除按钮或类似的技巧,因为玩家(这是一个 oTree 实验)需要能够回到他在任何时候看到的笑脸。 非常感谢您的帮助!
我会更改生成随机数的点,并将其从显示函数推进到 table 的初始化。
创建一个包含 0 到 255 之间数字的数组。在遍历行和列以创建 table 时,从该数组中选择一个随机数并将其分配给按钮的 id 属性。一定要从数组中删除这个数字,这样它就不能再用于后面的按钮。这样,将使用 256 个数字中的每一个,但顺序是随机的。当用户单击按钮时,使用 displayImage(this.id)
按钮的 ID 用作调用 displayImage()
的参数。因此,将始终使用相同数量的按钮来获取相应的图像。
代码:
// call displayImage() with parameter
function displayImage(num){
document.canvas.src = '../../output/'+ imagesArray[num]+ '.png';
document.getElementById("YourImage").style.visibility = "visible";
}
// create array 'nums' with numbers from 0 to 255 (= rows * cols)
var nums = [];
for (var i = 0; i < (rows * cols); i++) {
nums.push(i);
};
for(var r = 0; r < rows; r++)
{
table += '<tr>';
for(var c = 0; c < cols; c++)
{
// get random index in array 'nums'
var random = Math.floor(Math.random() * nums.length);
// assign an id to the button with a random number from 'nums' and use this id in displayImage()
table += '<td style="width:50px" id="(i++)">' + '<button id="' + nums[random] + '" type="button" onclick="displayImage(this.id)">' +
"show me" + '</button>' + '</td>';
// remove the already used random number from 'nums'
nums.splice(random, 1);
}
table += '</tr>';
}
document.write('<table id="grid" border="1">' + table + '</table>');
这样您就可以将相同的图像连接到每个按钮。它在创建 table 时是随机的,因此每次加载页面时顺序都不同。
我假设你正在使用 HTML5 因为只有这样才允许 id 属性只包含数字。
注意:我不知道你在创建<td>
元素时想要用id="(i++)"
实现什么。你这样做的方式只是用字符串 (i++)
命名每个 id,这与 id 应该是唯一的想法相矛盾。如果你想命名从例如 td-0
到 td-255
升序的 id,你应该将行更改为:
table += '<td style="width:50px" id="td-' + (r * rows + c) + '">' + '<button id="' + nums[random] + '" type="button" onclick="displayImage(this.id)">' + "show me" + '</button>' + '</td>';
你不能只使用数字而不添加像 td-
这样的东西,因为按钮已经有纯数字作为 id。
试试这个:
var rows = 16, cols = 16;
var table = '';
function shuffle(array) { // shuffle (randomize) array elements
var i = array.length, j, x;
while (i) {
j = Math.random() * i-- | 0;
x = array[i];
array[i] = array[j];
array[j] = x;
}
}
var rNums = new Array(rows * cols);
for (var i = 0; i < rows * cols; i++) {
rNums[i] = i;
}
shuffle(rNums);
function displayImage(num) {
//var num = Math.floor(Math.random() * 256);
document.canvas.src = '../../output/'+ imagesArray[num]+ '.png';
//document.getElementById("canvas").innerHTML = num;
document.getElementById("YourImage").style.visibility = "visible";
}
var i = 0;
for (var r = 0; r < rows; r++) {
table += '<tr>';
for (var c = 0; c < cols; c++) {
table += '<td style="width:50px" id="' + i + '"><button type="button" onclick="displayImage(' + rNums[i] + ')">show me</button></td>';
i++; //go to next element of rNums array
}
table += '</tr>';
}
document.write('<table id="grid" border="1">' + table + '</table>');