C'est la première fois que je poste quelque chose sur un forum. Je suis nouveau avec javascript.

J'ai trouvé ceci: http://jsfiddle.net/6eTcD/2/ Vous tapez un mot, vous le soumettez et il apparaît au hasard sur la page.

HTML:

<form>
    <input type="text">
    <input type="submit">
</form>

JAVASCRIPT

document.querySelector("form").addEventListener("submit", function(e) {
    e.preventDefault();

    var fullWidth = window.innerWidth;
    var fullHeight = window.innerHeight;

    var text = this.querySelector("input[type='text']").value;

    var elem = document.createElement("div");
    elem.textContent = text;
    elem.style.position = "absolute";
    elem.style.left = Math.round(Math.random() * fullWidth) + "px";
    elem.style.top = Math.round(Math.random() * fullHeight) + "px";
    document.body.appendChild(elem);
});

Bien que j'aimerais choisir moi-même les mots qui vont être affichés, et je voudrais qu'ils apparaissent lorsque l'on clique sur le bouton. Et à des positions aléatoires. mais pas des mots aléatoires.

J'ai essayé de remplacer "texte" par "mots" et j'ai ajouté

    function getRandomWord() {
  var words = [
    'Hello',
    'No',
    'Hi',
    'Banana',
    'Apple'
  ];

MES MODIFICATIONS:

// A $( document ).ready() block.
$( document ).ready(function() {


document.querySelector("form").addEventListener("submit", function(e) {
    e.preventDefault();

    var fullWidth = window.innerWidth;
    var fullHeight = window.innerHeight;

    function getRandomWord() {
  var words = [
    'Hello',
    'No',
    'Hi',
    'Banana',
    'Apple'
  ];

    var elem = document.createElement("div");
    elem.textContent = words;
    elem.style.position = "absolute";
    elem.style.left = Math.round(Math.random() * fullWidth) + "px";
    elem.style.top = Math.round(Math.random() * fullHeight) + "px";
    document.body.appendChild(elem);
});

    });

Quoi qu'il en soit, je ne pense pas que ce que j'ai fait puisse fonctionner. Je suis nouveau dans ce domaine. Souhaitez-vous l'un d'entre vous maintenant?
Merci d'avance

1
Milla F 23 mai 2018 à 19:42

6 réponses

Meilleure réponse

Une solution pour imprimer les mots un par un, pas au hasard.

var words = [
  'Hello',
  'No',
  'Hi',
  'Banana',
  'Apple'
];
var visible = 0;

document.querySelector("form").addEventListener("submit", function(e) {
    e.preventDefault();

    var fullWidth = window.innerWidth;
    var fullHeight = window.innerHeight;

    var elem = document.createElement("div");
    elem.textContent = words[visible];
    elem.style.position = "absolute";
    elem.style.left = Math.round(Math.random() * fullWidth) + "px";
    elem.style.top = Math.round(Math.random() * fullHeight) + "px";
    document.body.appendChild(elem);
    
    visible++;
});
<form>
    <input type="submit">
</form>
0
Sven Eberth 23 mai 2018 à 16:58

Exemple pratique: JSFiddle

var allWords = [
  'Hello',
  'No',
  'Hi',
  'Banana',
  'Apple'
]; 

function getRandomWord(words) {
  var randomIndex = Math.floor(Math.random() * words.length);
  return words[randomIndex];
}

document.querySelector("form").addEventListener("submit", function(e) {
    e.preventDefault();

    var fullWidth = window.innerWidth;
    var fullHeight = window.innerHeight;

    var elem = document.createElement("div");
    elem.textContent = getRandomWord(allWords);

    elem.style.position = "absolute";
    elem.style.left = Math.round(Math.random() * fullWidth) + "px";
    elem.style.top = Math.round(Math.random() * fullHeight) + "px";
    document.body.appendChild(elem);
});
0
Alex 23 mai 2018 à 16:58

Vous pouvez utiliser items[Math.floor(Math.random()*items.length)] pour sélectionner un élément aléatoire dans le tableau items.

J'ai utilisé le code que vous avez fourni dans le lien JSFiddle:

document.querySelector("form").addEventListener("submit", function(e) {
    e.preventDefault();
    
    var fullWidth = window.innerWidth;
    var fullHeight = window.innerHeight;
    
    var items = ['nothing', 'banana', 'apple', 'rasberry']
    var item = items[Math.floor(Math.random()*items.length)];
    
    var elem = document.createElement("div");
    elem.textContent = item;
    elem.style.position = "absolute";
    elem.style.left = Math.round(Math.random() * fullWidth) + "px";
    elem.style.top = Math.round(Math.random() * fullHeight) + "px";
    document.body.appendChild(elem);
});
<form>
    <input type="submit">
</form>

Au lieu de rechercher la chaîne qui se trouve dans la zone de saisie, la chaîne sera prise au hasard dans le tableau de chaînes prédéfinies items.

0
Ivan 23 mai 2018 à 16:49

Il vous suffit de créer une fonction qui vous donne une valeur aléatoire à partir du tableau.

function getRandomWord(){
  var words = [
    'Hello',
    'No',
    'Hi',
    'Banana',
    'Apple'
  ];

  return words[Math.floor(Math.random() * words.length)];
}

Et comment appeler lorsque votre gestionnaire de clics se déclenche, affichez simplement la valeur retournée par cette méthode

Voici un extrait

0
George Bailey 23 mai 2018 à 16:52

Essayez cette fonction, la fonction que vous avez écrite avait des problèmes de syntaxe et de logique majeurs. De plus, dès maintenant, il imprime tous les éléments du tableau de mots. Vous pouvez également retirer un index aléatoire et imprimer ce mot indexé si vous le souhaitez.

violon fonctionnel

var fullWidth ;
var fullHeight;
var words = [
    'Hello',
    'No',
    'Hi',
    'Banana',
    'Apple'
  ];
function getRandomWord() {
    var random = Math.floor( words.length * Math.random());
    var randomWord = words[random];  

    var elem = document.createElement("div");
    elem.classList = "abc";
    elem.textContent = randomWord;
    elem.style.position = "absolute";
    elem.style.left = Math.round(Math.random() * fullWidth) + "px";
    elem.style.top = Math.round(Math.random() * fullHeight) + "px";
            $(".abc").remove();
    document.body.appendChild(elem);
};
// A $( document ).ready() block.
$( document ).ready(function() {


document.querySelector("form").addEventListener("submit", function(e) {
    e.preventDefault();

     fullWidth = window.innerWidth;
     fullHeight = window.innerHeight;

    getRandomWord();

    });
});
0
Nandita Sharma 23 mai 2018 à 17:11

Vous êtes sur la bonne voie ici. La première partie à approfondir est votre fonction getRandomWord. En javascript, il n'y a pas de retours implicites, ce qui signifie que vous devez réellement choisir de renvoyer quelque chose. Cela signifie que vous devez réellement taper le mot return

    function getRandomWord() {
    var words = [
      'Hello',
      'No',
      'Hi',
      'Banana',
      'Apple'
    ];
    return words[Math.floor(Math.random() * words.length)]
 }


var text = getRandomWord();

Plus bas dans votre solution, vous avez ajouté que elem.textContent = words; Cela ne fonctionnera pas car, comme vous l'avez défini, words est en fait un tableau. Il existe plusieurs façons de procéder, mais l'une d'elles consiste à affecter elem.textContent = getRandomWord().

À présent, lorsque vous affectez le contenu du texte à votre fonction getRandomWord (), getRandomWord s'exécute (ou s'exécute) et attribue à votre texte tout mot provenant de getRandomWord.

J'espère que ça aide!

0
Jamie D 23 mai 2018 à 17:00