Добрый день!
На компьютере (windows) в браузере работает всё, на Айфоне не работает с 37-й строки - отображение элемента guessitem (как будто display: block здесь не срабатывает, хотя для элемента itemimg всё работает исправно).
Чем это можно объяснить и как исправить?
Спасибо
Вот скрипт:
[JS]
solved
[/JS]
Добрый день.
АПИ (возможность устанавливать стили через скрипт, оперировать элементами страницы) не всегда одинаково работают во всех браузерах. Существуют так называемые “non-crossbrowser-api” такие апи которые работают только в некоторых браузерах.
Проверить то какие апи в каких браузерах работают можно на сайте https://caniuse.com. Иронично что как раз для свойства .cssText описание на caniuse недостаточно информативное чтобы понять причину проблемы. Но чаще всего с другими АПИ информация актуальна и понятна.
Чем это можно объяснить
Со строки 37 используется .cssText свойство которое я подозреваю и является определяющим проблему.
Вот второе место где можно понять лучше про доступность и конкретику работы АПИ. CSSRule: cssText property - Web APIs | MDN
перевод ниже
Be aware that this property can no longer be set directly, as it is now specified to be functionally modify-only, and silently so. In other words, attempting to set it does absolutely nothing, and doesn’t even omit a warning or error. Furthermore, it has no settable sub-properties. Therefore, to modify it, use the stylesheet’s cssRules[index] properties .selectorText and .style (or its sub-properties). See Using dynamic styling information for details.
Будьте внимательны, что данное свойство больше нельзя устанавливать напрямую, так как оно теперь определено как функционально модифицируемое и молча. Другими словами, попытка установить его не делает ничего, и даже не выводит предупреждение или ошибку. Кроме того, у него отсутствуют устанавливаемые под-свойства. Поэтому, для его модификации используйте свойства .selectorText и .style (или его под-свойства) cssRules[index] стиля страницы. См. Использование динамической информации о стилях для получения дополнительной информации.
и как исправить?
Нужно заменить все места где ты записываешь в .cssText значение на вызов другого АПИ. Например вместо guessitem.style.cssText = 'display: block;' написать guessitem.style.display = 'block'.
Спасибо за развёрнутый ответ!!!
Заменил всё на рекомендуемое
В Сафари по-прежнему не работает)
Других идей, только читая код у меня нет.
Есть возможность дать ссылку на страницу? Я запущу в средствах разработчика и посмотрю на наличие ошибок, и в принципе поиграюсь с результатом.
$(arropen[1]) вычисляется в null.
Второй вопрос почему так происходит. Дело в том что айди элемента начинается с цифры. Это нестандартное значение которое может не поддерживаться одинаково браузерами. Понимаю, что для бекендщика это такие ограничения на айдишник это оксюморон, но тут на фронте своя атмосфера.
Technically, the value for an id attribute may contain any character, except whitespace characters. However, to avoid inadvertent errors, only ASCII letters, digits, ‘_’, and ‘-’ should be used, and the value for an id attribute should start with a letter.
Технически, значение атрибута id может содержать любой символ, кроме пробельных символов. Однако, чтобы избежать непреднамеренных ошибок, рекомендуется использовать только ASCII буквы, цифры, символы ‘_’, и ‘-’ в качестве значения для атрибута id, а также начинать значение id с буквы.
Честно говоря, был уверен, что ID всегда должно быть цифрой)))
Это мой первый в жизни код, ок, буду иметь в виду, спасибо!
Но, тем не менее: на компьютере код выполняется - значит, не это причина глюка в Сафари?
Кстати, хороший код как для первого в жизни.
Скорее всего на компьютере ты используешь хром. Хром задизайнили так чтобы он поддерживал всякие нестандартные апи и поведения. Цифровые айди не являются частью стандарта, и сафари, не поддерживающий цифровые айди ведет себя корректно. Исходя из этого я не считаю формулировку “глюк сафари” некорректной. Корректнее сказать что “хром более снисходителен к нестандартным апи”.
Понимаю, согласен
Какой вариант могу испробовать, если я завязан на числовое значение? dataset, например?
Есть 2 варианта. Второй более предпочтителен с перспективы идеологически выверенного использования DOM.
Вариант 1
Добавить префикс к цифровому айдишнику. Вместо <div id=1> писать <div id=item-1>. А когда надо достать цифровое значение, то парсить строку айдишника, извлекать число и не забыть превратить строковый тип данных в числовой.
Вариант 2
Использовать data-attributes.
<div
data-id=100500
>
Для поиска узла с этим дата-аттрибутом использовать querySelector вот так document.querySelector('[data-id="100500"]'). А доступ к значению айдишника получать через dataset свойство дом узла. Тоже не забыть сконвертировать строковое значение которое хранится в дата-аттрибуте в число.
Понял, спасибо!
Буду пробовать!
Сейчас заметил, что у меня в Сафари не обновляется код сайта, когда я его загружаю на хостинг и чищу данные в телефоне, т.е. он постоянно старую версию отыгрывает, какие бы изменения я не вносил)))
Это связано с кешированием. Веб сервер настроен так чтобы отдавать заголовки которые говорят клиенту кешировать данные (иными словами не ходить на сервер за новыми когда пользователь запрашивает страницу). Если у тебя нет возможности настроить правила кеширования сервера, то в самом браузере есть возможности убрать кеш или запросить страницу без кеширования. Как это сделать конкретно в твоем случае - тебе придется искать самостоятельно по ключевым словам которые я упомянул выше.
Еще вариант - каждый раз открывать и закрывать инкогнито окно
Похоже, какие-то проблемы у хостинга
Они не обновляют загружаемые документы
Я уже на всех уст-вах всё почистил…
Будем разбираться!)
Убрал все ошибки, обновил код на хостинге
Не работает!) (в Сафари) В Опера мобайл тоже не отображается элемент
Дело, похоже, вообще не в js
Я сделал по-умолчанию всегда видимыми эти объекты - на телефоне они всё-равно не отображаются
В общем, это фэйспалм.
Тег без содержимого, только с одним фоном, установленным в css, мобильный браузер не отображает.
Заменил его на div - всё заработало. Десять часов искал…
Это классическая ситуация для начинающих: множество ошибок, мешающих находить и решать другие ошибки. Со временем ты научишься изолировать ошибки, изолировать возможные причины, в принципе прикидывать какие причины могут приводить на наблюдаемому поведению.
При том ситуации когда что-то на самом деле мелкое мешало всему проекту и пришлось потратить не один час на поиск ошибки - такое будет происходить и через 10 лет работы и через 20. Просто такая природа человека что внимание выборочно, и неизбежно некоторые причины ошибок будут прятаться в “белом пятне” сознания.