Question

我正在编写一个必须使用XHTML 1.0 Strict验证的类程序。根据w3的验证器，我的页面验证。我也有一个HTML5版本（这是原始的），它验证和工作的方式。

应该发生的是：

单击“检查可用”按钮时，“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>

Answer 1

您可能希望在http://pastebin.com/完整发布您的网页。这将允许我们将您的代码保存到本地文件，并查看它的问题。

就小提琴而言，你的主要问题是如何设置小提琴。通过将菜单设置为onLoad，jsFiddle将在window.onload上运行的匿名函数中的JavaScript窗格中包含任何内容，并在JavaScript窗格中粘贴所有HTML标记，CSS和JavaScript，将您的页面打包在HTML5页面中。

将其设置为：

jsFiddle setup

更改为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定义中，以使您的白色文字可见。

这是更新的（工作）小提琴：http://jsfiddle.net/VG9WU/4/

最后，虽然您的帖子非常清楚这是针对某个课程的，但您的代码包含多个（通常）不良做法，您希望在进展过程中远离 / em>的。它们没有特别的顺序（并且“不限于”，因为我确定我没有抓到所有东西），如下所示：

内联JavaScript事件处理程序

内联样式定义

不使用自闭标签（即<img ...></img>代替<img ... />）

使用<br />元素而非使用CSS将display更改为block

不使用label元素作为您的单选按钮（这使得它们更容易点击）

使用name代替id作为您的输入（是的，您使用id作为您的无线电，但您应该将它们用于button和其他输入因为它允许使用document.getElementById）

使用new Array()而不是[]

全局范围的变量

相关数据的分离（slot和available应该一起定义）

当CSS执行时使用<hr />

没有使用ECMAScript严格模式（“快速失败并且大声失败”）来帮助查找错误

以下是使用更好的做法编写的项目的功能示例：http://jsfiddle.net/5TXDL/

XHTML 1.0严格：表单/ javascript的问题

1 个答案: