Не подключается СSS

156
05 марта 2021, 16:30

у меня возникла такая проблема - есть файлы styleForLaba.css, program.js, laba5.2.html,(Прикреплю их сюда),при подключении css (либо через css файл,либо через style в html файле) не работают описанные свойства для классов.Пробовал добавлять стили через DevTools и все работает.Подскажите,пожалуйста,в чем может быть проблема?

questions = [ 
    { 
        idQuest: 1, 
        textQuest: "HTML (Hyper Text Markup Language) является:" 
    }, 
    { 
        idQuest: 2, 
        textQuest: "Инструкция браузеру, указывающая способ отображения текста: " 
    }, 
    { 
        idQuest: 3, 
        textQuest: "Web-страница (документ HTML) представляет собой: " 
    }, 
    { 
        idQuest: 4, 
        textQuest: "Гипертекст - это: " 
    }, 
    { 
        idQuest: 5, 
        textQuest: "Вычеслите: 44<sub>5</sub> + 22<sub>3</sub>" 
    }, 
    { 
        idQuest: 6, 
        textQuest: "Известно,что в кодовой таблице ASCII десятичный код символа 1 равен 49.Каков десятичный код символа 9? " 
    }, 
    { 
        idQuest: 7, 
        textQuest: "Дано: а = 20<sub>10</sub>,b = 22<sub>8</sub>.Какое из чисел <i>c</i>,записанных в двоичной системе,отвечает условию <i>b&ltc&lta</i>?  " 
    }, 
    { 
        idQuest: 8, 
        textQuest: "К устройствам вывода информации относится? " 
    }, 
    { 
        idQuest: 9, 
        textQuest: "Устройство,которое не используется для долговременного хранения информации - это? " 
    }, 
    { 
        idQuest: 10, 
        textQuest: "Поле, значение которого однозначно определяет запись в таблице базы данных, называется " 
    }, 
    { 
        idQuest: 11, 
        textQuest: "Графика с представлением изображения в виде совокупности точек называется" 
    }, 
    { 
        idQuest: 12, 
        textQuest: "Под искусственным интелектом обычно понимают " 
    }, 
    { 
        idQuest: 13, 
        textQuest: "В виде комбинации оттенков,  каких  трех основных цветов представлена каждая точка, из массива цветовых точек экрана монитора? " 
    }, 
    { 
        idQuest: 14, 
        textQuest: "Стандартизация - это: " 
    }, 
    { 
        idQuest: 15, 
        textQuest: "Тексты, рисунки, фотографии, световые и звуковые сигналы, радиоволны, электрические нервные импульсы, магнитные записи это: " 
    }, 
    { 
        idQuest: 16, 
        textQuest: "Как называют сеть, в которой один ПК главный?" 
    }, 
    { 
        idQuest: 17, 
        textQuest: "Какое, из перечисленных устройств, имеет узкоспециализированный процессор и оперативную память? " 
    }, 
    { 
        idQuest: 18, 
        textQuest: "Электронная почта (E-mail) позволяет передавать: " 
    }, 
    { 
        idQuest: 19, 
        textQuest: "Как называется процесс передачи сообщений в электронном виде?" 
    }, 
    { 
        idQuest: 20, 
        textQuest: "Почтовый ящик абонента электронной почты - это " 
    } 
]; 
answers = [ 
    { 
        idAnsw: 1, 
        idQuest: 1, 
        textAnsw: "одним из средств при создании web-страниц", 
        isTrue: true 
    }, 
    { 
        idAnsw: 2, 
        idQuest: 1, 
        textAnsw: "системой программирования", 
        isTrue: false 
    }, 
    { 
        idAnsw: 3, 
        idQuest: 1, 
        textAnsw: "графическим редактором", 
        isTrue: false 
    }, 
    { 
        idAnsw: 4, 
        idQuest: 1, 
        textAnsw: "системой управления базами данных", 
        isTrue: false 
    }, 
    { 
        idAnsw: 5, 
        idQuest: 2, 
        textAnsw: "программный код", 
        isTrue: false 
    }, 
    { 
        idAnsw: 6, 
        idQuest: 2, 
        textAnsw: "тэг ", 
        isTrue: true 
    }, 
    { 
        idAnsw: 7, 
        idQuest: 2, 
        textAnsw: "файл", 
        isTrue: false 
    }, 
    { 
        idAnsw: 8, 
        idQuest: 2, 
        textAnsw: "кегль", 
        isTrue: false 
    }, 
    { 
        idAnsw: 9, 
        idQuest: 3, 
        textAnsw: "текстовый файл с расширением txt или doc", 
        isTrue: false 
    }, 
    { 
        idAnsw: 10, 
        idQuest: 3, 
        textAnsw: "текстовый файл с расширением htm или html", 
        isTrue: true 
    }, 
    { 
        idAnsw: 11, 
        idQuest: 3, 
        textAnsw: "двоичный файл с расширением com или exe", 
        isTrue: false 
    }, 
    { 
        idAnsw: 12, 
        idQuest: 3, 
        textAnsw: "графический файл с расширением gif или jpg", 
        isTrue: false 
    }, 
    { 
        idAnsw: 13, 
        idQuest: 4, 
        textAnsw: "текст очень большого размера", 
        isTrue: false 
    }, 
    { 
        idAnsw: 14, 
        idQuest: 4, 
        textAnsw: "текст, в котором используется шрифт большого размера", 
        isTrue: false 
    }, 
    { 
        idAnsw: 15, 
        idQuest: 4, 
        textAnsw: "структурированный текст, где возможны переходы по выделенным меткам", 
        isTrue: true 
    }, 
    { 
        idAnsw: 16, 
        idQuest: 4, 
        textAnsw: "текст, в который вставлены объекты с большим объемом информации", 
        isTrue: false 
    }, 
    { 
        idAnsw: 17, 
        idQuest: 5, 
        textAnsw: "1 111", 
        isTrue: false 
    }, 
    { 
        idAnsw: 18, 
        idQuest: 5, 
        textAnsw: "10 000", 
        isTrue: false 
    }, 
    { 
        idAnsw: 19, 
        idQuest: 5, 
        textAnsw: "10 111", 
        isTrue: false 
    }, 
    { 
        idAnsw: 20, 
        idQuest: 5, 
        textAnsw: "10 011", 
        isTrue: true 
    }, 
    { 
        idAnsw: 21, 
        idQuest: 6, 
        textAnsw: "51", 
        isTrue: false 
    }, 
    { 
        idAnsw: 22, 
        idQuest: 6, 
        textAnsw: "53", 
        isTrue: false 
    }, 
    { 
        idAnsw: 23, 
        idQuest: 6, 
        textAnsw: "55", 
        isTrue: false 
    }, 
    { 
        idAnsw: 24, 
        idQuest: 6, 
        textAnsw: "57", 
        isTrue: true 
    }, 
    { 
        idAnsw: 25, 
        idQuest: 7, 
        textAnsw: "100<sub>10</sub>", 
        isTrue: false 
    }, 
    { 
        idAnsw: 26, 
        idQuest: 7, 
        textAnsw: "100 000<sub>2</sub>", 
        isTrue: true 
    }, 
    { 
        idAnsw: 27, 
        idQuest: 7, 
        textAnsw: "222<sub>3</sub>", 
        isTrue: false 
    }, 
    { 
        idAnsw: 28, 
        idQuest: 7, 
        textAnsw: "66<sub>8</sub>", 
        isTrue: false 
    }, 
    { 
        idAnsw: 29, 
        idQuest: 8, 
        textAnsw: "Монитор", 
        isTrue: true 
    }, 
    { 
        idAnsw: 30, 
        idQuest: 8, 
        textAnsw: "Клавиатура", 
        isTrue: false 
    }, 
    { 
        idAnsw: 31, 
        idQuest: 8, 
        textAnsw: "Микрофон", 
        isTrue: true 
    }, 
    { 
        idAnsw: 32, 
        idQuest: 8, 
        textAnsw: "Сканер", 
        isTrue: false 
    }, 
    { 
        idAnsw: 33, 
        idQuest: 9, 
        textAnsw: "Жесткий диск", 
        isTrue: false 
    }, 
    { 
        idAnsw: 34, 
        idQuest: 9, 
        textAnsw: "Флэш-Карта", 
        isTrue: false 
    }, 
    { 
        idAnsw: 35, 
        idQuest: 9, 
        textAnsw: "Оперативное запоминающее устройство(ОЗУ)", 
        isTrue: true 
    }, 
    { 
        idAnsw: 36, 
        idQuest: 9, 
        textAnsw: "CD-диск", 
        isTrue: false 
    }, 
    { 
        idAnsw: 37, 
        idQuest: 10, 
        textAnsw: "Внешнее", 
        isTrue: false 
    }, 
    { 
        idAnsw: 38, 
        idQuest: 10, 
        textAnsw: "Внутренее", 
        isTrue: false 
    }, 
    { 
        idAnsw: 39, 
        idQuest: 10, 
        textAnsw: "Индексированное", 
        isTrue: false 
    }, 
    { 
        idAnsw: 40, 
        idQuest: 10, 
        textAnsw: "Ключевое", 
        isTrue: true 
    }, 
    { 
        idAnsw: 41, 
        idQuest: 11, 
        textAnsw: "Фрактальная", 
        isTrue: false 
    }, 
    { 
        idAnsw: 42, 
        idQuest: 11, 
        textAnsw: "Векторная", 
        isTrue: false 
    }, 
    { 
        idAnsw: 43, 
        idQuest: 11, 
        textAnsw: "Растровая", 
        isTrue: true 
    }, 
    { 
        idAnsw: 44, 
        idQuest: 11, 
        textAnsw: "Прямоугольная", 
        isTrue: false 
    }, 
    { 
        idAnsw: 45, 
        idQuest: 12, 
        textAnsw: "пособности компьютерных систем к таким действиям, которые назывались бы интеллектуальными, если бы исходили от человека", 
        isTrue: true 
    }, 
    { 
        idAnsw: 46, 
        idQuest: 12, 
        textAnsw: "класс пакетов включает: информационные системы, поддерживающие диалог на естественном языке", 
        isTrue: false 
    }, 
    { 
        idAnsw: 47, 
        idQuest: 12, 
        textAnsw: "способности, связанные с человеческим мышлением", 
        isTrue: false 
    }, 
    { 
        idAnsw: 48, 
        idQuest: 12, 
        textAnsw: "интеллектуальные пакеты прикладных программ, позволяющие решать прикладные задачи без программирования", 
        isTrue: false 
    }, 
    { 
        idAnsw: 49, 
        idQuest: 13, 
        textAnsw: "черный, белый и красный", 
        isTrue: false 
    }, 
    { 
        idAnsw: 50, 
        idQuest: 13, 
        textAnsw: "черный, синий и белый", 
        isTrue: false 
    }, 
    { 
        idAnsw: 51, 
        idQuest: 13, 
        textAnsw: "красный, синий и зеленый", 
        isTrue: true 
    }, 
    { 
        idAnsw: 52, 
        idQuest: 13, 
        textAnsw: "белый, синий и красный", 
        isTrue: false 
    }, 
    { 
        idAnsw: 53, 
        idQuest: 14, 
        textAnsw: "инструмент государственной технической политики, деятельность по установлению правил и характеристик в целях их добровольного многократного использования, направленная на достижение упорядоченности в сферах производства и обращения продукции", 
        isTrue: true 
    }, 
    { 
        idAnsw: 54, 
        idQuest: 14, 
        textAnsw: "виды нормативно-технических документов в Российской Федерации", 
        isTrue: false 
    }, 
    { 
        idAnsw: 55, 
        idQuest: 14, 
        textAnsw: "стандарт, утвержденный национальным органом РФ по стандартизации", 
        isTrue: false 
    }, 
    { 
        idAnsw: 56, 
        idQuest: 14, 
        textAnsw: "стандарт, принятый международной организацией", 
        isTrue: false 
    }, 
    { 
        idAnsw: 57, 
        idQuest: 15, 
        textAnsw: "формы информации", 
        isTrue: true 
    }, 
    { 
        idAnsw: 58, 
        idQuest: 15, 
        textAnsw: "виды информации", 
        isTrue: false 
    }, 
    { 
        idAnsw: 59, 
        idQuest: 15, 
        textAnsw: "способы обработки информации", 
        isTrue: false 
    }, 
    { 
        idAnsw: 60, 
        idQuest: 15, 
        textAnsw: "информационные процессы", 
        isTrue: false 
    }, 
    { 
        idAnsw: 61, 
        idQuest: 16, 
        textAnsw: "сеть – клиент", 
        isTrue: false 
    }, 
    { 
        idAnsw: 62, 
        idQuest: 16, 
        textAnsw: "сеть - сервер", 
        isTrue: false 
    }, 
    { 
        idAnsw: 63, 
        idQuest: 16, 
        textAnsw: "сеть клиент - сервер", 
        isTrue: true 
    }, 
    { 
        idAnsw: 64, 
        idQuest: 16, 
        textAnsw: "серверная сеть", 
        isTrue: false 
    }, 
    { 
        idAnsw: 65, 
        idQuest: 17, 
        textAnsw: "принтер", 
        isTrue: true 
    }, 
    { 
        idAnsw: 66, 
        idQuest: 17, 
        textAnsw: "сканер", 
        isTrue: false 
    }, 
    { 
        idAnsw: 67, 
        idQuest: 17, 
        textAnsw: "копир", 
        isTrue: false 
    }, 
    { 
        idAnsw: 68, 
        idQuest: 17, 
        textAnsw: "ксерокс", 
        isTrue: false 
    }, 
    { 
        idAnsw: 69, 
        idQuest: 18, 
        textAnsw: "только сообщения и файлы", 
        isTrue: false 
    }, 
    { 
        idAnsw: 70, 
        idQuest: 18, 
        textAnsw: "только файлы и гипертекст", 
        isTrue: false 
    }, 
    { 
        idAnsw: 71, 
        idQuest: 18, 
        textAnsw: "только гипертекст и сообщения", 
        isTrue: false 
    }, 
    { 
        idAnsw: 72, 
        idQuest: 18, 
        textAnsw: "сообщения и приложенные файлы", 
        isTrue: true 
    }, 
    { 
        idAnsw: 73, 
        idQuest: 19, 
        textAnsw: "электронная почта", 
        isTrue: true 
    }, 
    { 
        idAnsw: 74, 
        idQuest: 19, 
        textAnsw: "спам", 
        isTrue: false 
    }, 
    { 
        idAnsw: 75, 
        idQuest: 19, 
        textAnsw: "рассылка сообщений", 
        isTrue: false 
    }, 
    { 
        idAnsw: 76, 
        idQuest: 19, 
        textAnsw: "пересылка сообщений", 
        isTrue: false 
    }, 
    { 
        idAnsw: 77, 
        idQuest: 20, 
        textAnsw: "часть оперативной памяти на сервере", 
        isTrue: false 
    }, 
    { 
        idAnsw: 78, 
        idQuest: 20, 
        textAnsw: "часть внешней памяти на сервере", 
        isTrue: false 
    }, 
    { 
        idAnsw: 79, 
        idQuest: 20, 
        textAnsw: "часть оперативной памяти на рабочей станции", 
        isTrue: true 
    }, 
    { 
        idAnsw: 80, 
        idQuest: 20, 
        textAnsw: "часть внешней памяти на рабочей станции", 
        isTrue: false 
    }, 
 
] 
var NewArray = []; 
function ResetTest() { 
    document.body.innerHTML = " "; 
    document.write('<div id="MustBeHidden">Введите количество вопросов n(будет n случайных вопросов) <input type =number min=2 max=20 name="number" id="number"><input type=button value=Сгенерировать onClick="randomTest()" ></div>'); 
    document.write('</form>'); 
 
} 
function randomTest() { 
    document.getElementById('MustBeHidden').style.display = "none"; 
    var n = document.getElementById('number').value; 
    document.write("<h1>Тест </h1>"); 
    document.write("<form>"); 
 
    for (var i = 0; i < n; i++) { 
        var prove = 1; 
        while (prove > 0) { 
            prove = 0; 
            var m = +Math.floor(Math.random() * 20); 
            for (var k = 0; k <= NewArray.length; k++) 
                if (m == NewArray[k]) prove++; 
        } 
        NewArray.push(m); 
        document.write('<div class="quest" id = q' + questions[m].idQuest + ' > ' + (i + 1) + '. ' + questions[m].textQuest + "</div><div><ul>"); 
        for (var j = 0; j < answers.length; j++) { 
            if (answers[j].idQuest != questions[m].idQuest) continue; 
            document.write('<li><input type =radio name=ansQ' + questions[i].idQuest + ' value=a' + questions[m].idQuest + '_' + answers[j].idAnsw + ' onClick="ChangeQuestionsColor()">' + answers[j].textAnsw + '</li>'); 
        } 
        document.write('</ul></div>'); 
 
 
    } 
 
    document.write('<input type = button value="Проверить тест" ' + 
        'onClick = "checkTest()">'); 
    document.write('<input type = button value="Новый тест"' + 'onClick = "ResetTest()">'); 
    document.write('</form>'); 
 
    var EllementsOnPage = document.getElementsByClassName('quest'); 
    for (var i = 0; i < EllementsOnPage.length; i++) { 
        EllementsOnPage[i].style.border = '5px outset green'; 
        EllementsOnPage[i].style.backgroundColor = 'green'; 
        EllementsOnPage[i].style.color = 'white'; 
    } 
    return NewArray; 
 
} 
function checkTest() { 
    // формируем массив из всех элементов input на странице 
    var arrAnswers = document.getElementsByTagName("input"); 
    //переменная для подсчета правильных ответов 
    var countCorrectAnswers = 0; 
    // строка для накопления вопросов, на которые пользователь 
    // ответил неверно 
    var strUnCorrectAnswers = ''; 
    //количество вопросов, на которые пользователь дал ответ 
    var questionChecked = 0; 
    var ForCheckingAnswers = document.getElementsByClassName('quest'); 
    for (var i = 0; i < arrAnswers.length; i++) { 
        if (arrAnswers[i].checked) { 
            questionChecked++; 
            //проверяем правильность ответа, если ответ верный, 
            //то увеличиваем количество верных ответов 
            //в противном случае - заносим вопрос в строку неправильных 
            if (isRightAnswer(arrAnswers[i].value)) countCorrectAnswers++; 
            else strUnCorrectAnswers += getQuestion(arrAnswers[i].value) 
                + "\n"; 
        } 
 
    } 
    // проверяем, на все ли вопросы ответил пользователь, 
    // если на все вопросы есть ответы - выводим результат 
    if (questionChecked != questions.length) { 
 
        for (i = 0; i < ForCheckingAnswers.length; i++) { 
            ForCheckingAnswers[i].style.backgroundColor = 'red'; 
        } 
 
 
    } 
 
    else if (countCorrectAnswers == questions.length) 
        alert('Вы ответили правильно на все вопросы верно!') 
    else alert("Количество правильных ответов: " + 
        countCorrectAnswers + 
        "\nВы ответили неверно на следующие вопросы:\n" + 
        strUnCorrectAnswers); 
} 
function ChangeQuestionsColor() { 
    var n = document.getElementById('number').value; 
    var arrAnswers = document.getElementsByTagName("input"); 
    for (var i = 0; i < n; i++) { 
        var CheckedQuestion = false; 
        for (var j = 0; j < 4; j++) 
            if (arrAnswers[j + i * 4].checked) CheckedQuestion = true; 
        if (CheckedQuestion == true) document.getElementById('q' + questions[NewArray[i]].idQuest).style.backgroundColor = "green"; 
    } 
} 
/* функция выдает верный или неверный вариант ответа выбрал 
пользователь на некоторый вопрос, переданный параметр - значение типа 
a_2_5, где 2 - номер вопроса, 5 - номер ответа*/ 
function isRightAnswer(str) { 
    //выделяем номер вопроса 
    var idUserQuest = str.substring(1, str.indexOf('_')); 
    //выделяем номер ответа 
    var idUserAnsw = str.substring(str.indexOf('_') + 1) 
    // ищем в массиве ответов вариант, выбранный пользователем, 
    // и возвращаем результат, правильный он или нет 
    for (var i = 0; i < answers.length; i++) { 
        if (answers[i].idQuest != idUserQuest) continue; 
        if (answers[i].idAnsw != idUserAnsw) continue; 
        return answers[i].isTrue; 
    } 
    return false; 
} 
// формируем текст вопроса, 
//переданный параметр - значение типа a_2_5, где 2 - номер вопроса 
function getQuestion(str) { 
    //выделяем номер вопроса 
    var idUserQuest = str.substring(1, str.indexOf('_')); 
    //ищем в массиве текст нужного вопроса 
    for (var i = 0; i < questions.length; i++) { 
        if (questions[i].idQuest != idUserQuest) continue; 
        return questions[i].textQuest; 
    } 
    return false; 
}
ul { 
  list-style-type: circle; 
} 
.quest { 
  background-color: green; 
} 
.quest { 
  font-size: 50px; 
}
<html> 
  <head> 
    <meta charset="utf-8" /> 
    <!-- <style> 
      body { 
        font-size: 100px; 
      } 
      ul { 
        list-style-type: circle; 
      } 
      .quest { 
        background-color: green; 
      } 
      .quest { 
        font-size: 50px; 
      } 
    </style> --> 
  </head> 
  <body onload="ResetTest()" style="font-size:100px"> 
    <script type="text/javascript" src="program.js"></script> 
  </body> 
</html>

Answer 1

Это происходит из-за того, что выполнение document.write у вас прописано при загрузке, что переписывает всю страницу, и head, в котором были все подключения. Вы сразу при загрузке страницы пытаетесь писать html код в js. Можно сделать проще и правильнее: через document.createElement он не будет влиять на подключения, а уже в созданный таким образом элемент дописывать через inner. Вот пример:

var div = document.createElement('div');
  div.className = "first";
  //div.innerHTML = "";
var ul = document.createElement('ul');
for(var i=0; i<5; i++){
var li = document.createElement('li');
li.className = "second";
li.innerHTML = "Text "+i;
ul.appendChild(li);
}
div.appendChild(ul);
var bod = document.getElementById('bod');//Добавить id=bod в body
bod.appendChild(div);

Ну, и соответственно его надо писать после body:

<body id="bod" style="font-size:12px">
</body>
READ ALSO
Смена фото на карточке товара при ховере [закрыт]

Смена фото на карточке товара при ховере [закрыт]

Хотите улучшить этот вопрос? Переформулируйте вопрос так, чтобы он был сосредоточен только на одной проблеме

98
Почему возвращает [object Object]?

Почему возвращает [object Object]?

Ситуация, казалось, простая, но я окончательно запуталсяСуть в том, что надо каждому элементу добавить id значение которого = атрибуту value

76