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 :(
4 réponses
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>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"
];
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.
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>