JavaScript Forum

**Freek** · 05-18-2010, 02:22 PM

Hi !

I have been trying to get this right for the past hour, but I still haven't managed to get it working.

I have written a random number generator in javascript and saved it as an external js. file.
Now I want that if someone presses a button, that the score is displayed on the same page.
I have the button and the score is displayed when clicked, but it doesn't show up on the same page. Instead, it's displayed in a new page (same window however) with a white background.

This is the code I have now to call the external javascript:

HEAD

Code:

<script src="calculate.js">
</script>

BODY

Code:

<form>
<input type="button" onclick="calculate()" value="Click Me!">
</form>

Could someone help me out please ?

Thanks !

**chrishirst** · 05-18-2010, 03:08 PM

Well you have to tell the script WHERE to display the output otherwise it will do exactly what you described.

**Freek** · 05-18-2010, 03:59 PM

Quote:

Originally Posted by chrishirst

Well you have to tell the script WHERE to display the output otherwise it will do exactly what you described.

Thanks for your reply ! Could you please give me a hint on where I can find this command ?

Thanks !

**chrishirst** · 05-18-2010, 04:04 PM

Code:

document.formname.elementname.value = output;

**Freek** · 05-18-2010, 04:08 PM

Thanks for your fast reply !

I am a bit confused right now as Im unsure how I should apply this. This should go in the HTMl file, right ?
In the code of the button ?

To easy things up, here's my code;

Code:

<html>
<head>
<script src="schurkscore.js">
</script>
</head>
<body>

<form>
<input type="button" onclick="score()" value="Click Me!">
</form>

</body>
</html>

**chrishirst** · 05-18-2010, 04:55 PM

It goes at the end of your function, so it outputs the calculated value to an element rather than to the document.

**Freek** · 05-18-2010, 05:23 PM

Thanks again Chris for your reply.
Hmm, I really can't figure it out, I'm still learning Java.
This is my javascript file:
http://pastebin.com/ywVbdgfv

I pasted your command on the end of my function but I understand some variables need to be changed, However, my form does not have a name or such...

**chrishirst** · 05-18-2010, 05:39 PM

To manipulate/change elements with javascript, form elements must have a name attribute.
Or each element must have a ID attribute.

can't see your script at post bit either

**Freek** · 05-18-2010, 05:47 PM

Quote:

Originally Posted by chrishirst

To manipulate/change elements with javascript, form elements must have a name attribute.
Or each element must have a ID attribute.

can't see your script at post bit either

Thanks, Chris. I will have a look at giving my form elements a name tomorrow. It's almost 0:00 here so off to bed.

The code snippet should work though.
Try this instead:
http://cort.pastebin.com/Efft0Wwu

**Freek** · 05-19-2010, 06:36 PM

Hi Chris,

I have been unable to get it fixed myself

Could you please have a look at my code and see if you can see how it needs to get done ? (See attachment)
I tried adding a formname but I guess I did it uncorrectly so I removed it again.

Thanks, Chris !

**stbuchok** · 05-21-2010, 08:54 AM

I hope this is what you are asking for

Below your input element (Button) add the following:

<div id="divOutput"></div>

replace your script with this:

function schurkscore(){
var linebreak = "<br />"

var div = document.getElementById('divOutput');

//return a random integer between 0 and 100
var number = Math.floor(Math.random()*101);

{ // Print the number
div.innerHTML = "Jouw schurkscore is: "+number +"%";
div.innerHTML += linebreak;

}

if( number == 0) {
div.innerHTML += '<img src="ouderdag.jpg" alt="Ouderdag FAIL">';
div.innerHTML += linebreak;
}

if ( number == 100 ) {
div.innerHTML += '<img src="smobo.jpg" alt="Smobo WIN">';
div.innerHTML += linebreak;
}

if ( number < 11) {
div.innerHTML += '<img src="schurk1.png" alt="Schurk1">';
}

if ( number > 10 && number < 21) {
div.innerHTML += '<img src="schurk2.png" alt="Schurk2">';
}

if ( number > 20 && number < 31) {
div.innerHTML += '<img src="schurk3.png" alt="Schurk3">';
}

if ( number > 30 && number < 41 ) {
div.innerHTML += '<img src="schurk4.png" alt="Schurk4">';
}

if ( number > 40 && number < 51 ) {
div.innerHTML += '<img src="schurk5.png" alt="Schurk5">';
}

if ( number > 50 && number < 61 ) {
div.innerHTML += '<img src="schurk6.png" alt="Schurk6">';
}

if ( number > 60 && number < 71 ) {
div.innerHTML += '<img src="schurk7.png" alt="Schurk7">';
}

if ( number > 70 && number < 81 ) {
div.innerHTML += '<img src="schurk8.png" alt="Schurk8">';
}

if ( number > 80 && number < 91 ) {
div.innerHTML += '<img src="schurk9.png" alt="Schurk9">';
}

if ( number > 90 && number < 101 ) {
div.innerHTML += '<img src="schurk10.png" alt="Schurk10">';
}
}

**Freek** · 05-21-2010, 02:59 PM

Thanks !