it-swarm.com.ru

document.write очищает страницу

Почему в приведенном ниже коде при вызове document.write в функции validator() элементы формы (флажок и кнопка) удаляются с экрана?

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript">
            function validator() {
                if (document.myForm.thebox.checked)
                    document.write("checkBox is checked");
                else 
                    document.write("checkBox is NOT checked");
            }
        </script>
    </head>
    <body>
        <form name="myForm">
            <input type="checkbox" name ="thebox"/>
            <input type="button" onClick="validator()" name="validation" value="Press me for validation"/>
        </form>
    </body>
</html>
15
C graphics

document.write() используется для записи в документ stream .

В вашем случае поток, скорее всего, уже закрыт, когда вызывается обработчик onClick, потому что ваш документ завершил загрузку.

Вызов document.write() в закрытом потоке документов автоматически вызывает document.open(), что очистит документ.

55
Jerome WAGNER

Функция document.write(), вызываемая после загрузки страницы, перезапишет текущий документ. 

Вы хотите установить текст какого-либо элемента в вашем документе. Если вы добавите

<p id="message"></p>

до конца вашего тела, то вы можете позвонить

document.getElementById("message").innerHTML = "your text here";

Или с библиотекой jQuery

$("#message").html("your text here");
10
Andy Jones

Вызов document.write после документ был загружен неявно, вызывает document.open, что очищает текущий документ. (Сравните с вызовом document.open во время загрузки страницы, который вставляет строку в поток документа; он не очищает документ.)

document.write является одним из старейших пережитков древнего JavaScript, и его, как правило, следует избегать. Вместо этого вы, вероятно, захотите использовать методы манипуляции DOM для обновления документа.

9
josh3736

ты можешь использовать 

alert("Checkbox is checked");

или, если вы будете отображать его на странице, сначала создайте элемент с идентификатором «сообщение» (вы можете написать все, что захотите, но помните, что идентификаторы должны быть уникальными на странице), например

<div id="message"></div>

а затем использовать

document.getElementById("message").innerHTML = "Checkbox is checked";

или если вы используете jQuery:

$("#message").html("Checkbox is checked");

или если вы используете браузер с поддержкой консоли (Firefox, Chrome и т. д.)

console.log("Checkbox is checked");

вместо

document.write("Checkbox is checked");
2
Taha Paksu

document.write не лучший способ действовать так, как будто есть, да, ЛЮБОЕ, манипулирование DOM происходит или происходит уже тогда, document.write() работает не очень хорошо, так как изменяет исходный документ, но игнорирует любые изменения в дереве DOM.

Также помните, что браузер отображает вещи в основном из DOM, а не из оригинального документа. 

0
Sampo Sarrala
function DisplayWrite(a) {
    if (document.body) {
        var x = document.createElement("div")
        document.body.appendChild(x)
        x.innerHTML = "</div>" + a
    } else {
        document.writeclear(a)
    }
}

var document = new Object()
document.writeclear = document.write
document.write = function(x) {DisplayWrite(x)}
0
Misha Taylor