Utilisation de Javascript pour remplacer le texte dans la balise HTML avec innerHTML et les fonctions

J'essaie de changer le texte à l'intérieur d'une balise h1 en utilisant l'élément id "greeting" et un script Java externe. J'ai du mal à essayer de comprendre comment appeler ma fonction init qui a rassemblé des variables et les utilise dans la fonction suivante. Heres ce que j'ai jusqu'ici.Utilisation de Javascript pour remplacer le texte dans la balise HTML avec innerHTML et les fonctions

HTML

<head> 

    <title>Matt Beckley</title> 
    <script type="text/javascript" src="script1.js"></script> 
</head> 

<body> 

<h1 id="greeting">Welcome!</h1> 

</body> 
</html>

LE SCRIPT où est le problème! Donc, je ne sais pas comment faire fonctionner la dernière fonction de sorte que la balise h1 affiche un nom et un pseudo. w3schools affiche uniquement "Strings" et non la possibilité d'appeler l'autre fonction. Quelqu'un sait-il comment faire ça?

Source

2010-01-14 Matt

Que diriez-vous de fusionner les fonctions init et writeGreeting:

window.onload = init; 

function init() 
{ 
var fullname=prompt("Please Enter you name!","Anonymous "); 
fullname = (fullname == "Anonymous")? "Anonymous " : ""; 

var nickname=prompt("Please Enter you nickname!"," None"); 
nickname = (nickname == "None")? " None": ""; 
document.getElementById("greeting").innerHTML= "Welcome " + fullname + " (" + nickname + ")"; 
}

P.S. Point mineur de la grammaire - vous voulez probablement "S'il vous plaît entrer votre nom", plutôt que "S'il vous plaît entrez votre nom", et de même pour l'invite de surnom.

Source

2010-01-14 12:22:41

// Create two GLOBAL variables 
var fullname = ""; 
var nickname = ""; 

function init() { 
    fullname = /* ... */ 
    nickname = /* ... */ 
    // pass the nickname on to the greeting function 
    writeGreeting(nickname); 
} 

// This function is remain separate, if you wish to call it again 
// at a later time before a page-refresh. 
function writeGreeting(name) { 
    document.getElementById("greeting").innerHTML = name; 
}

Source

2010-01-14 12:23:29 Sampson

Comment est-ce possible?

Il affiche « Bienvenue fullname! » ou « Bienvenue surnom! » ou « Bienvenue Anonyme! » si vous ne mettez pas.

function init() { 
    var fullname=prompt("Please Enter you name!"); 
    var nickname=prompt("Please Enter you nickname!"); 
    writeGreeting(fullname||nickname||"Anonymous"); 
} 

function writeGreeting(name){ 
    document.getElementById("greeting").innerHTML= "Welcome "+name+"!"; 
}

Source

2010-01-14 12:32:18 YOU

J'aime la solution de Dominic. N'oubliez pas que vous devez faire attention aux données saisies par un utilisateur. Je recommande d'échapper la chaîne avec la fonction escape(), avant de l'utiliser.

par exemple.

document.getElementById("greeting").innerHTML= "Welcome " + escape(fullname) + 
               " (" + escape(nickname) + ")";

Source

2010-01-14 12:33:28

C'est la mauvaise évasion, c'est un encodage spécifique à JavaScript qui est un peu comme un encodage d'URL, mais cassé. Cela fausserait les caractères de nom communs comme les espaces et les accents. 'escape 'ne devrait jamais être utilisé pour quoi que ce soit. La bonne évasion serait codée en HTML, en remplaçant '<' par '<' et '&' par '&'. – bobince

Ah. Pourtant, vous devez convenir que c'est toujours mieux que rien. :) –

Pourquoi ne pas utiliser .inner texte à la place?

Source

2010-01-14 12:50:44 pencilCake

Parce que c'est IE seulement. Sur les autres navigateurs récents, vous pouvez utiliser la propriété DOM Level 3 Core 'textContent' à la place. Mais oui, vous ne voulez certainement pas écrire du texte sans échappement dans 'innerHTML'. – bobince

Comme ci-dessus, innerHTML est dangereux: http://www.slideshare.net/x00mario/the-innerhtml-apocalypse – kufudo

Essayez ceci. Testé avec ie, chrome et ff (tout dernier).

var msg = "Welcome " + fullname + "(" + nickname + ")!"; 

var greetingElement = document.getElementById("greeting"); 

if(greetingElement.firstChild == null) 
    greetingElement.appendChild(document.createTextNode(msg)); 
else 
    greetingElement.firstChild.nodeValue = msg;

Source

2010-01-14 17:45:17

Utilisation de Javascript pour remplacer le texte dans la balise HTML avec innerHTML et les fonctions

Répondre

Questions connexes