Я пишу программу для класса, которая должна проверяться с помощью XHTML 1.0 Strict. Согласно валидатору в w3, моя страница проверяется. У меня также есть версия HTML5 (которая была оригинальной), которая проверяет и работает так, как должна.
Что должно произойти, так это то, что:
Когда нажата кнопка "Проверить доступность", функция "checkAvailable" должна просто найти, какая радиокнопка была выбрана, найти соответствующий "слот [индекс]" и "доступный [индекс], где совпадают индексы, и отобразить, является ли этот слот доступный или нет. Однако это вообще ничего не значит.
Это 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/. Это позволит нам сохранить ваш код в локальном файле и посмотреть, в чем проблема.
Что касается скрипки, ваша главная проблема заключается в том, как вы настраиваете скрипку. Установив меню в onLoad
, jsFiddle обертывает все, что находится на панели JavaScript, в анонимной функции, которая работает на window.onload
и вставив всю вашу разметку HTML, CSS и JavaScript в панель JavaScript, вы получаете свою страницу, завернутую в HTML5.
Настройте его так:
Переход на No wrap - in <head>
делает ваш checkAvailable
видимым для глобальной области, которая позволяет вашим обработчикам событий inline видеть функцию (и, эрго, выполнить ее).
Вы также можете выбрать 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
определение html, body
чтобы сделать ваш белый текст видимым.
Здесь обновленная (рабочая) скрипка: http://jsfiddle.net/VG9WU/4/
Наконец, в то время как ваш пост ясно показывает, что это для класса, ваш код включает в себя несколько (вообще) плохих методов, которые вы хотите отойти от них по мере продвижения. Они, в определенном порядке (и "не ограничены", как я уверен, я не поймал все), следующим образом:
<img...></img>
вместо <img.../>
)<br/>
элементы вместо использования CSS для изменения display
для block
label
для ваших переключателей (что делает их намного проще щелкнуть)name
вместо id
для ваших входов (да, вы используете id
для своих радиостанций, но вы должны использовать их для своей button
и других входов, а также для использования document.getElementById
)new Array()
в отличие от []
slot
и available
должны быть определены вместе)<hr/>
когда CSS будет делатьВот функциональный пример вашего проекта, написанный с использованием лучших практик: http://jsfiddle.net/5TXDL/
document.write()
после анализа страницы откроет новый документ и уничтожит весь предыдущий код на странице. Хотяdocument.write()
вообще не работает в XHTML ...