Solved

Writing Javascript to page

Posted on 2013-11-27
4
228 Views
Last Modified: 2013-11-27
Hello expert.

Working with conditional if statements.

JS_While_Coin_Flip_d.html is a page that
uses math.random and math.floor to
create a variable with either 0 or1
half the time and write to an alert.

JS_While_Coin_Flip_e.html is a page that
that changes a text when a button is
clicked using getElementByID and innerHTML

Trying to get the the result of ...Flip_d...
to write to the page instead of an alert
by using the code in ...Flip_e...
The result is ...Flip_f...

Having trouble getting the result of variable callIt
to be written by the getElementByID method.

Will this work? Is it a syntax problem? Is there a better way of doing this?

Thanks

Allen in Dallas



++++++++  begin Javascript Coin Flip D +++++++++++++++
<!DOCTYPE html>
<html>
<HEAD>
<TITLE>Javascript Coin Flip D</TITLE>
<style type="text/css">
 body {font-family: arial;}
 </style>
</HEAD>
<body>
This page declares the variable rawCoin to be math random<br />
which set rawCoin to a random number between zero and one.<br />
Coin is then made equal to variable rawCoin which is Coin <br />
mutiplied by two and rounded down by the function math.floor <br />
to the nearest integer. The effect of this is that half the time <br />
rawCoin times 2 will be above 1 and half the time rawCoin will be <br />
below one. So the effect of math.floor sets Coin to zero half the <br />
time and the other half Coin is set to one. An if statement <br />
then sets the callIt variable to heads if Coin is 1 and tails <br />
if Coin is 0.


<p>Click the button to flip the virtual coin.</p>

<button onclick="coinFlip()">Coin Flip</button>

<p id="demo"></p>

<script>
function coinFlip()
{
var callIt ="";
var rawCoin = Math.random();
var Coin = Math.floor(rawCoin * 2);
//var Coin = (rawCoin * 2);
//var coinPlus = rawCoin + coin;
if(Coin == 1)
{
callIt = "heads";
}
else
{
callIt = "tails";
}

alert(callIt)
}
</script>

</body>
</html>
++++++++  end Javascript Coin Flip D +++++++++++++++

++++++++  begin Javascript Coin Flip E +++++++++++++++
<!DOCTYPE html>
<html>
<head>
<TITLE>Javascript Coin Flip E</TITLE>
<script>
function changeLink()
{
document.getElementById('myAnchor').innerHTML="the return";
}
</script>
<style type="text/css">
 body {font-family: arial;
span.Text1 {font-size:24px;}
 </style>
</head>
<body>
This page writes a change in text to the page.<br />

<p id="myAnchor">the answer</p>
<input type="button" onclick="changeLink()" value="Change link">

</body>
</html>

++++++++  end Javascript Coin Flip E +++++++++++++++

++++++++  begin Javascript Coin Flip F +++++++++++++++

<!DOCTYPE html>
<html>
<head>
<TITLE>Javascript Coin Flip F</TITLE>
<script>
var callIt ="";
function changeLink()
{
var rawCoin = Math.random();
var Coin = Math.floor(rawCoin * 2);

if(Coin == 1)
{
callIt = "heads";
}
else
{
callIt = "tails";
}
document.getElementById('myAnchor').innerHTML = "<script>document.write(callIt)</script>" ;
</script>
<style type="text/css">
body {font-family: arial;
span.Text1 {font-size:24px;}
 </style>
</head>
<body>

<p id="myAnchor">the answer</p>
<input type="button" onclick="changeLink()" value="Change link">

</body>
</html>

++++++++  begin Javascript Coin Flip E +++++++++++++++

Open in new window

0
Comment
Question by:9apit
  • 2
  • 2
4 Comments
 
LVL 44

Accepted Solution

by:
Rainer Jeschor earned 500 total points
ID: 39681354
Hi Allen,

here we go:
http://jsfiddle.net/EE_RainerJ/9vLNX/

var callIt ="";
function changeLink()
{
    var rawCoin = Math.random();
    var Coin = Math.floor(rawCoin * 2);

    if(Coin == 1)
    {
        callIt = "heads";
    }
    else
    {
        callIt = "tails";
    }
    document.getElementById('myAnchor').innerHTML = ''+callIt;
}

Open in new window


There was a missing "}" in the styles as well as a missing "}" in the function itself.
Second there is no need to script the document write - just set the innerHtml with the value is enough.

HTH
Rainer
0
 

Author Closing Comment

by:9apit
ID: 39681916
Hello Rainer,

Thanks. Excellent solution. I appreciate you troubleshooting the missing curly braces.

In the statement
 document.getElementById('myAnchor').innerHTML = ''+callIt;
At the end there are two single quotes and then a concatenation of the empty
quotes to the variable callIt. Why the empty quotes with plus sign?

Thanks again.

Allen in Dallas
0
 
LVL 44

Expert Comment

by:Rainer Jeschor
ID: 39681985
Hi Allen,
sorry - in this case the "''+" is not necessary - I think I have been on another source code area in your question.
Normally if you work with Javascript objects and they are initialized as number, to ensure that the result is interpreted as a string, you simply use
''+numbervar
to get a string e.g.
var no1 = 100;
var no2 = 200;
var str = '' + no1 + no2; // this should return string 100200
var no3 = no1+no2 // this should return an int with 300

Open in new window


Sorry for the confusion.
Rainer
0
 

Author Comment

by:9apit
ID: 39682025
Hello Rainer,

Yes, I tested it w/o the quotation marks and the plus sign.
Worked ok.

Thanks.

Happy Thanksgiving.

Allen in Dallas
0

Featured Post

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

The task A number given should be formatted for easy reading by separating digits into triads. Format must be made inline via JavaScript, i.e., frameworks / functions are not welcome. So let’s take a number like this “12345678.91¿ and format i…
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

760 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now