Почему javascript не заменяет innerHTML на проверку разрешения экрана?

Я пытаюсь сделать мой сайт проверять разрешение экрана и заменить установленные значки шрифтов (используя @webfont) с помощью текстовых ссылок, чтобы сайт был более мобильным. Я использую Opera Mobile Emulator, чтобы проверить, работает ли он. пользовательский интерфейс, который я использую, явно возвращается с разрешением 480x320 (в самом верхнем левом углу страницы), но javascript .innerHTML не отключается. Любая помощь?Почему javascript не заменяет innerHTML на проверку разрешения экрана?

<!DOCTYPE html> 
<html> 

<head> 

<title>Harry's Bar</title> 

    <meta name="keywords" content="Harry's, bar, st. petersburg, florida, kenneth city, drink specials" /> 

    <meta name="description" content="Harry's Bar in St. Petersburg, Florida. Drink specials every night!" /> 

    <meta name="author" content="Internet Solutions of Florida" /> 

    <link rel="stylesheet" type="text/css" href="styles.css" /> 
</head> 

<body> 
<script type="text/javascript"> 
var width=screen.width; 
var height=screen.height; 
document.write(width+'x'+height); 
if (width<700) 
    {document.getElementById("homelink").innerHTML="Home";} 

</script> 

<div class="frame"> 
<div class="header"> 
<img class="logo" src="img/logo.png" alt="Harry's Bar" /> 
    <div class="menu"> 
     <ul> 
     <li><a id="homelink" href="index.html" title="home">&#xf015</a></li> 
     <li><a id="drinklink" href="drinks.html" title="drink menu">&#xf0fc</a></li> 
     <li><a id="piclink" href="images.html" title="picture gallery">&#xf030</a></li> 
     <li><a id="directionslink" href="directions.html" title="directions">&#xf0d1</a></li> 
     <li><a id="contactlink" href="contact.html" title="contact us">&#xf075</a></li> 
     </ul> 
    </div> 
</div>

источник

2013-11-02 Turlough

Этот javascript выполняет перед загрузкой HTML. Таким образом, при запуске javascript нет элемента с идентификатором «homelink».

Кроме того, используя document.write, вы фактически перезаписываете свой оригинальный HTML-код, поэтому тег никогда не будет загружаться.

Избавьтесь от вызова document.write и поместите сценарий непосредственно перед тегом закрывающего тега, и он должен работать по назначению.

источник

2013-11-02 21:05:16 zungaphobia

Aha. Я только начал с js около недели назад, так что Im все еще нечеткое о размещении и иерархии. Очень признателен! – Turlough

document.write() не требуется. Если вы хотите, чтобы диагностировать, вы можете использовать document.title или создать DIV и divid.innerHTML
Убедитесь, что тестирование на < 700 области
Добавить готовый огонь DOM.
Место это в конце

Вещи должны работать тогда :)

источник

2013-11-02 21:21:38

Почему javascript не заменяет innerHTML на проверку разрешения экрана?

ответ

Смежные вопросы