Javascript document.getElement innerHTML undefined

J'essaie de faire apparaître le résultat d'une fonction dans un élément extérieur au script. Au lieu du résultat, je reçois un message "indéfini". C'est probablement juste une question de syntaxe, mais je n'arrive pas à le faire fonctionner.Javascript document.getElement innerHTML undefined

Voici ce que je faisais:

<html> 
 
<head> 
 

 

 
</head><body> 
 
<table class="mytable">  
 
<tr> 
 

 
<p><span id="number1">1</span><span> + </span><span id="number2">2</span><span> = </span></p> 
 

 
<p><span id="sr">here goes the range of solutions to select of</span></p> 
 

 
<p><span id="quote">here goes the quote</span></p> 
 
</table> 
 
<form id="myForm"> 
 
<div id="display" style="height: 20px; width: 100%;"></div> 
 
    
 
<script> 
 

 
var plusorminus1 = Math.random() < 0.5 ? -1 : 1; 
 
var plusorminus2 = Math.random() < 0.5 ? -1 : 1; 
 
var plusorminus3 = Math.random() < 0.5 ? -1 : 1; 
 
var plusorminus4 = Math.random() < 0.5 ? -1 : 1; 
 
var plusorminus5 = Math.random() < 0.5 ? -1 : 1; 
 
var plusorminus6 = Math.random() < 0.5 ? -1 : 1; 
 
var plusorminus7 = Math.random() < 0.5 ? -1 : 1; 
 

 
function sortfunction(a, b){ 
 
    return (a - b) 
 
} 
 

 
var number1; 
 
var number2; 
 

 
number1 = Math.floor((Math.random() * 15) + 1); 
 
number2 = Math.floor((Math.random() * 15) + 1); 
 
document.getElementById("number1").innerHTML = number1; 
 
document.getElementById("number2").innerHTML = number2; 
 

 
var answer = parseInt(number1,10)+parseInt(number2,10); 
 

 
var addarr = [] 
 
while(addarr.length < 7){ 
 
    var randomnumber = Math.ceil(Math.random()*10) 
 
    if(addarr.indexOf(randomnumber) > -1) continue; 
 
    addarr[addarr.length] = randomnumber; 
 
} 
 

 
var var1 = answer; 
 
var var2 = answer + (plusorminus1 * addarr[0]); 
 
var var3 = answer + (plusorminus2 * addarr[1]); 
 
var var4 = answer + (plusorminus3 * addarr[2]); 
 
var var5 = answer + (plusorminus4 * addarr[3]); 
 
var var6 = answer + (plusorminus5 * addarr[3]); 
 
var var7 = answer + (plusorminus6 * addarr[3]); 
 

 
var myarray=[var1,var2,var3,var4,var5,var6,var7]; 
 
    myarray=myarray.sort(sortfunction); 
 

 

 
for(var i = 0; i < myarray.length; i++) 
 
{ 
 
\t var sr = (function(val) { 
 
     btn = document.createElement('button'); 
 
     btn.data = val; 
 
     btn.innerHTML = val; 
 
     btn.addEventListener('click', checkAnswer); 
 
     document.body.appendChild(btn); 
 
\t \t return btn.data = val; 
 
    })(myarray[i]); 
 
document.getElementById("sr").innerHTML = sr; //only shows the last value in the array 
 
} 
 

 

 
function checkAnswer(evt) { 
 
    if (evt.target.data == answer) { 
 
     display.innerHTML = ("correct"); 
 
    } else { 
 
     display.innerHTML = ("Not correct"); 
 
    } 
 
document.getElementById("quote").innerHTML = evt.target.data; //does not work 
 
} 
 
</script> 
 

 
</FORM> 
 

 

 
</body> 
 
</html>

Alors, ce que je veux est la suivante:
- montrer la gamme de réponses à sélectionner en l'espace ci-dessus.
- affichez la réponse (correcte/non correcte) dans l'intervalle ci-dessus.
Eh bien, peut-être qu'il est possible de rendre l'ensemble du code plus élégant, mais ce sont mes problèmes prédominants ici.

Source

2017-06-06 user9

Vous ne renvoyez rien de la fonction que vous définissez 'sr' à la valeur de. –

La raison pour laquelle vous obtenez non défini est que vous ne return rien de la fonction qui est affectée à la sr variable (et par la suite défini comme le contenu d'un div même id)

var sr = (function(val) { 
    btn = document.createElement('button'); 
    btn.data = val; 
    btn.innerHTML = val; 
    btn.addEventListener('click', checkAnswer); 
    document.body.appendChild(btn); 
})(myarray[i]); 
document.getElementById("sr").innerHTML = sr; 
       sr has the value undefined --^

Il n'est pas clair ce que vous vouliez mettre comme innerHTML de la div avec un identifiant de sr.

Source

2017-06-06 14:24:45 Jamiec

J'ai compris. Donc, que puis-je faire pour obtenir le tableau entier au lieu du dernier élément seulement quand je mets 'return btn.data = val;' et ensuite 'document.getElementById (" sr "). InnerHTML = sr; '? – user9

Vous définissez le code HTML interne à sr, qui est la valeur de retour de la fonction:

var sr = (function(val) { 
    // ... 
    // nothing is returned 
})(myarray[i]); 

document.getElementById("sr").innerHTML = sr;

Mais cette fonction ne retourne rien!

Faites-le retourner quelque chose en utilisant le mot-clé return.

var sr = (function(val) { 
    // ... 
    return "I <3 Stack Overflow"; 
})(myarray[i]);

Source

2017-06-06 14:26:04

O.k. J'ai changé l'extrait ci-dessus et j'ai mis 'return btn.data = val;'. Maintenant, il ne renvoie que la dernière valeur de la plage. Je voulais qu'il montre la même chose que la gamme de boutons. – user9

Javascript document.getElement innerHTML undefined

Répondre

Questions connexes