创建宾果游戏
Creating a BINGO Game
我正在尝试使用字母而不是数字创建宾果游戏。我正在分解 javascript 代码。在我做随机字母之前,我想让 "square0" 显示一个字母(例如:"a")但是,字母 "a" 没有显示。我将不胜感激任何建议。这是我的:
HTML:
<table class="bingo">
<tr>
<th>B</th>
<th>I</th>
<th>N</th>
<th>G</th>
<th>O</th>
</tr>
<tr>
<td id="square0"></td>
<td id="square1"></td>
<td id="square2"></td>
<td id="square3"></td>
<td id="square4"></td>
</tr>
<tr>
<td id="square5"></td>
<td id="square6"></td>
<td id="square7"></td>
<td id="square8"></td>
<td id="square9"></td>
</tr>
<tr>
<td id="square10"></td>
<td id="square11"></td>
<td id="free">Free</td>
<td id="square13"></td>
<td id="square14"></td>
</tr>
<tr>
<td id="square15"></td>
<td id="square16"></td>
<td id="square17"></td>
<td id="square18"></td>
<td id="square19"></td>
</tr>
<tr>
<td id="square20"></td>
<td id="square21"></td>
<td id="square22"></td>
<td id="square23"></td>
<td id="square24"></td>
</tr>
</table>
JS:
var $ = function (id) {
return document.getElementById(id);
}
window.onload = function () {
document.$("square0").innerHTML = "a";
}
问题中显示的代码不起作用,因为您需要将获取元素快捷函数引用为 $()
或 window.$()
, 而不是 document.$()
.
window.onload = function () {
$("square0").innerHTML = "a";
// OR window.$("square0").innerHTML = "a";
}
您的 fiddle 不起作用,因为:
- 您没有包含
$()
函数的定义
- 您已尝试在
window.onload =
中设置 jsfiddle 为您提供的默认加载处理程序,这意味着当您尝试创建您自己的 onload 处理程序 onload 事件已经发生。查看左侧框架和扩展标题下的内容:有一个下拉菜单显示 "onLoad"
,您应该将其更改为 "No wrap - in <head>"
(或 "No wrap - in <body>"
)。
刚刚更新了缺少功能的 fiddle。
var $ = function (id) {
return document.getElementById(id);
}
window.onload = { $("square0").innerHTML = "a"; }
这使函数与调用它分开,因为我假设您打算多次调用它。
'document' 已经是函数的一部分,因此在调用 window.onload 时不需要它,实际上您的代码正在执行 document.document.getElementById
。
调用执行函数调用本身的变量 $
时,onload
中不需要术语 'function()'。参见 functions as expressions
nnnnnn 给出了一个有效的答案,其中还包括对 jfiddle 的 onload 解释(onload 是左侧菜单中 Frameworks 下的一个 jsfiddle 选项)。
我正在尝试使用字母而不是数字创建宾果游戏。我正在分解 javascript 代码。在我做随机字母之前,我想让 "square0" 显示一个字母(例如:"a")但是,字母 "a" 没有显示。我将不胜感激任何建议。这是我的:
HTML:
<table class="bingo">
<tr>
<th>B</th>
<th>I</th>
<th>N</th>
<th>G</th>
<th>O</th>
</tr>
<tr>
<td id="square0"></td>
<td id="square1"></td>
<td id="square2"></td>
<td id="square3"></td>
<td id="square4"></td>
</tr>
<tr>
<td id="square5"></td>
<td id="square6"></td>
<td id="square7"></td>
<td id="square8"></td>
<td id="square9"></td>
</tr>
<tr>
<td id="square10"></td>
<td id="square11"></td>
<td id="free">Free</td>
<td id="square13"></td>
<td id="square14"></td>
</tr>
<tr>
<td id="square15"></td>
<td id="square16"></td>
<td id="square17"></td>
<td id="square18"></td>
<td id="square19"></td>
</tr>
<tr>
<td id="square20"></td>
<td id="square21"></td>
<td id="square22"></td>
<td id="square23"></td>
<td id="square24"></td>
</tr>
</table>
JS:
var $ = function (id) {
return document.getElementById(id);
}
window.onload = function () {
document.$("square0").innerHTML = "a";
}
问题中显示的代码不起作用,因为您需要将获取元素快捷函数引用为 $()
或 window.$()
, 而不是 document.$()
.
window.onload = function () {
$("square0").innerHTML = "a";
// OR window.$("square0").innerHTML = "a";
}
您的 fiddle 不起作用,因为:
- 您没有包含
$()
函数的定义 - 您已尝试在
window.onload =
中设置 jsfiddle 为您提供的默认加载处理程序,这意味着当您尝试创建您自己的 onload 处理程序 onload 事件已经发生。查看左侧框架和扩展标题下的内容:有一个下拉菜单显示"onLoad"
,您应该将其更改为"No wrap - in <head>"
(或"No wrap - in <body>"
)。
刚刚更新了缺少功能的 fiddle。
var $ = function (id) {
return document.getElementById(id);
}
window.onload = { $("square0").innerHTML = "a"; }
这使函数与调用它分开,因为我假设您打算多次调用它。
'document' 已经是函数的一部分,因此在调用 window.onload 时不需要它,实际上您的代码正在执行 document.document.getElementById
。
调用执行函数调用本身的变量 $
时,onload
中不需要术语 'function()'。参见 functions as expressions
nnnnnn 给出了一个有效的答案,其中还包括对 jfiddle 的 onload 解释(onload 是左侧菜单中 Frameworks 下的一个 jsfiddle 选项)。