我正在为必须使用 XHTML 1.0 Strict 进行验证的类编写程序。根据 w3 的验证程序，我的页面通过了验证。我还有一个 HTML5 版本(这是原始版本)，它可以按应有的方式进行验证和工作。
应该发生的是:
当“check available”按钮被点击时，函数“checkAvailable”应该简单地找到哪个单选按钮被选中，找到索引匹配的对应的“slot[index]”和“available[index]，并显示是否槽是否可用。然而，这也没有做任何事情。
这是 javascript(缩写):
<script type = "text/javascript"><![CDATA[
var slotIndex = 0;
var slot = new Array();
//9:00AM - 10:00AM
slot[0] = "Monday: 9:00AM - 10:00AM";
slot[1] = "Tuesday: 9:00AM - 10:00AM";
slot[2] = "Wednesday: 9:00AM - 10:00AM";
slot[3] = "Thursday: 9:00AM - 10:00AM";
slot[4] = "Friday: 9:00AM - 10:00AM";
slot[5] = "Saturday: 9:00AM - 10:00AM";
var available = new Array();
//9:00AM - 10:00AM
available[0] = false;
available[1] = true;
available[2] = false;
available[3] = true;
available[4] = true;
available[5] = false;
function getSlotIndex(index)
{
slotIndex = index;
}
function checkAvailable(slot)
{
var msg = "";
if(available[slotIndex] == true)
{
msg = "Available";
return msg;
}
else
{
msg = "Not available";
return msg;
}
}
这些是一些单选按钮:
<tr>
<td> 9:00AM - 10:00AM<br /><input type = "radio" name = "slot" value = "0" id = "s0" onclick = "getSlotIndex(this.value)"></input></td>
<td> 9:00AM - 10:00AM<br /><input type = "radio" name = "slot" value = "1" id = "s1" onclick = "getSlotIndex(this.value)"></input></td>
<td> 9:00AM - 10:00AM<br /><input type = "radio" name = "slot" value = "2" id = "s2" onclick = "getSlotIndex(this.value)"></input></td>
<td> 9:00AM - 10:00AM<br /><input type = "radio" name = "slot" value = "3" id = "s3" onclick = "getSlotIndex(this.value)"></input></td>
<td> 9:00AM - 10:00AM<br /><input type = "radio" name = "slot" value = "4" id = "s4" onclick = "getSlotIndex(this.value)"></input></td>
<td> 9:00AM - 10:00AM<br /><input type = "radio" name = "slot" value = "5" id = "s5" onclick = "getSlotIndex(this.value)"></input></td>
<td> CLOSED </td>
</tr>
下面是运行函数的按钮:
<input type = "button" name = "find_available" value = "Find available" onclick = "findAvailable()"></input>
<input type = "text" name = "this.form['isAvailable']" size = "25"></input>
最佳答案
您可能想在 http://pastebin.com/ 上发布您的完整页面.这将使我们能够将您的代码保存到本地文件并查看它的问题所在。
就 fiddle 而言，您的主要问题是如何设置 fiddle 。通过将菜单设置为 onLoad , jsFiddle 将 JavaScript Pane 中的任何内容包装在一个运行于 window.onload 的匿名函数中。通过将所有 HTML 标记、CSS 和 JavaScript 粘贴到 JavaScript Pane 中，您可以将页面包裹在 HTML5 页面中。
改为这样设置:
更改为 No wrap - in <head>让你的checkAvailable对全局范围可见，这允许您的内联事件处理程序查看函数(并因此执行它)。
您也可以选择No wrap - in <body>没有不良影响。
jsFiddle 也不允许使用 document.write因为它会导致渲染输出出现问题。使用document.write一般来说，这是一种不好的做法，您应该尽可能避免。您确实想要使用的特定用例很少 document.write并且有更好的 DOM 插入技术可用。
我更改了 findAvailable函数在额外的 div 上使用字符串连接我在 form 之后添加的元素元素作为一个简单的例子:
function findAvailable() {
var avail = document.getElementById('list_available_slots');
for (i = 0; i < 83; i = i + 1) {
if (available[i] == true) {
avail.innerHTML += slot[i] + "<br />Available<br />";
}
}
}
此外，我还必须添加 background-color: black !important;到 CSS html, body定义以使您的白色文本可见。
这是更新的(工作中的) fiddle :http://jsfiddle.net/VG9WU/4/
最后，虽然您的帖子非常清楚地表明这是针对一个类(class)的，但您的代码包含几个(通常)不良做法，随着您的进步您将希望摆脱这些不良做法。它们没有特定的顺序(并且“不限于”，因为我确定我没有捕获所有内容)，如下所示:
- 内联 JavaScript 事件处理程序
- 内联样式定义
- 不使用自闭标签(即
<img ...></img>而不是<img ... />) - 使用
<br />元素而不是使用 CSS 来更改display至block - 不使用
label单选按钮的元素(这使得它们更容易点击) - 使用
name而不是id对于您的输入(是的，您将id用于您的 radio ，但您应该将它们用于您的button和其他输入，并且它允许使用document.getElementById) - 使用
new Array()而不是[] - 全局变量
- 相关数据的分离(
slot和available应该一起定义) - 使用
<hr />什么时候 CSS 会做 - 不使用 ECMAScript 严格模式(“快速失败并大声失败”)来帮助查找错误
这是您使用更好的实践编写的元素的功能性示例:http://jsfiddle.net/5TXDL/
关于javascript - XHTML 1.0 严格 : Problems with form/javascript，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20292430/