Comment créer des caractères séparés dans une chaîne de caractères aléatoires?
J'essaie actuellement d'écrire un bloc de Javascript dans ma page Web qui prend le texte d'une zone de texte et convertit chaque caractère individuel de la chaîne en une police aléatoire.
Ceci est ma tentative actuelle (qui ne fonctionne pas):
<body>
<div class="container main-form">
<form>
<div class="form-group">
<label for="textinput">Input your text below</label>
<textarea class="form-control" id="textinput" rows="3"></textarea>
</div>
<button type="button" class="btn btn-outline-primary float-right" id="submit">Generate</button>
</form>
</div>
<div class="container output">
<script>
var input = "";
var ouput = "";
var inputarr = [];
// Array of fonts for span
var fontarr = ["font-family: MaxHand1, sans-serif", "font-family: MaxHand2, sans-serif", "font-family: MaxHand3, sans-serif"];
if document.getElementById('submit').clicked == true { // If button is clicked
input = document.getElementById('textinput'); // Set 'input' string to what was in the text area
inputarr = input.split(""); // Create an array of letters from input
for (i = 0; i < inputarr.length; i++) {
fontchange = fontarr[Math.floor((Math.random() * 3) + 1)]; // Choose a random font
output = (output + "<span style=\"" + fontchange + "\">" + inputarr[i] + "</span>"); // Add <span style="[fontchange]">inputarr[i]</span> to output string
}
document.getElementById(textoutput) = output; // Output string to line 45
}
</script>
<p id="textoutput"></p>
</div>
</body>
Lorsque je clique sur Soumettre, rien n'apparaît à l'écran. Je ne sais pas si c'est simplement parce que la chaîne n'est pas modifiée ou si cela ne met tout simplement pas à jour les balises textoutput p.
Il y a des couples d'erreurs de syntaxe dans votre code. document.getElementById('submit').clicked == trueet document.getElementById(textoutput) = outputet input = document.getElementById('textinput')<--- cela ne retournera pas de chaîne (il renverra la balise entière). Essayez ci-dessous le code (j'ai corrigé une erreur)
ces changements par rapport à la réponse précédente plus vous devez modifier votre appel Math.random pour obtenir 0,1,2 -> J'ai fait cela en utilisant l'opérateur% (mod)
var fontarr = ["font-family: courier new, sans-serif",
"font-family: comic sans, sans-serif",
"font-family: arial black, sans-serif"];
function change(){
var input = "";
var output = "";
input = document.getElementById('textinput').value;
for (i = 0; i < input.length; i++) {
fontchange = fontarr[Math.floor(((Math.random() * 3) + 1)%3)];
output += "<span style=\"" + fontchange + "\">" + input[i] + "</span>";
}
//console.log(output);
document.getElementById("textoutput").innerHTML = output;
}<body>
<div class="container main-form">
<form>
<div class="form-group">
<label for="textinput">Input your text below</label>
<textarea class="form-control" id="textinput" rows="3"></textarea>
</div>
<button type="button" class="btn btn-outline-primary float-right" id="submit" onclick="change()">Generate</button>
</form>
</div>
<div class="container output">
<script>
</script>
<p id="textoutput"></p>
</div>
</body>