XHTML 1.0 Strict: проблемы с формой / JavaScript

0

Я пишу программу для класса, которая должна проверяться с помощью 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>
  • 0
    Я сомневаюсь, что этот код работает в любом режиме. Вызов метода document.write() после анализа страницы откроет новый документ и уничтожит весь предыдущий код на странице. Хотя document.write() вообще не работает в XHTML ...
  • 0
    Как насчет функции "checkAvailable"? Я знаю, что другая функция - мусор. Я планирую придумать лучший способ включить цикл где-нибудь (это требование для назначения). Но любая помощь по чеку доступна, и почему она не работает?
Показать ещё 11 комментариев
Теги:

1 ответ

0

Вы можете опубликовать свою страницу полностью на странице http://pastebin.com/. Это позволит нам сохранить ваш код в локальном файле и посмотреть, в чем проблема.

Что касается скрипки, ваша главная проблема заключается в том, как вы настраиваете скрипку. Установив меню в onLoad, jsFiddle обертывает все, что находится на панели JavaScript, в анонимной функции, которая работает на window.onload и вставив всю вашу разметку HTML, CSS и JavaScript в панель JavaScript, вы получаете свою страницу, завернутую в HTML5.

Настройте его так:

Изображение 174551

Переход на 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/

Наконец, в то время как ваш пост ясно показывает, что это для класса, ваш код включает в себя несколько (вообще) плохих методов, которые вы хотите отойти от них по мере продвижения. Они, в определенном порядке (и "не ограничены", как я уверен, я не поймал все), следующим образом:

  • встроенные обработчики событий JavaScript
  • встроенные определения стиля
  • не используя самозакрывающиеся теги (т.е. <img...></img> вместо <img.../>)
  • используя <br/> элементы вместо использования CSS для изменения display для block
  • не используя элементы label для ваших переключателей (что делает их намного проще щелкнуть)
  • используя name вместо id для ваших входов (да, вы используете id для своих радиостанций, но вы должны использовать их для своей button и других входов, а также для использования document.getElementById)
  • использование new Array() в отличие от []
  • глобальные переменные
  • разделение связанных данных (slot и available должны быть определены вместе)
  • используя <hr/> когда CSS будет делать
  • не используя строгий режим ECMAScript ("fail fast and fail loudly"), чтобы помочь найти ошибки

Вот функциональный пример вашего проекта, написанный с использованием лучших практик: http://jsfiddle.net/5TXDL/

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню