gpt4 book ai didi

javascript - XHTML 1.0 严格 : Problems with form/javascript

转载 作者:行者123 更新时间:2023-11-28 11:51:48 29 4
gpt4 key购买 nike

我正在为必须使用 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 页面中。

改为这样设置:

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定义以使您的白色文本可见。

这是更新的(工作中的) fiddle :http://jsfiddle.net/VG9WU/4/

最后,虽然您的帖子非常清楚地表明这是针对一个类(class)的,但您的代码包含几个(通常)不良做法,随着您的进步您将希望摆脱这些不良做法。它们没有特定的顺序(并且“不限于”,因为我确定我没有捕获所有内容),如下所示:

  • 内联 JavaScript 事件处理程序
  • 内联样式定义
  • 不使用自闭标签(即 <img ...></img> 而不是 <img ... /> )
  • 使用<br />元素而不是使用 CSS 来更改 displayblock
  • 不使用label单选按钮的元素(这使得它们更容易点击)
  • 使用name而不是 id对于您的输入(是的,您将 id 用于您的 radio ,但您应该将它们用于您的 button 和其他输入,并且它允许使用 document.getElementById )
  • 使用new Array()而不是 []
  • 全局变量
  • 相关数据的分离(slotavailable应该一起定义)
  • 使用<hr />什么时候 CSS 会做
  • 不使用 ECMAScript 严格模式(“快速失败并大声失败”)来帮助查找错误

这是您使用更好的实践编写的元素的功能性示例:http://jsfiddle.net/5TXDL/

关于javascript - XHTML 1.0 严格 : Problems with form/javascript,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20292430/

29 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com