How do I insert Javascript into a web page

Question

Need help putting this javascript into this HTML code ( i'm new to coding )

<img id="coin"/><br/>
<button id="toss">Toss</button><br/>
<div id="count"></div>

HTML ^

var current = 3;
var elem = document.getElementById('toss');
var intervalId = setInterval( function(){
    if( current > 0 ){
        elem.innerHTML = "<h1>" + current + "</h1>";
    } else {
        if( Math.random() > .5 ){
            elem.innerHTML = '<img src="http://csgowild.com/assets/images/terrorist.png">';
        } else {
            elem.innerHTML = '<img src="http://vignette1.wikia.nocookie.net/cswikia/images/4/4c/Csgo_CT_icon_alt.png/revision/latest?cb=20151222191721">';
        }
        clearInterval( intervalId );
    }
    current--;
}, 1000 ); // 1000 ms = 1s

Javascript ^

just write it inside <script type="text/javascript"> your javascript code </script> tags .That's it. — paraS elixiR
– paraS elixiR, Commented Apr 1, 2016 at 1:25
When you say "Java" that is incorrect. Java and JavaScript are two separate languages, just so there is no confusion. — theblindprophet
– theblindprophet, Commented Apr 1, 2016 at 1:26
@Christian, can you select one of the answers below, if they are too youre liking so we can close this question up? Thanks — omarjmh
– omarjmh, Commented Apr 1, 2016 at 3:06

Community · Accepted Answer · 2020-06-20 09:12:55Z

1

Edit: to make it work on the click of the button not the following changes: I added an `onclick' event to your button, and I wrapped the intervalId function in another function. setInterval, the way you had it, fired immediately, now it is associated with the press of the button.

Here you go, just put it in a script tag like so, all in your HTML file:

working Fiddle

<img id="coin"/><br/>
<button id="toss" onclick=intervalId();>Toss</button><br/>
<div id="count"></div>
<script>
var current = 3;
var elem = document.getElementById('toss');
var intervalId = function() {setInterval( function(){
    if( current > 0 ){
        elem.innerHTML = "<h1>" + current + "</h1>";
    } else {
        if( Math.random() > .5 ){
            elem.innerHTML = '<img src="http://csgowild.com/assets/images/terrorist.png">';
        } else {
            elem.innerHTML = '<img src="http://vignette1.wikia.nocookie.net/cswikia/images/4/4c/Csgo_CT_icon_alt.png/revision/latest?cb=20151222191721">';
        }
        clearInterval( intervalId );
    }
    current--;
}, 1000 ); // 1000 ms = 1s
}
</script>

I think you can take it from here

Welcome to coding, and welcome to StackOverflow!

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Apr 1, 2016 at 1:28

omarjmh

13.9k6 gold badges37 silver badges42 bronze badges

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

3 Comments

omarjmh Over a year ago

haha, no prob man! if you like the answer, mark it correct and if you like you can upvote it too. Good luck out there! edit, actually you need 15 points to upvote, but you'll have em soon no doubt, check this out: stackoverflow.com/help/privileges

Christian Ortiz Over a year ago

One question. Is there a way that the person has to press the toss button for it to toss the coin?

omarjmh Over a year ago

the way you have the code setup now, no. You start that interval right away...you need to make it start on the click of the button...will update the fiddle in a bit

Pathmissing · Accepted Answer · 2016-04-01 02:14:16Z

1

There are two ways to include Javascript (or CSS eg.)

1: Embed it directly into your HTML file

<script>

    // Your code here

</script>

This is recommended for small code snippets. If you need much Javascript, possibility number two would make more sense.

2: Include as own file

You can also save your Javascript code as - for example - "script.js" and add the followig to your HTML file:

<script src="/path/to/script.js"></script>

Remember to use the correct path.

answered Apr 1, 2016 at 2:14

Pathmissing

364 bronze badges

Collectives™ on Stack Overflow

How do I insert Javascript into a web page

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related