undefined innerHTML (when trying to refresh) - button

Question

hi everybody I'm trying to make a Random Generator of Discourses but I don't want to refresh the entire page in order to get a new string, so I thought that maybe innerHTML could be my solution. Unfortunately It gives me an "UNDEFINED" result when I click on the button. I don't know how to proceed. Thanks in advance.
<span id="generator" style="font-size: 20px; font-weight: bold;">
<script language="javascript" type="text/javascript">
Words1 = new Array("blablabla1","blablabla2")
Words2 = new Array("blablabla3","blablabla4")
var random = document.write('- ' +
Words1[Math.floor((Math.random() * 100000) % Words1.length)] +
' ' +
Words2[Math.floor((Math.random() * 100000) % Words2.length)] +
'.\n' );
function refresh(){
document.getElementById('generator').innerHTML = random;
}
</script>
</span>
<input type='button' onclick='refresh()' value='refresh'/>

Answer 1

You are wrapping the javascript code with the span tag. Should be like this and put the code inside de function:
<span id="generator" style="font-size: 20px; font-weight: bold;"></span>
<script language="javascript" type="text/javascript">
function refresh(){
Words1 = new Array("blablabla1","blablabla2")
Words2 = new Array("blablabla3","blablabla4")
var random = document.write('- ' +
Words1[Math.floor((Math.random() * 100000) % Words1.length)] +' ' + Words2[Math.floor((Math.random() * 100000) % Words2.length)] +'.\n' );
document.getElementById('generator').innerHTML = random;
}
</script>
<input type='button' onclick='refresh()' value='refresh'/>