Javascript document.getElement innerHTML undefined

Ich versuche, das Ergebnis einer Funktion in einem Element außerhalb des Skripts erscheinen zu lassen. Anstelle des Ergebnisses bekomme ich eine "undefinierte" Nachricht. Es ist wahrscheinlich nur eine Frage der Syntax, aber ich bekomme es nicht zum Laufen.Javascript document.getElement innerHTML undefined

Hier ist, was ich getan habe:

<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>

Also, was ich will, ist folgendes:
- das Spektrum der Antworten zeigen oberhalb von innerhalb der Spanne auszuwählen.
- zeigen Sie die Antwort (richtig/nicht korrekt) im obigen Bereich.
Nun, vielleicht ist es möglich, den ganzen Code eleganter zu machen, aber das sind meine vorherrschenden Probleme hier.

Quelle

2017-06-06 user9

Sie geben von der Funktion, die Sie 'sr' einstellen, nichts auf den Wert von zurück. –

Der Grund, warum Sie nicht definiert sind immer ist, dass man nie return etwas von der Funktion, die auf die Variable sr zugeordnet ist (und anschließend als Inhalt eines div mit derselben ID eingestellt)

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 --^

Es ist nicht klar, was Sie als innerHTML des div mit einer ID von sr setzen wollten.

Quelle

2017-06-06 14:24:45 Jamiec

Verstanden. Also, was kann ich tun, um das ganze Array anstelle des letzten Elements nur zu bekommen, wenn ich 'return btn.data = val;' und dann 'document.getElementById (" sr ") setze. InnerHTML = sr; '? – user9

setzen Sie den inneren HTML sr, die der Rückgabewert der Funktion ist:

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

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

Aber diese Funktion nicht alles wieder!

Geben Sie etwas mit dem Schlüsselwort return zurück.

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

Quelle

2017-06-06 14:26:04

O.k. Ich habe das obige Snippet geändert und 'return btn.data = val;' eingegeben. Jetzt gibt es nur den letzten Wert des Bereichs zurück. Ich wollte, dass es genauso aussieht wie die Anzahl der Tasten. – user9

Javascript document.getElement innerHTML undefined

Antwort

Verwandte Themen