непонятное поведение

[bpystep]

почему вот такая конструкция, срабатывает только после 2 нажатия, после 1 ничего не происходит, а после 2-ого и все последующие разы работает как часы.

function viewInfo() { //выводит блок информации
	var div = document.getElementById('info');
	if (div.style.display == 'none') div.style.display = 'block';
	else div.style.display = 'none';
}

<input type="submit" class="topSubmit" value="инфо" onClick="viewInfo()">
<div class="info" id="info">
	<p onClick="closeInfo()"><img src="close.png"></p>
</div>

[Octane]

<div id="info">…</div>
<script>
alert(document.getElementById("info").style.display);
</script>

В style хранятся стили из соответствующего атрибута. Вычисленные стили получают следующим образом:

var computedStyle = div.currentStyle || getComputedStyle(div, null);

[bes]

bpystep, разве так трудно привести пример по сути проблемы?
Тот код который вы привели работает.
Как я полагаю, class="info" делает невидимым ваш div (этого описания вы как раз и не привели), а в том коде который вы привели div отображается.
Как правильно направил вас Octane, если что-то не получается, нужно тестировать (правда, не всегда бывает очевидно как это делать), с тестом или без можно понять, почему приведённый вами код работает.

А теперь по сути проблемы.
Насколько я понимаю, проблема здесь заключается в том, что задание свойства display в тегах <style></style> не приводит к установке свойства div.style.display, хотя отображение корректное (почему так происходит сам хотел бы узнать), собственно установка этого свойства происходит после первого клика, поэтому дальше всё "работает как часы".
Вариантом решения данной ситуации является задание этого свойства в атрибуте style самого элемента, либо явная его установка в каком либо месте кода.

<script>
function viewInfo() {
  var div = document.getElementById('info');
  if (div.style.display == 'none') 
    div.style.display = 'block';
  else 
    div.style.display = 'none';
}
</script>

<button onclick="viewInfo()">info</button>
<div id="info" style="display: none; background: grey">info</div>

[dmitriymar]

Насколько я понимаю, проблема здесь заключается в том, что задание свойства display в тегах <style></style> не приводит к установке свойства div.style.display, хотя отображение корректное (почему так происходит сам хотел бы узнать), собственно установка этого свойства происходит после первого клика, поэтому дальше всё "работает как часы".

В style хранятся стили из соответствующего атрибута. Вычисленные стили получают следующим образом:
var computedStyle = div.currentStyle || getComputedStyle(div, null);

ответ уже был дан,чего ещё узнавать?
а чтоб работало изначально,без вычисления внешних стилей условие достаточно поменять

if (div.style.display == 'block') 
    div.style.display = 'none';
  else 
    div.style.display = 'block';

[bes]

ответ уже был дан,чего ещё узнавать?

Лично мне, например, не до конца понятны эти фразы и поэтому считаю, что они требуют расшифровки.
Но пост вашей не очевидной для меня очевидности натолкнул на поиск: вот неплохая статья по этой теме http://javascript.ru/blog/Andrej-Par...cheniya-stilya

[dmitriymar]

Но пост вашей не очевидной для меня очевидности натолкнул на поиск: в

а логика простого ветвления не понятна,почему ещё раз скрывает ?

[bes]

а логика простого ветвления не понятна,почему ещё раз скрывает ?

Вопрос-то был в том, почему при первом клике не отображает, хотя в стилях (заданных не в атрибуте style), указано display: none, а функция проверяет display == 'none', а не отображал он как раз потому, что стили, заданные в тегах <style></style>, как оказалось, не задают свойство style (а стили, заданные в атрибуте style, его как раз задают).
Вообще, на мой взгляд, момент далеко не очевидный, и, как я думаю, большинство новичков (как и я до этой темы) не знают этой особенности (а лучше, чтобы её и не было), хотя, казалось бы, задал стилевые свойства в тегах <style></style>, а потом читай и записывай свойство style, ан нет.

[bpystep]

спасибо за разжеванный ответ.
вот код который недоложил:

.info {
	display: none;
	width:250px;
	height:120px;
	background-color: #808080;
	border: 2px solid #ff0000;
	border-radius: 10px;
	position:fixed;
	margin-top: 100px;
	margin-left: 220px;
	z-index: 1000;
	padding: 10px;
}