onmousedown: I need a textfield to display as well as image/button

  • (4 Pages)
  • +
  • 1
  • 2
  • 3
  • Last »

50 Replies - 1957 Views - Last Post: 28 November 2013 - 09:22 AM

#1 EdNolan  Icon User is offline

  • D.I.C Regular

Reputation: 5
  • View blog
  • Posts: 409
  • Joined: 22-September 13

onmousedown: I need a textfield to display as well as image/button

Posted 18 November 2013 - 01:01 PM

  <div id="ten">
<a href="javascript:void(0)"><img src="frame2.png" NAME="frame" WIDTH=140 HEIGHT=160 BORDER=0 onmouseover="this.src='frame.png'" onmouseout="this.src='frame2.png'" ;
onmousedown=wager(){ "this.src='wager.png'"
<"javascript:return true;" type="text" name="textfield"}; /></a>
</div>



The mouse over works great. I now want to be able to click frame.png and have image appear and have a text field overlap the image so people can place a bet. I want to use a second image for the submit button as well. The wager button will have to be placed at the bottom of the screen. I will have to use css to set it's position, but I'm also not sure what I would use in css. Any clues how how I can fix my code? It's within html.

Is This A Good Question/Topic? 0
  • +

Replies To: onmousedown: I need a textfield to display as well as image/button

#2 EdNolan  Icon User is offline

  • D.I.C Regular

Reputation: 5
  • View blog
  • Posts: 409
  • Joined: 22-September 13

Re: onmousedown: I need a textfield to display as well as image/button

Posted 18 November 2013 - 01:23 PM

Attached Image
Was This Post Helpful? 0
  • +
  • -

#3 laytonsdad  Icon User is online

  • Cheese and Sprinkles
  • member icon

Reputation: 447
  • View blog
  • Posts: 1,931
  • Joined: 30-April 10

Re: onmousedown: I need a textfield to display as well as image/button

Posted 18 November 2013 - 02:54 PM

This is exactly why I told you to separate your code.
Put your Javascript in its own file and link it with the <script> tag.
Your onmousedown event trigger is written wrong. But that should be taken care of after separating the code.
Was This Post Helpful? 1
  • +
  • -

#4 laytonsdad  Icon User is online

  • Cheese and Sprinkles
  • member icon

Reputation: 447
  • View blog
  • Posts: 1,931
  • Joined: 30-April 10

Re: onmousedown: I need a textfield to display as well as image/button

Posted 18 November 2013 - 03:03 PM

I would also like to say that using event listeners is much better and neater than html event triggers.
Was This Post Helpful? 0
  • +
  • -

#5 modi123_1  Icon User is online

  • Suitor #2
  • member icon



Reputation: 9572
  • View blog
  • Posts: 36,253
  • Joined: 12-June 08

Re: onmousedown: I need a textfield to display as well as image/button

Posted 18 November 2013 - 03:14 PM

Quote

I will have to use css to set it's position, but I'm also not sure what I would use in css. Any clues how how I can fix my code? It's within html.

What have you looked into, or tried?
Was This Post Helpful? 0
  • +
  • -

#6 EdNolan  Icon User is offline

  • D.I.C Regular

Reputation: 5
  • View blog
  • Posts: 409
  • Joined: 22-September 13

Re: onmousedown: I need a textfield to display as well as image/button

Posted 18 November 2013 - 03:45 PM

I believe I did separate my code as you asked. I have a javascript and css file as of Sunday night. I'm so glad I finally did that too. Thanks for pushing me with that. Event listeners? I guess I'm confused with that, but here is what I have right now.
<!DOCTYPE html>
<html>
    <head>
        <title>My Game</title>
        <link rel="stylesheet" type="text/css" href="game.css"/>
<script type="text/javascript">
//preload images first
img1=new Image()
img1.src="out.png"
img2=new Image()
img2.src="in.png"
</script>
    </head>
    <body>
<table>
  <div id="ten">
<a href="javascript:void(0)"><img src="frame2.png" NAME="frame" WIDTH=140 HEIGHT=160 BORDER=0 onmouseover="this.src='frame.png'" onmouseout="this.src='frame2.png'" ;
onmousedown="this.src=img2.src" onmouseup="this.src=img1.src"></a>
</div>
</table>
<table>
<textarea id="txtArea" onfocus="alert(this);"></textarea>
</table>
// bla bla bla, lol



The mouse over works as well as the onmousedown and onmouseup. I don't know how to write it in javascript, sorry laytonsdad. I believe I need to add a function call, and an onclick. I would name it function wager (). I am thinking I need to now call the function when doing onmousedown, and i would like that function to display that wager amount button at the lower part of the screen. Then the player would have to have a way of inserting a bet amount inside a textbox that is layered over the image. Can I just add wager() here ...
onmousedown="this.src=img2.src" wager() onmouseup="this.src=img1.src"


Do I need a comma or anythng? Or what would you recommend?
Here's what I added to css ...
#txtArea {
left:790px;
top:420px
}


The text box isn't displaying and I need to add wager.png image that the textbox will layer. Any ideas?

This post has been edited by EdNolan: 18 November 2013 - 04:18 PM

Was This Post Helpful? 0
  • +
  • -

#7 Atli  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 3730
  • View blog
  • Posts: 6,017
  • Joined: 08-June 10

Re: onmousedown: I need a textfield to display as well as image/button

Posted 18 November 2013 - 04:18 PM

You need to study Javascript events. I suggest reading the series about them on Quirksmode, starting with this article: Introduction to Events. (It's a series; each article leads you to the next one in the list!)

Specifically, you should study the differences between the early and traditional models. You would also do well to understand the more modern W3C model. - The W3C model is what you should be using today, over both the early and traditional models.

Understand that doing onclick="doStuff();" in HTML is the very oldest, and most obsolete, method of setting event handlers. It should be avoided!

Quote

I believe I did separate my code as you asked.

In the snippet you just posted, you still have Javascript in the HTML. You should avoid ANY use of Javascript within a HTML page. All scripts should be in script files.
Was This Post Helpful? 2
  • +
  • -

#8 laytonsdad  Icon User is online

  • Cheese and Sprinkles
  • member icon

Reputation: 447
  • View blog
  • Posts: 1,931
  • Joined: 30-April 10

Re: onmousedown: I need a textfield to display as well as image/button

Posted 18 November 2013 - 04:31 PM


<script type="text/javascript">
//preload images first
img1=new Image()
img1.src="out.png"
img2=new Image()
img2.src="in.png"
</script>


<a href="javascript:void(0)"><img src="frame2.png" NAME="frame" WIDTH=140 HEIGHT=160 BORDER=0 onmouseover="this.src='frame.png'" onmouseout="this.src='frame2.png'" ;
onmousedown="this.src=img2.src" onmouseup="this.src=img1.src"></a>

<textarea id="txtArea" onfocus="alert(this);"></textarea>




All of this is using javascript in it. This Javascript should all be in your Javascript file(s). And this should just be html.
Was This Post Helpful? 0
  • +
  • -

#9 EdNolan  Icon User is offline

  • D.I.C Regular

Reputation: 5
  • View blog
  • Posts: 409
  • Joined: 22-September 13

Re: onmousedown: I need a textfield to display as well as image/button

Posted 18 November 2013 - 04:36 PM

View PostAtli, on 18 November 2013 - 04:18 PM, said:

Quote

I believe I did separate my code as you asked.

In the snippet you just posted, you still have Javascript in the HTML. You should avoid ANY use of Javascript within a HTML page. All scripts should be in script files.

OHHHHHH, I understand now !!!! Okay, Thank you for clearing this up for me. I thought i was suppose to separate for css. Now I understand. Thank you!
Was This Post Helpful? 0
  • +
  • -

#10 laytonsdad  Icon User is online

  • Cheese and Sprinkles
  • member icon

Reputation: 447
  • View blog
  • Posts: 1,931
  • Joined: 30-April 10

Re: onmousedown: I need a textfield to display as well as image/button

Posted 18 November 2013 - 04:40 PM

CSS should also be in a seperate file attached with the <link rel="stylesheet" type="text/css" href="externalStyleSheetName.css"/> tag.
Was This Post Helpful? 0
  • +
  • -

#11 EdNolan  Icon User is offline

  • D.I.C Regular

Reputation: 5
  • View blog
  • Posts: 409
  • Joined: 22-September 13

Re: onmousedown: I need a textfield to display as well as image/button

Posted 18 November 2013 - 04:54 PM

Okay here's the javascript file. I believe everything is separated now. The css file will follow below this one.
<!DOCTYPE html>
<html>
    <head>
        <title>My Game</title>
        <link rel="stylesheet" type="text/css" href="game.css"/>
    </head>
    <body>
<table>
      <tr>
      <div>
      <td>..<img src="1.png" alt="One">.............<div class="position" id="odds1"></div></td>
      <td>..<img src="2.png" alt="Two">.............<div class="position" id="odds2"></div></td>
      <td>..<img src="3.png" alt="Three">.............<div class="position" id="odds3"></div></td>
      <td>..<img src="4.png" alt="Four">.............<div class="position" id="odds4"></div></td>
      <td>..<img src="5.png" alt="Five">.............<div class="position" id="odds5"></div></td>
      <td>..<img src="6.png" alt="Six">.............<div class="position" id="odds6"></div></td>
      <td>..<img src="7.png" alt="Seven">.............<div class="position" id="odds7"></div></td>
      <td>..<img src="8.png" alt="Eight">.............<div class="position" id="odds8"></div></td>
      <td>..<img src="9.png" alt="Nine">.............<div class="position" id="odds9"></div></td>
      <td>..<img src="10.png" alt="Ten">.............<div class="position" id="odds10"></div></td>
      <td>..<img src="J.png" alt="Jack">.............<div class="position" id="oddsJ"></div></td>
      <td>..<img src="Q.png" alt="Queen">.............<div class="position" id="oddsQ"></div></td>
      <td>..<img src="K.png" alt="King"><div class="position" id="oddsK"></div></td>
      </div>
      </tr>
</table>
<table>
       <tr>
         <td><div id="guess"></div></td>
       </tr>
      <tr>
        <td><div id="aaa"></div></td>
      </tr>
</table>
<table>
  <div id="ten">
<a href="javascript:void(0)"><img src="frame2.png" NAME="frame" WIDTH=140 HEIGHT=160 BORDER=0 onmouseover="this.src='frame.png'" onmouseout="this.src='frame2.png'" ;
onmousedown="this.src='in.png'" onmouseup="this.src='out.png'" /></a>
</div>

  <div id="nine">
<a href="javascript:void(0)"><img src="frame2.png" NAME="frame" WIDTH=140 HEIGHT=160 BORDER=0 onmouseover="this.src='frame.png'" onmouseout="this.src='frame2.png'" ;
onmousedown="this.src='in.png'" onmouseup="this.src='out.png'" /></a>
</div>

  <div id="eight">
<a href="javascript:void(0)"><img src="frame2.png" NAME="frame" WIDTH=140 HEIGHT=160 BORDER=0 onmouseover="this.src='frame.png'" onmouseout="this.src='frame2.png'" ;
onmousedown="this.src='in.png'" onmouseup="this.src='out.png'" /></a>
</div>

  <div id="two">
<a href="javascript:void(0)"><img src="frame2.png" NAME="frame" WIDTH=140 HEIGHT=160 BORDER=0 onmouseover="this.src='frame.png'" onmouseout="this.src='frame2.png'" ;
onmousedown="this.src='in.png'" onmouseup="this.src='out.png'" /></a>
</div>

  <div id="three">
<a href="javascript:void(0)"><img src="frame2.png" NAME="frame" WIDTH=140 HEIGHT=160 BORDER=0 onmouseover="this.src='frame.png'" onmouseout="this.src='frame2.png'" ;
onmousedown="this.src='in.png'" onmouseup="this.src='out.png'" /></a>
</div>

  <div id="four">
<a href="javascript:void(0)"><img src="frame2.png" NAME="frame" WIDTH=140 HEIGHT=160 BORDER=0 onmouseover="this.src='frame.png'" onmouseout="this.src='frame2.png'" ;
onmousedown="this.src='in.png'" onmouseup="this.src='out.png'" /></a>
</div>

  <div id="jack">
<a href="javascript:void(0)"><img src="frame2.png" NAME="frame" WIDTH=140 HEIGHT=160 BORDER=0 onmouseover="this.src='frame.png'" onmouseout="this.src='frame2.png'" ;
onmousedown="this.src='in.png'" onmouseup="this.src='out.png'" /></a>
</div>

  <div id="queen">
<a href="javascript:void(0)"><img src="frame2.png" NAME="frame" WIDTH=140 HEIGHT=160 BORDER=0 onmouseover="this.src='frame.png'" onmouseout="this.src='frame2.png'" ;
onmousedown="this.src='in.png'" onmouseup="this.src='out.png'" /></a>
</div>

  <div id="king">
<a href="javascript:void(0)"><img src="frame2.png" NAME="frame" WIDTH=140 HEIGHT=160 BORDER=0 onmouseover="this.src='frame.png'" onmouseout="this.src='frame2.png'" ;
onmousedown="this.src='in.png'" onmouseup="this.src='out.png'" /></a>
</div>

  <div id="seven">
<a href="javascript:void(0)"><img src="frame2.png" NAME="frame" WIDTH=140 HEIGHT=160 BORDER=0 onmouseover="this.src='frame.png'" onmouseout="this.src='frame2.png'" ;
onmousedown="this.src='in.png'" onmouseup="this.src='out.png'" /></a>
</div>

  <div id="six">
<a href="javascript:void(0)"><img src="frame2.png" NAME="frame" WIDTH=140 HEIGHT=160 BORDER=0 onmouseover="this.src='frame.png'" onmouseout="this.src='frame2.png'" ;
onmousedown="this.src='in.png'" onmouseup="this.src='out.png'" /></a>
</div>

  <div id="five">
<a href="javascript:void(0)"><img src="frame2.png" NAME="frame" WIDTH=140 HEIGHT=160 BORDER=0 onmouseover="this.src='frame.png'" onmouseout="this.src='frame2.png'" ;
onmousedown="this.src='in.png'" onmouseup="this.src='out.png'" /></a>
</div>

  <div id="ace">
<a href="javascript:void(0)"><img src="frame2.png" NAME="frame" WIDTH=140 HEIGHT=160 BORDER=0 onmouseover="this.src='frame.png'" onmouseout="this.src='frame2.png'" ;
onmousedown="this.src='in.png'" onmouseup="this.src='out.png'" /></a>
</div>
</table>
<table>
<div id="txtArea"><input type="text"></div>
</table>
        
<script type="text/javascript">

var group1 = 0,group2 = 0,group3 = 0,group4 = 0,group5 = 0,group6 = 0,group7 = 0,group8 = 0,group9 = 0,group10 = 0,group11 = 0,group12 = 0,group13 = 0;

var imgArray = ["aceclub.png", "aceheart.png", "acespade.png", "acediam.png", "twoclub.png", "twoheart.png", "twospade.png", "twodiam.png",
             "threeclub.png", "threeheart.png", "threespade.png", "threediam.png", "fourclub.png", "fourheart.png", "fourspade.png", "fourdiam.png", 
             "fiveclub.png", "fiveheart.png", "fivespade.png", "fivediam.png", "sixclub.png", "sixheart.png", "sixspade.png", "sixdiam.png", 
             "sevenclub.png", "sevenheart.png", "sevenspade.png", "sevendiam.png", "eightclub.png", "eightheart.png", "eightspade.png", "eightdiam.png", 
             "nineclub.png", "nineheart.png", "ninespade.png", "ninediam.png", "tenclub.png", "tenheart.png", "tenspade.png", "tendiam.png",
             "jackclub.png", "jackheart.png", "jackspade.png", "jackdiam.png", "queenclub.png", "queenheart.png", "queenspade.png", "queendiam.png",
             "kingclub.png", "kingheart.png", "kingspade.png", "kingdiam.png"];
           //make a clone of imgArray

var basePath = "///C:/Users/Dads/Desktop/game/";  // This is the file location of all the card images.

function imgRandom() {
var clone = imgArray.slice(0);
for (i = 0; i < 9; i++) {
        var i, rand, image;
        var shownImages = [];
var randIndex = Math.floor(Math.random() * clone.length);
var rand = clone[randIndex];
        image = new Image();
        image.src = basePath + rand;
        shownImages.push(rand);
//        console.log(shownImages[0])
        document.getElementById("guess").appendChild(image);
clone.splice(randIndex,1);

figureOdds()     //  -------------- Go To Function figureOdds and compareOdds, Put The Odds On The Screen ------------------------
compareOdds()
}

picAgain()                        //  =============   28 Game Turns - People Start To Interact Here   =================
function picAgain(limit) {
    var count = 0;
    function liveCount() {
        count += 1
        if (count <= 28) {    // There are a total of 28 turns of play

// ------------------- Display The Last 5 Seconds Before 10th Card ----------------------
function countdown() {
    var count = 8;
    var timerId = setInterval(function() {
        count--;
    if (count == 5){
    document.getElementById("aaa").style.display = 'block';
    document.getElementById("aaa").innerHTML = "5";
                      }
    if (count == 4){
    document.getElementById("aaa").innerHTML = "4";
                      }
    if (count == 3){
    document.getElementById("aaa").innerHTML = "3";
                      }
    if (count == 2){
    document.getElementById("aaa").innerHTML = "2";
                      }
    if (count == 1){
    document.getElementById("aaa").innerHTML = "1";
                      }
    if (count == 0){
    document.getElementById("aaa").innerHTML = "0";
    clearInterval(timerId);
    document.getElementById("aaa").style.display = 'none'; 
        }

    }, 1000);
}

countdown();
// ------------------ End Display Last 5 Seconds ----------------------

var randIndex = Math.floor(Math.random() * clone.length);
var rand = clone[randIndex];
        image = new Image();    // or new Image(144, 192);
        image.src = basePath + rand;
        shownImages.push(rand);
        document.getElementById("guess").appendChild(image);
clone.splice(randIndex,1);

// ==================================   Figure Odds For First Nine Cards   ==================================================

function figureOdd() {     //  This function is not named the same as figureOdds. I removed the 's' otherwise odds wouldn't work

               if (( rand == "aceclub.png") || ( rand == "aceheart.png") || ( rand == "acespade.png") || ( rand == "acediam.png"))
              {  group1 = group1 + 1; }

               else if (( rand == "twoclub.png") || ( rand == "twoheart.png") || ( rand == "twospade.png") || ( rand == "twodiam.png"))
              {  group2 = group2 + 1; }

               else if (( rand == "threeclub.png") || ( rand == "threeheart.png") || ( rand == "threespade.png") || ( rand == "threediam.png"))
              {  group3 = group3 + 1; }

               else if (( rand == "fourclub.png") || ( rand == "fourheart.png") || ( rand == "fourspade.png") || ( rand == "fourdiam.png"))
              {  group4 = group4 + 1; }

               else if (( rand == "fiveclub.png") || ( rand == "fiveheart.png") || ( rand == "fivespade.png") || ( rand == "fivediam.png"))
              {  group5 = group5 + 1; }

               else if (( rand == "sixclub.png") || ( rand == "sixheart.png") || ( rand == "sixspade.png") || ( rand == "sixdiam.png"))
              {  group6 = group6 + 1; }

               else if (( rand == "sevenclub.png") || ( rand == "sevenheart.png") || ( rand == "sevenspade.png") || ( rand == "sevendiam.png"))
              {  group7 = group7 + 1; }

               else if (( rand == "eightclub.png") || ( rand == "eightheart.png") || ( rand == "eightspade.png") || ( rand == "eightdiam.png"))
              {  group8 = group8 + 1; }

               else if (( rand == "nineclub.png") || ( rand == "nineheart.png") || ( rand == "ninespade.png") || ( rand == "ninediam.png"))
              {  group9 = group9 + 1; }

               else if (( rand == "tenclub.png") || ( rand == "tenheart.png") || ( rand == "tenspade.png") || ( rand == "tendiam.png"))
              {  group10 = group10 + 1; }

               else if (( rand == "jackclub.png") || ( rand == "jackheart.png") || ( rand == "jackspade.png") || ( rand == "jackdiam.png"))
              {  group11 = group11 + 1; }

               else if (( rand == "queenclub.png") || ( rand == "queenheart.png") || ( rand == "queenspade.png") || ( rand == "queendiam.png"))
              {  group12 = group12 + 1; }

               else if (( rand == "kingclub.png") || ( rand == "kingheart.png") || ( rand == "kingspade.png") || ( rand == "kingdiam.png"))
              {   group13 = group13 + 1; }

}

function compareOdd() {
// ----- Ace
var randomnumber=Math.floor(Math.random()*8+1)
             if (group1 == 0) {                //10:1
                document.getElementById("odds1").innerHTML = randomnumber + ":1";
                                  }

             if (group1 == 1) {                //14:1
                document.getElementById("odds1").innerHTML = randomnumber + ":1";
                                  }

             if (group1 == 2) {                //21:1
                document.getElementById("odds1").innerHTML = randomnumber + ":1";
                                  }

             if (group1 == 3) {                //43:1
                document.getElementById("odds1").innerHTML = randomnumber + ":1";
                                  }

             if (group1 == 4) {                //0:0
                document.getElementById("odds1").innerHTML = "0:0";
                                  }
// ----- Two
var randomnumber=Math.floor(Math.random()*13+1)
             if (group2 == 0) {                //10:1
                document.getElementById("odds2").innerHTML = randomnumber + ":1";
                                  }

             if (group2 == 1) {                //14:1
                document.getElementById("odds2").innerHTML = randomnumber + ":1";
                                  }

             if (group2 == 2) {                //21:1
                document.getElementById("odds2").innerHTML = randomnumber + ":1";
                                  }

             if (group2 == 3) {                //43:1
                document.getElementById("odds2").innerHTML = randomnumber + ":1";
                                  }

             if (group2 == 4) {                //0:0
                document.getElementById("odds2").innerHTML = "0:0";
                                  }
// ----- Three
var randomnumber=Math.floor(Math.random()*12+1)
             if (group3 == 0) {                //10:1
                document.getElementById("odds3").innerHTML = randomnumber + ":1";
                                  }

             if (group3 == 1) {                //14:1
                document.getElementById("odds3").innerHTML = randomnumber + ":1";
                                  }

             if (group3 == 2) {                //21:1
                document.getElementById("odds3").innerHTML = randomnumber + ":1";
                                  }

             if (group3 == 3) {                //43:1
                document.getElementById("odds3").innerHTML = randomnumber + ":1";
                                  }

             if (group3 == 4) {                //0:0
                document.getElementById("odds3").innerHTML = "0:0";
                                  }
// ----- Four
var randomnumber=Math.floor(Math.random()*18+1)
             if (group4 == 0) {                //10:1
                document.getElementById("odds4").innerHTML = randomnumber + ":1";
                                  }

             if (group4 == 1) {                //14:1
                document.getElementById("odds4").innerHTML = randomnumber + ":1";
                                  }

             if (group4 == 2) {                //21:1
                document.getElementById("odds4").innerHTML = randomnumber + ":1";
                                  }

             if (group4 == 3) {                //43:1
                document.getElementById("odds4").innerHTML = randomnumber + ":1";
                                  }

             if (group4 == 4) {                //0:0
                document.getElementById("odds4").innerHTML = randomnumber + ":1";
                                  }
// ----- Five
var randomnumber=Math.floor(Math.random()*21+1)
             if (group5 == 0) {                //10:1
                document.getElementById("odds5").innerHTML = "6:1";
                                  }

             if (group5 == 1) {                //14:1
                document.getElementById("odds5").innerHTML = randomnumber + ":1";
                                  }

             if (group5 == 2) {                //21:1
                document.getElementById("odds5").innerHTML = randomnumber + ":1";
                                  }

             if (group5 == 3) {                //43:1
                document.getElementById("odds5").innerHTML = randomnumber + ":1";
                                  }

             if (group5 == 4) {                //0:0
                document.getElementById("odds5").innerHTML = "0:0";
                                  }
// ----- Six
var randomnumber=Math.floor(Math.random()*17+1)
             if (group6 == 0) {                //10:1
                document.getElementById("odds6").innerHTML = randomnumber + ":1";
                                  }

             if (group6 == 1) {                //14:1
                document.getElementById("odds6").innerHTML = randomnumber + ":1";
                                  }

             if (group6 == 2) {                //21:1
                document.getElementById("odds6").innerHTML = randomnumber + ":1";
                                  }

             if (group6 == 3) {                //43:1
                document.getElementById("odds6").innerHTML = randomnumber + ":1";
                                  }

             if (group6 == 4) {                //0:0
                document.getElementById("odds6").innerHTML = "0:0";
                                  }
// ----- Seven
var randomnumber=Math.floor(Math.random()*26+1)
             if (group7 == 0) {                //10:1
                document.getElementById("odds7").innerHTML = randomnumber + ":1";
                                  }

             if (group7 == 1) {                //14:1
                document.getElementById("odds7").innerHTML = randomnumber + ":1";
                                  }

             if (group7 == 2) {                //21:1
                document.getElementById("odds7").innerHTML = randomnumber + ":1";
                                  }

             if (group7 == 3) {                //43:1
                document.getElementById("odds7").innerHTML = randomnumber + ":1";
                                  }

             if (group7 == 4) {                //0:0
                document.getElementById("odds7").innerHTML = "0:0";
                                  }
// ----- Eight
var randomnumber=Math.floor(Math.random()*28+1)
             if (group8 == 0) {                //10:1
                document.getElementById("odds8").innerHTML = randomnumber + ":1";
                                  }

             if (group8 == 1) {                //14:1
                document.getElementById("odds8").innerHTML = randomnumber + ":1";
                                  }

             if (group8 == 2) {                //21:1
                document.getElementById("odds8").innerHTML = randomnumber + ":1";
                                  }

             if (group8 == 3) {                //43:1
                document.getElementById("odds8").innerHTML = randomnumber + ":1";
                                  }

             if (group8 == 4) {                //0:0
                document.getElementById("odds8").innerHTML = "0:0";
                                  }
// ----- Nine
var randomnumber=Math.floor(Math.random()*32+1)
             if (group9 == 0) {                //10:1
                document.getElementById("odds9").innerHTML = randomnumber + ":1";
                                  }

             if (group9 == 1) {                //14:1
                document.getElementById("odds9").innerHTML = randomnumber + ":1";
                                  }

             if (group9 == 2) {                //21:1
                document.getElementById("odds9").innerHTML = randomnumber + ":1";
                                  }

             if (group9 == 3) {                //43:1
                document.getElementById("odds9").innerHTML = randomnumber + ":1";
                                  }

             if (group9 == 4) {                //0:0
                document.getElementById("odds9").innerHTML = "0:0";
                                  }
// ----- Ten
var randomnumber=Math.floor(Math.random()*23+1)
             if (group10 == 0) {                //10:1
                document.getElementById("odds10").innerHTML = randomnumber + ":1";
                                  }

             if (group10 == 1) {                //14:1
                document.getElementById("odds10").innerHTML = randomnumber + ":1";
                                  }

             if (group10 == 2) {                //21:1
                document.getElementById("odds10").innerHTML = randomnumber + ":1";
                                  }

             if (group10 == 3) {                //43:1
                document.getElementById("odds10").innerHTML = randomnumber + ":1";
                                  }

             if (group10 == 4) {                //0:0
                document.getElementById("odds10").innerHTML = "0:0";
                                  }
// ----- Jack
var randomnumber=Math.floor(Math.random()*17+1)
             if (group11 == 0) {                //10:1
                document.getElementById("oddsJ").innerHTML = randomnumber + ":1";
                                  }

             if (group11 == 1) {                //14:1
                document.getElementById("oddsJ").innerHTML = randomnumber + ":1";
                                  }

             if (group11 == 2) {                //21:1
                document.getElementById("oddsJ").innerHTML = randomnumber + ":1";
                                  }

             if (group11 == 3) {                //43:1
                document.getElementById("oddsJ").innerHTML = randomnumber + ":1";
                                  }

             if (group11 == 4) {                //0:0
                document.getElementById("oddsJ").innerHTML = "0:0";
                                  }
// ----- Queen
var randomnumber=Math.floor(Math.random()*19+1)
             if (group12 == 0) {                //10:1
                document.getElementById("oddsQ").innerHTML = randomnumber + ":1";
                                  }

             if (group12 == 1) {                //14:1
                document.getElementById("oddsQ").innerHTML = randomnumber + ":1";
                                  }

             if (group12 == 2) {                //21:1
                document.getElementById("oddsQ").innerHTML = randomnumber + ":1";
                                  }

             if (group12 == 3) {                //43:1
                document.getElementById("oddsQ").innerHTML = randomnumber + ":1";
                                  }

             if (group12 == 4) {                //0:0
                document.getElementById("oddsQ").innerHTML = "0:0";
                                  }
// ----- King
var randomnumber=Math.floor(Math.random()*12+1)
             if (group13 == 0) {                //10:1
                document.getElementById("oddsK").innerHTML = randomnumber + ":1";
                                  }

             if (group13 == 1) {                //14:1
                document.getElementById("oddsK").innerHTML = randomnumber + ":1";
                                  }

             if (group13 == 2) {                //21:1
                document.getElementById("oddsK").innerHTML = randomnumber + ":1";
                                  }

             if (group13 == 3) {                //43:1
                document.getElementById("oddsK").innerHTML = randomnumber + ":1";
                                  }

             if (group13 == 4) {                //0:0
                document.getElementById("oddsK").innerHTML = "0:0";
                                  }
}

figureOdd()
compareOdd()
// ==================================    END Figure Odds First Nine    =====================================================


        } else{
            clearInterval();
        }
    }

// ------------------- Display The Last 5 Seconds Before Next Card ----------------------
function countdown() {
    
    var aaa = document.getElementById("aaa")

    var count = 8;
    var timerId = setInterval(function() {
        count--;
    if (count == 5){
       aaa.style.display = 'block';
       aaa.style.position = "absolute";
       aaa.style.left = 670;
       aaa.style.top = 130;
       aaa.innerHTML = "5";
                      }
    if (count == 4){
    aaa.innerHTML = "4";
                      }
    if (count == 3){
    aaa.innerHTML = "3";
                      }
    if (count == 2){
    aaa.innerHTML = "2";
                      }
    if (count == 1){
    aaa.innerHTML = "1";
                      }
    if (count == 0){
    aaa.innerHTML = "0";
    clearInterval(timerId);
    aaa.style.display = 'none'; 
        }

    }, 1000);
}

countdown();
// ------------------ End Display Last 5 Seconds ----------------------

    var counter = setInterval(liveCount, 10000);

}


// ================================== This is the end of the code for each round of play  ==============================

// --------------------------------  Get Odds Here For First 9 Cards  --------------------------------------

function figureOdds() {

               if (( rand == "aceclub.png") || ( rand == "aceheart.png") || ( rand == "acespade.png") || ( rand == "acediam.png"))
              {  group1 = group1 + 1; }

               else if (( rand == "twoclub.png") || ( rand == "twoheart.png") || ( rand == "twospade.png") || ( rand == "twodiam.png"))
              {  group2 = group2 + 1; }

               else if (( rand == "threeclub.png") || ( rand == "threeheart.png") || ( rand == "threespade.png") || ( rand == "threediam.png"))
              {  group3 = group3 + 1; }

               else if (( rand == "fourclub.png") || ( rand == "fourheart.png") || ( rand == "fourspade.png") || ( rand == "fourdiam.png"))
              {  group4 = group4 + 1; }

               else if (( rand == "fiveclub.png") || ( rand == "fiveheart.png") || ( rand == "fivespade.png") || ( rand == "fivediam.png"))
              {  group5 = group5 + 1; }

               else if (( rand == "sixclub.png") || ( rand == "sixheart.png") || ( rand == "sixspade.png") || ( rand == "sixdiam.png"))
              {  group6 = group6 + 1; }

               else if (( rand == "sevenclub.png") || ( rand == "sevenheart.png") || ( rand == "sevenspade.png") || ( rand == "sevendiam.png"))
              {  group7 = group7 + 1; }

               else if (( rand == "eightclub.png") || ( rand == "eightheart.png") || ( rand == "eightspade.png") || ( rand == "eightdiam.png"))
              {  group8 = group8 + 1; }

               else if (( rand == "nineclub.png") || ( rand == "nineheart.png") || ( rand == "ninespade.png") || ( rand == "ninediam.png"))
              {  group9 = group9 + 1; }

               else if (( rand == "tenclub.png") || ( rand == "tenheart.png") || ( rand == "tenspade.png") || ( rand == "tendiam.png"))
              {  group10 = group10 + 1; }

               else if (( rand == "jackclub.png") || ( rand == "jackheart.png") || ( rand == "jackspade.png") || ( rand == "jackdiam.png"))
              {  group11 = group11 + 1; }

               else if (( rand == "queenclub.png") || ( rand == "queenheart.png") || ( rand == "queenspade.png") || ( rand == "queendiam.png"))
              {  group12 = group12 + 1; }

               else if (( rand == "kingclub.png") || ( rand == "kingheart.png") || ( rand == "kingspade.png") || ( rand == "kingdiam.png"))
              {   group13 = group13 + 1; }
}

function compareOdds() {
// ----- Ace
             if (group1 == 0) {                //10:1
                document.getElementById("odds1").innerHTML = "10:1";
                                  }

             if (group1 == 1) {                //14:1
                document.getElementById("odds1").innerHTML = "14:1";
                                  }

             if (group1 == 2) {                //21:1
                document.getElementById("odds1").innerHTML = "6:1";
                                  }

             if (group1 == 3) {                //43:1
                document.getElementById("odds1").innerHTML = "19:1";
                                  }

             if (group1 == 4) {                //0:0
                document.getElementById("odds1").innerHTML = "0:0";
                                  }
// ----- Two
             if (group2 == 0) {                //10:1
                document.getElementById("odds2").innerHTML = "21:1";
                                  }

             if (group2 == 1) {                //14:1
                document.getElementById("odds2").innerHTML = "14:1";
                                  }

             if (group2 == 2) {                //21:1
                document.getElementById("odds2").innerHTML = "17:1";
                                  }

             if (group2 == 3) {                //43:1
                document.getElementById("odds2").innerHTML = "5:1";
                                  }

             if (group2 == 4) {                //0:0
                document.getElementById("odds2").innerHTML = "0:0";
                                  }
// ----- Three
             if (group3 == 0) {                //10:1
                document.getElementById("odds3").innerHTML = "14:1";
                                  }

             if (group3 == 1) {                //14:1
                document.getElementById("odds3").innerHTML = "4:1";
                                  }

             if (group3 == 2) {                //21:1
                document.getElementById("odds3").innerHTML = "21:1";
                                  }

             if (group3 == 3) {                //43:1
                document.getElementById("odds3").innerHTML = "29:1";
                                  }

             if (group3 == 4) {                //0:0
                document.getElementById("odds3").innerHTML = "0:0";
                                  }
// ----- Four
             if (group4 == 0) {                //10:1
                document.getElementById("odds4").innerHTML = "9:1";
                                  }

             if (group4 == 1) {                //14:1
                document.getElementById("odds4").innerHTML = "14:1";
                                  }

             if (group4 == 2) {                //21:1
                document.getElementById("odds4").innerHTML = "9:1";
                                  }

             if (group4 == 3) {                //43:1
                document.getElementById("odds4").innerHTML = "27:1";
                                  }

             if (group4 == 4) {                //0:0
                document.getElementById("odds4").innerHTML = "0:0";
                                  }
// ----- Five
             if (group5 == 0) {                //10:1
                document.getElementById("odds5").innerHTML = "14:1";
                                  }

             if (group5 == 1) {                //14:1
                document.getElementById("odds5").innerHTML = "3:1";
                                  }

             if (group5 == 2) {                //21:1
                document.getElementById("odds5").innerHTML = "16:1";
                                  }

             if (group5 == 3) {                //43:1
                document.getElementById("odds5").innerHTML = "6:1";
                                  }

             if (group5 == 4) {                //0:0
                document.getElementById("odds5").innerHTML = "0:0";
                                  }
// ----- Six
             if (group6 == 0) {                //10:1
                document.getElementById("odds6").innerHTML = "6:1";
                                  }

             if (group6 == 1) {                //14:1
                document.getElementById("odds6").innerHTML = "14:1";
                                  }

             if (group6 == 2) {                //21:1
                document.getElementById("odds6").innerHTML = "25:1";
                                  }

             if (group6 == 3) {                //43:1
                document.getElementById("odds6").innerHTML = "7:1";
                                  }

             if (group6 == 4) {                //0:0
                document.getElementById("odds6").innerHTML = "0:0";
                                  }
// ----- Seven
             if (group7 == 0) {                //10:1
                document.getElementById("odds7").innerHTML = "8:1";
                                  }

             if (group7 == 1) {                //14:1
                document.getElementById("odds7").innerHTML = "14:1";
                                  }

             if (group7 == 2) {                //21:1
                document.getElementById("odds7").innerHTML = "21:1";
                                  }

             if (group7 == 3) {                //43:1
                document.getElementById("odds7").innerHTML = "16:1";
                                  }

             if (group7 == 4) {                //0:0
                document.getElementById("odds7").innerHTML = "0:0";
                                  }
// ----- Eight
             if (group8 == 0) {                //10:1
                document.getElementById("odds8").innerHTML = "7:1";
                                  }

             if (group8 == 1) {                //14:1
                document.getElementById("odds8").innerHTML = "14:1";
                                  }

             if (group8 == 2) {                //21:1
                document.getElementById("odds8").innerHTML = "17:1";
                                  }

             if (group8 == 3) {                //43:1
                document.getElementById("odds8").innerHTML = "3:1";
                                  }

             if (group8 == 4) {                //0:0
                document.getElementById("odds8").innerHTML = "0:0";
                                  }
// ----- Nine
             if (group9 == 0) {                //10:1
                document.getElementById("odds9").innerHTML = "1:1";
                                  }

             if (group9 == 1) {                //14:1
                document.getElementById("odds9").innerHTML = "14:1";
                                  }

             if (group9 == 2) {                //21:1
                document.getElementById("odds9").innerHTML = "9:1";
                                  }

             if (group9 == 3) {                //43:1
                document.getElementById("odds9").innerHTML = "21:1";
                                  }

             if (group9 == 4) {                //0:0
                document.getElementById("odds9").innerHTML = "0:0";
                                  }
// ----- Ten
             if (group10 == 0) {                //10:1
                document.getElementById("odds10").innerHTML = "2:1";
                                  }

             if (group10 == 1) {                //14:1
                document.getElementById("odds10").innerHTML = "14:1";
                                  }

             if (group10 == 2) {                //21:1
                document.getElementById("odds10").innerHTML = "11:1";
                                  }

             if (group10 == 3) {                //43:1
                document.getElementById("odds10").innerHTML = "10:1";
                                  }

             if (group10 == 4) {                //0:0
                document.getElementById("odds10").innerHTML = "0:0";
                                  }
// ----- Jack
             if (group11 == 0) {                //10:1
                document.getElementById("oddsJ").innerHTML = "11:1";
                                  }

             if (group11 == 1) {                //14:1
                document.getElementById("oddsJ").innerHTML = "17:1";
                                  }

             if (group11 == 2) {                //21:1
                document.getElementById("oddsJ").innerHTML = "2:1";
                                  }

             if (group11 == 3) {                //43:1
                document.getElementById("oddsJ").innerHTML = "6:1";
                                  }

             if (group11 == 4) {                //0:0
                document.getElementById("oddsJ").innerHTML = "0:0";
                                  }
// ----- Queen
             if (group12 == 0) {                //10:1
                document.getElementById("oddsQ").innerHTML = "9:1";
                                  }

             if (group12 == 1) {                //14:1
                document.getElementById("oddsQ").innerHTML = "14:1";
                                  }

             if (group12 == 2) {                //21:1
                document.getElementById("oddsQ").innerHTML = "12:1";
                                  }

             if (group12 == 3) {                //36:1
                document.getElementById("oddsQ").innerHTML = "8:1";
                                  }

             if (group12 == 4) {                //0:0
                document.getElementById("oddsQ").innerHTML = "0:0";
                                  }
// ----- King
             if (group13 == 0) {                //10:1
                document.getElementById("oddsK").innerHTML = "12:1";
                                  }

             if (group13 == 1) {                //14:1
                document.getElementById("oddsK").innerHTML = "5:1";
                                  }

             if (group13 == 2) {                //21:1
                document.getElementById("oddsK").innerHTML = "16:1";
                                  }

             if (group13 == 3) {                //43:1
                document.getElementById("oddsK").innerHTML = "26:1";
                                  }

             if (group13 == 4) {                //0:0
                document.getElementById("oddsK").innerHTML = "0:0";
                                  }
}

//            --------------- Finished Setting Odds For First 9 Cards ----------------
}  // This ends imgRandom

imgRandom()
        </script>
    </body>
</html>


Here's the css file ...
body {
      background-image:url("gametemplate2.png");
      background-repeat:no-repeat;
}

.position {            /* odds */
   float:left;
   color:#FFFFFF;
}

#guess img {       /*  cards  */
   width: 36px; 
   height: 48px;
   position: relative;
   top: 0px;
}

#aaa {              /* 5 sec countdown */
color:#FFFFFF;
position: absolute;
left:672px;
top:120px;
}

#ten {              /* box 10 */
color:#FFFFFF;
position: absolute;
left:140px;
top:145px;
}

#nine {              /* box 9 */
color:#FFFFFF;
position: absolute;
left:283px;
top:110px;
}

#eight {              /* box 8 */
color:#FFFFFF;
position: absolute;
left:426px;
top:158px;
}

#two {              /* box 2 */
color:#FFFFFF;
position: absolute;
left:781px;
top:158px;
}

#three {              /* box 3 */
color:#FFFFFF;
position: absolute;
left:933px;
top:110px;
}

#four {              /* box 4 */
color:#FFFFFF;
position: absolute;
left:1083px;
top:145px;
}

#jack {              /* box J */
color:#FFFFFF;
position: absolute;
left:137px;
top:330px;
}

#queen {              /* box Q */
color:#FFFFFF;
position: absolute;
left:283px;
top:367px;
}

#king {              /* box K */
color:#FFFFFF;
position: absolute;
left:426px;
top:320px;
}

#seven {              /* box 7 */
color:#FFFFFF;
position: absolute;
left:781px;
top:320px;
}

#six {              /* box 6 */
color:#FFFFFF;
position: absolute;
left:933px;
top:367px;
}

#five {              /* box 5 */
color:#FFFFFF;
position: absolute;
left:1083px;
top:330px;
}

#ace {              /* box A */
color:#FFFFFF;
position: absolute;
left:600px;
top:234px;
}

#txtArea {         /* wager entry */
left:790px;
top:420px
}


Is everything okay now? Any ideas now about how I can get the onclick to work with my text field. I know this code below is wrong but I just want to show you I'm trying and trying, lol.
onclick=<div id="txtArea"><input type="text"></div>


This post has been edited by EdNolan: 18 November 2013 - 04:59 PM

Was This Post Helpful? 0
  • +
  • -

#12 EdNolan  Icon User is offline

  • D.I.C Regular

Reputation: 5
  • View blog
  • Posts: 409
  • Joined: 22-September 13

Re: onmousedown: I need a textfield to display as well as image/button

Posted 18 November 2013 - 05:24 PM

Is this correct?
  <div id="ten">
<a href="javascript:void(0)"><img src="frame2.png" NAME="frame" WIDTH=140 HEIGHT=160 BORDER=0 onmouseover="this.src='frame.png'" onmouseout="this.src='frame2.png'" ;
onmousedown="this.src='in.png'" onmouseup="this.src='out.png'" 
onclick = wager();
if (captureEvents) captureEvents(Event.CLICK);/></a>
</div>


function wager() {
        document.getElementById("txtArea").appendChild(text);
}


I don't know...
Was This Post Helpful? 0
  • +
  • -

#13 Atli  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 3730
  • View blog
  • Posts: 6,017
  • Joined: 08-June 10

Re: onmousedown: I need a textfield to display as well as image/button

Posted 18 November 2013 - 05:40 PM

View PostEdNolan, on 18 November 2013 - 11:54 PM, said:

I believe everything is separated now.

No, it's not. You separated the CSS into a file, but you still have Javascript in there.

These are three separate things: HTML, CSS and Javascript. Each should be in their own files, the CSS and Javascript files loaded into the HTML through <link> and <script> files. - Maybe this simple example will help.

Consider this HTML/CSS/JS infused document:
<!DOCTYPE HTML>
<html>
    <head>
        <title>Separation Example</title>
        <meta charset="UTF-8">
        <style>
            body {
                font-size: 0.95em;
                font-family: Verdana, Arial, sans;
            }
            #myLink {
                color: blue;
                cursor: pointer;
            }
            #myLink:hover {
                color: red;
            }
        </style>
    </head>
    <body>
        <p>
            <a id="myLink">Do Stuff</a>
        </p>
        
        <script>
            window.onload = function() {
                var link = document.getElementById("myLink");
                link.onclick = function() {
                    alert("Doing stuff!");
                }
            }
        </script>
    </body>
</html>



The first step to fixing this up is to take the CSS and put it into it's own file - lets call it "example.css" - and then <link> to it in the HTML:
<!DOCTYPE HTML>
<html>
    <head>
        <title>Separation Example</title>
        <meta charset="UTF-8">
        <link rel="stylesheet" type="text/css" href="styles.css">
    </head>
    <body>
        <p>
            <a id="myLink">Do Stuff</a>
        </p>
        
        <script>
            window.onload = function() {
                var link = document.getElementById("myLink");
                link.onclick = function() {
                    alert("Doing stuff!");
                }
            }
        </script>
    </body>
</html>



Excellent. First problem solved. Not on to the second problem: Move the Javascript code into it's own file as well - lets call it "example.js" - and include that using a <script src="">:
<!DOCTYPE HTML>
<html>
    <head>
        <title>Separation Example</title>
        <meta charset="UTF-8">
        <link rel="stylesheet" type="text/css" href="example.css">
    </head>
    <body>
        <p>
            <a id="myLink">Do Stuff</a>
        </p>
        
        <script type="text/javascript" src="example.js">
    </body>
</html>


And voila: It's now completely separate. No CSS OR Javascript in the HTML.

EdNolan said:

Is this correct?

I don't know...

No it's not. You won't know what is and isn't correct until you actually study what is right. Read the articles I linked to in my last post! Until you do, you're just flailing in the wind here.
Was This Post Helpful? 3
  • +
  • -

#14 laytonsdad  Icon User is online

  • Cheese and Sprinkles
  • member icon

Reputation: 447
  • View blog
  • Posts: 1,931
  • Joined: 30-April 10

Re: onmousedown: I need a textfield to display as well as image/button

Posted 18 November 2013 - 05:46 PM

Please do some reading on addEventListener Then add them to your Javascript script(s) instead of your html event handlers.

Atli said:

You need to study Javascript events. I suggest reading the series about them on Quirksmode, starting with this article: Introduction to Events. (It's a series; each article leads you to the next one in the list!)

Specifically, you should study the differences between the early and traditional models. You would also do well to understand the more modern W3C model. - The W3C model is what you should be using today, over both the early and traditional models.

Understand that doing onclick="doStuff();" in HTML is the very oldest, and most obsolete, method of setting event handlers. It should be avoided!

Was This Post Helpful? 1
  • +
  • -

#15 EdNolan  Icon User is offline

  • D.I.C Regular

Reputation: 5
  • View blog
  • Posts: 409
  • Joined: 22-September 13

Re: onmousedown: I need a textfield to display as well as image/button

Posted 18 November 2013 - 06:11 PM

3 Files, I am so sorry guys. Thanks for an even better explanation. I'll get right on this.
>>>>>>>>>>>>>>>>These are three separate things: HTML, CSS and Javascript. Each should be in their own files.<<<<<<<<<<
On a happy note, I almost have it working correctly ... css
#textArea {         /* wager entry */
position: absolute;
left:813px;
top:590px;
resize: none;
}


HTML
  <div id="ten">
<a href="javascript:void(0)"><img src="frame2.png" NAME="frame" WIDTH=140 HEIGHT=160 BORDER=0 onmouseover="this.src='frame.png'" onmouseout="this.src='frame2.png'" ;
onmousedown="this.src='in.png'" onmouseup="this.src='out.png'" 
onclick = wager();
if (captureEvents) captureEvents(Event.CLICK);/></a>
</div>
<table>
<div id="textArea"><textarea name="textarea" rows="1" cols="7">Wager</textarea></div>
</table>


Javascript
function wager() {
        document.getElementById("txtArea").style.display='block';
}


I just wanted to show you I am still working on it. Now I will go and separate the html from the javascript. I know I am going to have another problem, and that is, I believe you want me to pull out the style from the html as well too and put it into the css right? I might wait on that part if it's okay with you. It's getting late and I might have to wait till Tuesday, but I will get the 3 files separated tonight, k?

View Postlaytonsdad, on 18 November 2013 - 05:46 PM, said:

Please do some reading on addEventListener Then add them to your Javascript script(s) instead of your html event handlers.

I will, promise !!! Most likely after I fix the 3 files, latest Tuesday for sure!
Was This Post Helpful? 0
  • +
  • -

  • (4 Pages)
  • +
  • 1
  • 2
  • 3
  • Last »