Member Avatar for subtlehulk

Hello. I have a little problem with some work i've been given to study and i am meant to build a little bingo application.
We have to modify our co-workers' code so that it fits out own little scenario. I've chosen to do a British Bingo card application and my co-worker has done an American one.
The problem i'm having is that the JS isn't showing up on my HTML document when i run it.
At the moment i am trying to generate a random number in a cell. I have the code for both HTML and JS which are mine. I've linked the two documents to each other but i just can't seem to figure out why the number isn't being generated when i run my HTML document.

<code>
// when this window has loaded call initAll
window.onload = initAll;
function initAll() {
//Create a random number
var newNum = Math.floor(Math.random() * 89) + 1
//sets the HTML contents of the current square
document.getElementById("square" + 0).innerHTML=newNum
}
</code>

*I can't understand why it isn't working when i run my bingo HTML file.
Could it be because i have CSS to edit the look of the table?
I've looked on the internet but because i'm just being introduced to JS, it's all too complex explanations.

Here's my table, incase i've botched that up.

<code>
<table id="table" border="1px">
<tr>
<td id="square0"> </td>
<td id="square3"> </td>
<td id="square6"> </td>
<td id="square9"> </td>
<td id="square12"> </td>
<td id="square15"> </td>
<td id="square18"> </td>
<td id="square21"> </td>
<td id="square24"> </td>
</tr>

<tr>
<td id="square1"> </td>
<td id="square4"> </td>
<td id="square7"> </td>
<td id="square10"> </td>
<td id="square13"> </td>
<td id="square16"> </td>
<td id="square19"> </td>
<td id="square22"> </td>
<td id="square25"> </td>
</tr>

<tr>
<td id="square2"> </td>
<td id="square5"> </td>
<td id="square8"> </td>
<td id="square11"> </td>
<td id="square14"> </td>
<td id="square17"> </td>
<td id="square20"> </td>
<td id="square23"> </td>
<td id="square26"> </td>
</table>
</code>

Thanks for anyone who can reply.

  • 3 Contributors
  • 7 Replies
  • 4K Views
  • 6 Hours Discussion Span
  • Latest Post Latest Post by JorgeM
Member Avatar for JorgeM

Your HTML code and JavaScript code should not be included within the <code> Element. Remove lines 1 & 10 in section 1 and lines 1 and 38 in section 2.

Then as pritaeas mentioned, your javascript code needs to be within the <script> element. For example,

<script>
<!--
// when this window has loaded call initAll
window.onload = initAll;
function initAll() {
  //Create a random number
  var newNum = Math.floor(Math.random() * 89) + 1
  /sets the HTML contents of the current square
  document.getElementById("square" + 0).innerHTML=newNum
}
-->
</script>
Member Avatar for subtlehulk

Sorry i may have messed up a little, i'm kinda new to posting in forums. I meant to put my code under the <code> tag to show you it's code.
My Javascript is an external file and i've linked it using th appropriate code.
But as far as you can tell, should this be loading a random number?

Edited by subtlehulk
Member Avatar for JorgeM

I copied and pasted your code and every time I refreshed the page, a random number was listed in square0. So it appears to be working.

However, I simply added the JavaScript in the <head> element so if its not working for you, make sure that your reference to the external JavaScript file is correct. Just to validate it on your end, copy the JavaScript from the external file and place the script within the <head> or <body> element. Here is a screen capture of the results.

Capture20

Member Avatar for subtlehulk

Thanks JorgeM I'll try that :)

Member Avatar for subtlehulk

It works!! Thanks everyone :)
I wonder if it was just my computer being weird, but at least it works ) Thanks again guys.

Member Avatar for JorgeM

glad to hear you resolved the issue.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.