web-dev-qa-db-fra.com

document.write efface la page

Pourquoi, dans le code ci-dessous lors de l'appel de document.write dans la fonction validator(), les éléments de formulaire (la case à cocher et le bouton) sont supprimés de l'écran?

<!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>
javascripthtmljavascript-events
15
C graphics

document.write() est utilisé pour écrire dans le document stream .

Dans votre cas, le flux est probablement déjà fermé lorsque le gestionnaire onClick est appelé, car le chargement de votre document est terminé.

L'appel de document.write() sur un flux de document fermé appelle automatiquement document.open(), ce qui effacera le document.

55
Jerome WAGNER

Un document.write() appelé après le chargement de la page écrasera le document actuel. 

Vous souhaitez définir le texte d'un élément dans votre document. Si vous ajoutez un

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

à la fin de votre corps, alors vous pouvez appeler

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

Ou avec la bibliothèque jQuery

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

Appeler document.write after le document a été chargé implicitement appelle document.open, ce qui efface le document actuel. (Comparez à l'appel document.open pendant le chargement de la page, ce qui insère la chaîne dans le flux de documents; le document n'est pas effacé.)

document.write est l’un des plus anciens vestiges de JavaScript ancien et doit généralement être évité. Au lieu de cela, vous souhaiterez probablement utiliser des méthodes de manipluation DOM pour mettre à jour le document.

9
josh3736

vous pouvez utiliser 

alert("Checkbox is checked");

ou si vous voulez l'afficher sur la page, créez d'abord un élément avec un identifiant "message" (vous pouvez écrire ce que vous voulez, mais n'oubliez pas, les identifiants doivent être uniques sur la page) comme

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

et ensuite utiliser

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

ou si vous utilisez jQuery:

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

ou si vous utilisez un navigateur compatible avec la console (Firefox, Chrome, etc.)

console.log("Checkbox is checked");

au lieu de

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

document.write n'est pas la meilleure solution car s'il y en a, oui TOUTE, une manipulation DOM en cours ou déjà arrivée, alors document.write() ne fonctionne pas très bien car il modifie le document d'origine mais ignore les modifications apportées à l'arborescence DOM.

Rappelez-vous également que le navigateur affiche les éléments principalement à partir de DOM, et non à partir du document original. 

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