Déplacer des variables de Javascript vers HTML et enregistrer des variables pour les utiliser dans d'autres fonctions

Question

J'ai du mal à transférer des variables de Javascript à HTML , ainsi qu'à stocker le résultat d'une fonction Javascript en tant que variable. Voici mon code que je vais vous expliquer ci-dessous:

Dans mon document HTML :

<hmtl>

<title> Japanese </title>

<head>
<script src="japanese.js" type="text/javascript"> </script>
<link rel="stylesheet" type="text/css" href="japanese.css">
</head>

<body>

<div class="title">
Japanese
</div>

<button onclick="process()">Random</button>
<br>
<div id="number"> </div>
<div id="english"> </div>

</body>

</html>

Dans mon document Javascript :

function random() {
    var integer = (Math.floor(Math.random() * (3)));
    document.getElementById('number').innerHTML = integer;
};

function searchE() {
    var English = englishID[integer];
    document.getElementById('english').innerHTML = English;
};

function process() {
    random();
    searchE();
};

var englishID [
    "add",
    "answer",
    "arrive"
];

Je pense qu'il y a peut-être quelque chose qui ne va pas dans la façon dont j'ai défini la variable anglaise, car avant d'ajouter la fonction searchE au code, le nombre aléatoire entre 0 et 2 affiché.

Merci pour votre temps.

Mise à jour! Modification de la fonction searchE comme suit:

function searchE() {
    var integer = (Math.floor(Math.random() * (3)));
    var English = englishID[integer];
    document.getElementById('english').innerHTML = English;

Cependant, le code ne fonctionne toujours pas :(

javascript html

0

Alexander Jephtha 17 avril 2018 à 02:23

Answer 1

Une alternative au passage d'une variable d'une fonction à une autre est de retourner le résultat de fn1 et de passer cette valeur à la fonction fn2:

Par exemple:

function a () { 
   var integer = 1 + 4;
   // Some stuff with integer

   return integer;
}

function b (resultA){
    console.log(resultA);
}

b(a()); // Here the result of 'a' is passed to the function 'b'

function random() {
  var integer = (Math.floor(Math.random() * (3)));
  document.getElementById('number').innerHTML = integer;
  
  return integer;
};

function searchE(integer) {
  var English = englishID[integer];
  document.getElementById('english').innerHTML = English; 
};

function process() {  
  searchE(random());
};

var englishID = [
  "add",
  "answer",
  "arrive"
];

<div class="title">
  Japanese
</div>

<button onclick="process()">Random</button>
<br>
<div id="number"> </div>
<div id="english"> </div>

1

Ele 16 avril 2018 à 23:34

Answer 2

Votre code est en train de se casser. cela ne fonctionne pas car il n'y a pas d'opérateur d'affectation pour englishID.

Effectuez le changement suivant

De

var englishID [
  "add",
  "answer",
  "arrive"
];

À

var englishID = [
  "add",
  "answer",
  "arrive"
];

1

Barnabas Nomo 16 avril 2018 à 23:45

Answer 3

Certaines variables sont définies dans des fonctions que vous traitez comme des globaux. Vous pouvez initialiser un entier tout en haut, en dehors de la fonction. Je recommanderais cependant d'avoir deux fonctions qui renvoient respectivement l'entier et l'anglais, puis appelez celles en cours et configurez votre innerHTML dedans.

1

andy729 16 avril 2018 à 23:29

Answer 4

Si vous voulez obtenir le numéro que vous avez mis dans le document et l'utiliser dans searchE, vous devrez sélectionner à nouveau l'élément et extraire son texte:

function searchE() {
  const integerFromDocument = Number(document.querySelector('#number').textContent);
  var English = englishID[integerFromDocument];
  document.getElementById('english').textContent = English;
}

N'utilisez innerHTML que lorsque vous insérez / obtenez délibérément du balisage HTML; sinon, textContent est plus rapide, plus sûr et plus prévisible si vous avez uniquement l'intention de traiter du texte.

Fragment:

document.querySelector('button').addEventListener('click', process);
function random() {
    var integer = (Math.floor(Math.random() * (3)));
    document.getElementById('number').innerHTML = integer;
}

function searchE() {
  const integerFromDocument = Number(document.querySelector('#number').textContent);
  var English = englishID[integerFromDocument];
  document.getElementById('english').textContent = English;
}

function process() {
    random();
    searchE();
}

var englishID = [
    "add",
    "answer",
    "arrive"
];

<div class="title">
Japanese
</div>
<button>Random</button>
<br>
<div id="number"> </div>
<div id="english"> </div>

1

CertainPerformance 16 avril 2018 à 23:44

Déplacer des variables de Javascript vers HTML et enregistrer des variables pour les utiliser dans d'autres fonctions

4 réponses

De

À

Questions connexes

De nouvelles questions

javascript