Почему так происходит?

Question

SheikhRamil @ramil_bayramov

Your Personal Sheikh

HTML
CSS

Почему так происходит?

Такая ситуация, написал программу которая при ножатии кнопки всплывает промпт, пишешь что нибудь и через document.write() показывает текст на странице

хотелось бы узнать почему когда document.write высвечивает текст, все содержимое кроме текста изчезает?

Вопрос задан более трёх лет назад
61 просмотр

2 комментария

Подписаться 1 Простой 2 комментария

Пригласить эксперта

Ответы на вопрос 3

1 комментарий

SheikhRamil @ramil_bayramov Автор вопроса

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="flexbox.css">
</head>
<body>
    <div class="all">
        <div class="div div1" onClick="alert('How');">1</div>
        <div class="div div2" onClick="moody();">2</div>
        <div class="div div3" onClick="alert('are');">3</div>
        <div class="div div4" onClick="alert('you?');">4</div>
    </div>
    <button onclick="docWr();">Click</button>
    <script>
        function res2() {
            var ask;
            while (ask !== 4) {
                ask = prompt("2 + 2", "5");
                ask = Number(ask);
                if (ask === 4) {
                    alert("Correct");
                    break;
                }
                else if (ask !== 4) {
                    alert("Does not correct");                    
                }
            }
        }

        function moody() {
            var mood = prompt("Answer with 1 word", "fine").toLowerCase();
            var firstChar = mood.indexOf("");
            if (firstChar !== -1) {
                mood = "Your mood is " + mood.slice(firstChar);
                alert(mood);
            }
        }

        function docWr() {
            var writeDown = prompt("Write something", "i'm good in fortnite");
            document.write(writeDown);
        }
    </script>
</body>
</html>

.all {
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
}
.div {
    color: wheat;
    font-family: sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100px;
    height: 60px;
}
.div1 {
    background-color: red;
    flex-grow: 4;
}
.all > div {
    cursor: pointer;
    transition: .6s;
}
.all > div:hover {
    box-shadow: 0px 0px 5px 4px grey;
    margin: 0px 5px;
}
.div2 {
    background-color: yellow;
    color: blue;
    flex-grow: 3;
    cursor: pointer;
    transition: .6s;
}
.div2:hover {
    box-shadow: 0px 0px 5px 4px grey;
    margin: 0px 5px;
}
.div3 {
    background-color: blue;
    flex-grow: 2;
}
.div4 {
    background-color: green;
    flex-grow: 5;

}

Написано более трёх лет назад

Комментировать

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы

JavaScript

+2 ещё

Простой
Как подключить 3D персонажа в three.js?
- 1 подписчик
- 36 минут назад
- 10 просмотров
0

ответов
HTML

+1 ещё

Простой
Как сделать блок такой же формы?
- 1 подписчик
- час назад
- 53 просмотра
0

ответов
HTML

+1 ещё

Простой
Как лучше сверстать элемент?
- 1 подписчик
- 10 часов назад
- 70 просмотров
1

ответ
JavaScript

+2 ещё

Простой
Как сделать плавное появление скрытых под display: none; карточек по клику на кнопку, при подключеной AOS?
- 1 подписчик
- 20 часов назад
- 101 просмотр
1

ответ
CSS

Простой
Как с помощью CSS при наведении курсора менять цвет рамки сразу у нескольких карточек?
- 1 подписчик
- вчера
- 76 просмотров
0

ответов
CSS

Простой
Как заменить плавно логотипы?
- 1 подписчик
- вчера
- 66 просмотров
1

ответ
HTML

Простой
Какая альтернатива AVIFS поддерживается в iOS?
- 1 подписчик
- 20 дек.
- 32 просмотра
1

ответ
CSS

Средний
Как сделать сквозную нумерацию неупорядоченных списков?
- 1 подписчик
- 20 дек.
- 69 просмотров
1

ответ
JavaScript

+2 ещё

Простой
Как исправить вёрстку, чтобы блок с изображением не уезжал из-за блока с описанием?
- 1 подписчик
- 19 дек.
- 106 просмотров
0

ответов
JavaScript

+1 ещё

Простой
Как загрузить img в первой очереди при загрузке страницы?
- 1 подписчик
- 19 дек.
- 95 просмотров
1

ответ
Показать ещё Загружается…

Fullstack Developer под Wordpress

Future Search

от 90 000 до 150 000 ₽

JavaScript FullStack разработчик

Rocket • Смоленск

от 80 000 до 130 000 ₽

CRM Bitrix24 разработчик

World Vision Clinic • Москва

от 170 000 ₽

Необходимо провести ревизию и внести правки в софт для Solana

23 дек. 2024, в 11:27

2000 руб./в час

Менеджер в телеграм

23 дек. 2024, в 11:27

100000 руб./за проект

Доработка сайта на Vue и node

23 дек. 2024, в 11:07

10000 руб./за проект

Потому что document открывается для записи и записывает новые данные вместо старых. Погуглите в сторону innerHTML и DOM-дерева.
Дык вы всё затираете, когда пишите document.write

Answer 1 · 2020-09-10 16:48:33

Лучше бы привели полный пример кода. Судя по тому, что сейчас указали, вы просто используете document.write() и тем самым перезаписываете всю вёрстку на странице

Answer 2 · 2020-09-10 16:54:34

потому что document - это объект верхнего порядка в иерархии DOMмодели, если установить ему св-во .write(), то вся цепочка иерархии объектов страницы меняет порядок вложенности и получается что-то в роде

<html document>
  <body>
        text from document.write
  </body>
</html document>

Answer 3 · 2020-09-10 16:57:54

Steppp @Steppp

пробуй

div.textContent = ``
div.innerHtml = ``

Ответ написан более трёх лет назад

Комментировать

Почему так происходит?

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт