AlexZaw

Это потому, что инпуты у вас находятся в теге form, а кнопка имеет тип submit. Это означает что при нажатии на такую кнопку форма пытается отправится на сервер и браузер заменяет страницу на ту, адрес которой указан в атрибуте action в теге form. Ну а раз там ничего не указано, то браузер просто перезагружает вашу страницу. Тут я в логике поведения браузера могу ошибаться, так как не вдавался в подробности работы этого механизма, но в любом случае при отправке формы вы видите перед собой уже не ту страницу на которой нажимали кнопку. Чтобы этого избежать напишите вот так: <input type="submit" onClick="fanta();return false" value="Жми"> или поменяйте тип инпута с submit на button потому что такой код вызывает ошибку. getElementById это метод объекта Document , а вы пытаетесь использовать его с переменной у которого его нет. поэтому ничего не происходит. И даже если бы такой код не вызывал ошибку, то, в любом случае, вы бы не получили нужный результат, так как он означал бы следующее - в элементе с id result получи элемент с id result и замени ему innerHTML. p.s. И сразу ответ на возможный вопрос. Что-бы при каждом новом вводе числа и нажатии на кнопку данные обновлялись, а не добавлялись, в начале функции (до цикла) вставьте вот это: result.innerHTML = "";

Слабое утешение как по мне 🙂 В любом случае для своих проектов каждый использует то что ему нравится, а в компаниях где есть стандарты написания кода придется использовать то, что прописано в стандартах, нравится это или нет 🙂

Не вижу преимуществ SMACSS перед BEM. Как впрочем и наоборот. Просто разные подходы в написании классов.

Чтобы пошагово видеть как проходится цикл, вам нужно выбрать его и расставить брейкпоинты в нем. Как то так: после чего нажимать F9 в хроме или F10 в лисе

ммм, расписывать все это долго и длинно, а коротко будет непонятно. Почитайте вот здесь https://learn.javascript.ru/debugging-chrome там все подробно описано

ну я как-то, для какой-то задачи (уже и не вспомню для какой именно) использовал три цикла. Т.е. вот так for(){ for(){ for(){} } } но, скорее всего эту задачу можно было решить и по другому. Если использовать большее количество, то, вероятно, что-то делается не так 🙂

denis_alekss, все ваши рассуждения верно, но ваш код не выводит цифру 9, он, как и положено выводит 2, 3, 5, 7

Смотрите, когда начинается цикл for, происходит следующее: при входе в цикл первая часть for (в данном примере let j = 2;)всегда отрабатывает только один раз и неважно сколько будет работать цикл. Затем при каждой итерации проверяется условие j < i ,если оно выполняется, то отрабатывает тело цикла, после того как отработало тело срабатывает j++ и, с проверки условия j < i, начинается новая итерация . Просто при первом заходе во внутренний цикл когда i=2 и j=2 проверка j < i возвращает false и цикл заканчивает работу. Потому, что j было равно 3 при прошлом запуске цикла, а при каждом новом запуске (не итерации, а именно запуске), т.е. после того как цикл завершил свою работу каким либо способом и вы вызываете его еще раз, опять отрабатывает первая часть let j=2; Нет, цикл работает до тех пор, пока условие в for (в данном случае j < i;) будет возвращать true. И не важно что там происходит в теле цикла (ну кроме случаев когда цикл прерывается принудительно) Верно, если срабатывает continue, то цикл пропускает весь оставшийся код в теле, выполняет третью часть в for (в данном случае i++) и начинает следующую итерацию. просто innerHTML тоже перезаписывает содержимое элемента. Сделайте вот так например: result.innerHTML += i+'<br>'; И поменяйте submit на button иначе у вас будет пытаться отправиться форма, ну или сделайте вот так: <input type="submit" value="Жми" onClick="fanta(); return false;">

При первой итерации i=2, а не 3. Так как i++ срабатывает после того как отработало тело цикла . Соответственно при i=2 условие j < i не срабатывает так как 2 не может быть меньше 2, внутренний цикл не запускается, срабатывает document.write(i+"<br>"); и в документ выводится 2 После этого срабатывает i++ и i становится равной 3. Начинается вторая итерация. Во внутреннем цикле проверяется j < i , условие срабатывает так как 2 меньше трех и мы попадаем в тело внутреннего цикла где проверяется условие i%j == 0 Здесь мы получаем false, возвращаемся в for( let j = 2; j < i; j++) где срабатывает j++ , j становится равным 3 (i как мы помним тоже равно 3), проверяется условие j < i и заканчивается работа внутреннего цикла ведь 3 не меньше 3, срабатывает document.write(i+"<br>"); и в документ выводится 3. Срабатывает i++ и i становиться равным 4, запускается внутренний цикл где проверяется j<i , условие срабатывает так как 2 меньше 4 и мы попадаем в if где условие i%j == 0 возвращает true и срабатывает continue. Опять i++, i становиться равным 5, срабатывает условие во внутреннем for, 2 < 5, попадаем в if, 5 на 2 без остатка не делиться, continue не срабатывает, попадаем во внутренний for, j++ и равно 3, 3 < 5, выполняем тело цикла, условие в if возвращает false, (5 на 3 без остатка не делится), опять возвращаемся во внутренний for, j++ и равно 4, 4 < 5, идем в if который возвращает false. Опять внутренний for, j++ и равно 5, условие во внутреннем for не срабатывает (5 не меньше 5), выходим их внутреннего цикла, выполняется document.write(i+"<br>") и в документ выводится i которое равно 5. Ну и так далее. Про работу разных циклов можете почитать вот здесь: https://learn.javascript.ru/while-for а также поставить брейкпоинты в инспекторе и посмотреть пошагово как работает код. И да, не используйте document.write так как при полностью загруженном документе он переписывает документ полностью и ваш код отработает только один раз. Т.е. ваша запущенная функция отработает как положено, выведет все что положено, но после окончания работы вы не сможете запустить ее еще раз, так как у вас не будет ни самой функции, ни поля для ввода, ни кнопки.

Правильно.

Пропущена буква в стилях th - text-align: centr Уберите text-indent: 400px; в стилях table, а то вы выравниваете по центру и тут же смещаете на 400px

Использовать картинку с разрешением в 4 раза больше. Ну или, если есть возможность, сделать svg картинку

IE поддерживает единицы измерения vh и vw только с 9 версии. Так что если нужна поддержка более ранних версий то можно с помощью js определять высоту экрана и задавать такую же высоту картинке

задайте для картинки стили display: block; margin: 0 auto; height: 100vh;

как вариант: (вставка кода что то не работает, поэтому как текст) body{ margin: 0; } body:before{ position: absolute; content: ''; width: 100%; height: 10px; background: #f00; top: 50%; transform: translateY(-50%); }

РоманФ судя по скругленным окончанием кривой, она сделана с помощью svg. Сделал грубый пример без свг, но принцип остального, думаю, будет понятен: <div class="wrap"> <div class="box"> <div class="line1"> <div class="item"><span></span></div> <div class="item"><span></span></div> <div class="item"><span></span></div> </div> <div class="line2"> <div class="item"><span></span></div> <div class="item"><span></span></div> </div> </div> </div> *, :after, :before { box-sizing: border-box; } .wrap { display: flex; justify-content: center; width: 500px; border: 1px solid #000; overflow: hidden; } .box { display: inline-block; position: relative; } .box:before { content: ""; height: 130px; width: 130px; position: absolute; left: -100px; top: 42%; border-radius: 50%; border: 5px solid transparent; border-top: 5px solid #ccc; } .box:after { content: ""; height: 130px; width: 130px; position: absolute; right: -100px; top: 42%; border-radius: 50%; border: 5px solid transparent; border-top: 5px solid #ccc; } .line2 { margin-top: 100px; margin-left: 77px; } .item { width: 100px; height: 100px; border: 1px solid #000; display: inline-block; position: relative; background: #f00; } .item:not(:last-child) { margin-right: 50px; } span { background: inherit; } .line1 .item:after { content: ""; height: 130%; width: 130%; position: absolute; left: -15%; top: 40%; border-radius: 50%; border: 5px solid transparent; border-bottom: 5px solid #ccc; } .line2 .item:after { content: ""; width: 130%; height: 130%; position: absolute; left: -15%; top: -70%; border-radius: 50%; border: 5px solid transparent; border-top: 5px solid #ccc; } .line1 .item:before { content: ""; height: 20px; width: 20px; background: #000; border-radius: 50%; position: absolute; left: 50%; top: 156%; z-index: 1; transform: translateX(-50%); } .line2 .item:before { content: ""; height: 20px; width: 20px; background: #000; border-radius: 50%; position: absolute; left: 50%; top: -78%; z-index: 1; transform: translateX(-50%); } .line1 span:before { content: ""; height: 50px; border-left: 1px dotted #000; position: absolute; left: 50%; top: 120%; transform: translateX(-50%); } .line1 span:after { content: ""; width: 25px; height: 25px; background: inherit; border: 1px solid #00f; position: absolute; left: 50%; top: 100%; transform: translate(-50%, -50%) rotate(36deg) skewY(20deg); z-index: -1; } .line2 span:before { content: ""; height: 50px; border-left: 1px dotted #000; position: absolute; left: 50%; top: -70%; transform: translateX(-50%); } .line2 span:after { content: ""; width: 25px; height: 25px; background: inherit; border: 1px solid #00f; position: absolute; left: 50%; top: 0; transform: translate(-50%, -50%) rotate(36deg) skewY(20deg); z-index: -1; }

Sharmat, У вас не закрыты теги. А именно: <A HREF="http:ru.wikipedia.org/wiki/HTML" TARGET="_blank">вся статья<A> и тег таблицы. Также приведите к одному виду все ваши наименования ID. А то у вас в HTML они написаны маленькими буквами, а в CSS большими. Названия классов и id - регистрозависимы.

по идее может спасти pointer-events:none; правда придется для всяческих input-ов и т.п. прописывать поведение курсора при наведении

как это стыкуется между собой? 🙂

Вообще-то можно, если убрать z-index у родителя. Но тогда возникнет другая проблема - будет видно правую тень у родителя и ее придется перекрывать вторым псевдоэлментом. Как-то так: <div class="box"></div> .box{ height: 50px; width: 200px; box-shadow: 0 0 10px #000; position: relative; background: #f00; border-radius: 5px; } .box:after, .box:before{ display: block; content: ''; height: 37px; width: 36px; position: absolute; left: calc(100% - 20px); top: 50%; transform: translateY(-50%) scaleX(.5) rotate(45deg); background: #f00; border-radius: 5px; } .box:after{ box-shadow: 0 0 10px #000; z-index: -1; } Можно воспользоваться способом выше, а можно, если совместимость не сильно важна, воспользоваться свойствами clip-path и filter: drop-shadow

Не может. Все это легко делается с помощью html+css

Код не смотрел, но вам нужно либо прописать тег viewport, либо познакомиться с медиа запросами

Нужно просто знать как работают отрицательные маржины 🙂 У меня решение заняло чуть больше времени. Но я искал решение без использования дополнительного div. Единственный минус - не работает в IE6, но ведь в условии про него ничего и не сказано, верно? 🙂 Если бы до меня это сразу дошло, решил бы быстрее, а так где -то минут за 40 управился. Причем я не сказал бы что я хорошо разбираюсь в верстке 🙂 .columns { width: 100%; overflow: hidden; } .sidebar-left { width: 300px; float: left; } .sidebar-right { width: 300px; float: right; } .content{ width: 100%; float: left; box-sizing: border-box; padding-left: 300px; padding-right: 300px; margin-right: -100%; }

Так расположите картинку внутри слова. Логично же. Наглядно в архиве: index.rar

С гаданиями по фотографии это не сюда, а к гадалке. Всегда пожалуйста.