undefined innerHTML (when trying to refresh)

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