Javascript document.getElement innerHTML undefined

Question

I am trying to make the outcome of a function appear in a element outside the script. Instead of the outcome I get an "undefined" message. It is probably just a matter of syntax, but I don't get it to work.

Here is what I did:

<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++)
{
	var sr = (function(val) {
        btn = document.createElement('button');
        btn.data = val;
        btn.innerHTML = val;
        btn.addEventListener('click', checkAnswer);
        document.body.appendChild(btn);
		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>

So, what I want is the following:
- show the range of answers to select from within the span above.
- show the answer (correct/not correct) in the span above.
Well, maybe it is possible to make the whole code more elegant, but these are my predominant problems here.

You don't return anything from the function you're setting sr to the value of. — Heretic Monkey
– Heretic Monkey, Commented Jun 6, 2017 at 14:24

Jamiec · Accepted Answer · 2017-06-06 14:24:45Z

1

The reason you're getting undefined is that you never return anything from the function which is assigned to the variable sr (and subsequently set as the content of a div with that same 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 --^

It is not clear what you meant to put as the innerHTML of the div with an id of sr.

answered Jun 6, 2017 at 14:24

Jamiec

136k15 gold badges143 silver badges202 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user9 Over a year ago

Got it. So, what can I do in order to get the whole array instead of the last element only when I put return btn.data = val; and then document.getElementById("sr").innerHTML = sr; ?

Aurélien Gasser · Accepted Answer · 2017-06-06 14:32:58Z

1

You set the inner HTML to sr, which is the return value of the function:

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

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

But this function doesn't return anything!

Make it return something using the return keyword.

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

edited Jun 6, 2017 at 14:32

answered Jun 6, 2017 at 14:26

Aurélien Gasser

3,1201 gold badge23 silver badges25 bronze badges

1 Comment

user9 Over a year ago

O.k. I changed the snippet above and put return btn.data = val;. Now it returns only the last value of the range. I wanted it to show the same as the range of buttons.

Collectives™ on Stack Overflow

Javascript document.getElement innerHTML undefined

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related