I'm trying to display either heads or tails when a button is clicked. I'm not sure where I'm going wrong. It seems like a pretty simple thing to do but maybe I'm missing something? Here is what I have.

 <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>Assignment 9</title> 
        <link href="images/avatar.png" rel="shortcut icon" type="image/png">
        <link href="css/stylesheet.css" rel="stylesheet" type="text/css">
        <script src="js/javascript.js" type="text/javascript"></script>
        <style type="text/css">
        .auto-style1 {
            text-align: center;
        }
        </style>
        <script type="text/javascript">
        </script>
    </head>
    <body>
    <header>
    </header>
    <aside>
    </aside>
    <div id="main">
    <h1> Arrays and Coditional Statements</h1>

    <h2 class="auto-style1"> Quote of the Day</h2>


    <h2 class="auto-style1">Flip a coin </h2>
    <script>
  <script>
function myFunction1{
var x =Math.floor(Math.random()*2);
if ( x==0){
document.getElementById("Coin").innerHTML= "Heads";
}
else{
document.getElementById("Coin").innerHTML= "Tails";
}}

myFunction1();



</script>
<button type="button" onclick="myFunction1" id="Coin"> CLick ME</button>


    </div>
    <footer>
    </footer>
    </body>
    </html>

 <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>Assignment 9</title> 
        <link href="images/avatar.png" rel="shortcut icon" type="image/png">
        <link href="css/stylesheet.css" rel="stylesheet" type="text/css">
        <script src="js/javascript.js" type="text/javascript"></script>
        <style type="text/css">
        .auto-style1 {
            text-align: center;
        }
        </style>
        <script type="text/javascript">
        </script>
    </head>
    <body>
    <header>
    </header>
    <aside>
    </aside>
    <div id="main">
    <h1> Arrays and Coditional Statements</h1>

    <h2 class="auto-style1"> Quote of the Day</h2>


    <h2 class="auto-style1">Flip a coin </h2>
    <script>
  <script>
function myFunction1{
var x =Math.floor(Math.random()*2);
if ( x==0){
document.getElementById("Coin").innerHTML= "Heads";
}
else{
document.getElementById("Coin").innerHTML= "Tails";
}}

myFunction1();



</script>
<button type="button" onclick="myFunction1" id="Coin"> CLick ME</button>


    </div>
    <footer>
    </footer>
    </body>
    </html>

Share Improve this question asked Nov 9, 2015 at 22:23 David Bailey 232 silver badges5 bronze badges

Along with advice from @Barmar also function myFunction1{ should be function myFunction1(){ – TheVillageIdiot Commented Nov 9, 2015 at 22:30
1 In addition to below you wrote <script> twice – jeff carey Commented Nov 9, 2015 at 22:30

Add a ment |

5 Answers 5

Sorted by: Reset to default 3

You can use this single line of JavaScript to get either heads or tails

console.log(Math.random() >= 0.5 ? "heads" : "tails")

You forget () after myFunction1

You're not calling the function in your onclick attribute, you're just naming it. Functions are called by putting () (to enclose the arguments) after the function name. So it should be

onclick="myFunction1()"

A few things:

Redundant script tag just below the one that's actually needed
You need () on your onclick call - onclick="myFunction1()"
You also need () on your function definition: function myFunction1() {
At the time of the first call to myFunction1(), your Coin element does not yet exist - put the script after that element's creation, or in a window.onload handler.

Putting those fixes together:

<button type="button" onclick="myFunction1()" id="Coin">CLick ME</button>
<script>
  function myFunction1() {
    var x = Math.floor(Math.random() * 2);
    console.log(x);
    if (x == 0) {
      document.getElementById("Coin").innerHTML = "Heads";
    } else {
      document.getElementById("Coin").innerHTML = "Tails";
    }
  }

  myFunction1();
</script>

The JavaScript console would have told you about these problems, one-by-one, as you solved them. I remend getting familiar with it.

Here is the solution:

Assignment 9 .auto-style1 { text-align: center; }

Arrays and Coditional Statements

<h2 class="auto-style1"> Quote of the Day</h2>


<h2 class="auto-style1">Flip a coin </h2>

CLick ME

myFunction1();

function myFunction1() {
var x =Math.floor(Math.random()*2);
if ( x==0){
document.getElementById("Coin").innerHTML= "Heads";
}
else{
document.getElementById("Coin").innerHTML= "Tails";
}
}

</div>
<footer>
</footer>
</body>
</html>

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

html - coin flip using javascript - Stack Overflow

5 Answers 5

Arrays and Coditional Statements

与本文相关的文章

评论列表(0)