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

  • (4 Pages)
  • +
  • « First
  • 2
  • 3
  • 4

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

#46 laytonsdad  Icon User is offline

  • Cheese and Sprinkles
  • member icon

Reputation: 440
  • View blog
  • Posts: 1,867
  • Joined: 30-April 10

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

Posted 25 November 2013 - 08:30 PM

This:
window.onclick = listen(); // Event is on the window not the ace



is calling this:

function listen() {
      var img = document.getElementById('ace');
      img.addEventListener("click", function (){     // THIS WORKS
        document.getElementById("textbox").style.display = 'block';
       });
      }

Was This Post Helpful? 1
  • +
  • -

#47 EdNolan  Icon User is offline

  • D.I.C Regular

Reputation: 3
  • View blog
  • Posts: 327
  • Joined: 22-September 13

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

Posted 25 November 2013 - 09:19 PM

Okay I will look at what you just posted. I found this though too.
window.onload=function()
{
	document.getElementById("img0").onmouseover = shellFunction(1, "example");
	document.getElementById("img1").onmouseover = shellFunction(2, "text");
	document.getElementById("img2").onmouseover = shellFunction(3, "othertext);
};

function shellFunction(num, name)
{
	return function(){alert(num + " " + name)};
}


This post has been edited by EdNolan: 25 November 2013 - 09:21 PM

Was This Post Helpful? 0
  • +
  • -

#48 EdNolan  Icon User is offline

  • D.I.C Regular

Reputation: 3
  • View blog
  • Posts: 327
  • Joined: 22-September 13

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

Posted 25 November 2013 - 09:30 PM

View Postlaytonsdad, on 25 November 2013 - 08:30 PM, said:

This:
window.onclick = listen(); // Event is on the window not the ace



is calling this:

function listen() {
      var img = document.getElementById('ace');
      img.addEventListener("click", function (){     // THIS WORKS
        document.getElementById("textbox").style.display = 'block';
       });
      }


That's what I originally needed. I needed the textbox to appear when a number was clicked on. Since that works now, I am trying to get the rest of the eventlisteners to work inside javascript as you suggested so I can remove them from the html file. Eventually I will add the other numbers to listen() so the onclick works for all numbers. I'm confused about what you're trying to say here?
Was This Post Helpful? 0
  • +
  • -

#49 laytonsdad  Icon User is offline

  • Cheese and Sprinkles
  • member icon

Reputation: 440
  • View blog
  • Posts: 1,867
  • Joined: 30-April 10

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

Posted 26 November 2013 - 10:34 AM

You don't want your click event on the window, this will fire the event anywhere you click in the window.
Was This Post Helpful? 1
  • +
  • -

#50 EdNolan  Icon User is offline

  • D.I.C Regular

Reputation: 3
  • View blog
  • Posts: 327
  • Joined: 22-September 13

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

Posted 26 November 2013 - 09:03 PM

I tested window.onload = listen();and clicked in many places and found that the textbox only displays when I click on a number. It works just like I need. Inside that same function I added a mouseover and mouseout for 'ace', and they also work, as well as the click event. However when I added a mouseover and mouseout for another number within listen() the ace mouseover and mouseout stopped working while the new second number is working. Is my cache messed up?
        <img src="images/frame2.png" id='ace' />
        <img src="images/frame2.png" id='two' />


      function updateMoney() {
        document.getElementById("money").innerHTML = money;
      }
      function updateStatus() {
        document.getElementById("status").innerHTML = "Click a Number To Wager";
      }

// Event Click Listeners Below

      function listen() {
      var img = document.getElementById('ace');
      img.addEventListener("click", function (){     // THIS WORKS
        document.getElementById("textbox").style.display = 'block';
       });
      var img = document.getElementById('ace');
      img.addEventListener("mouseover", function (){     // THIS WORKS
        document.getElementById("ace").src = "images/frame.png";
       });
      var img = document.getElementById('ace');
      img.addEventListener("mouseout", function (){     // THIS WORKS
        document.getElementById("ace").src = "images/frame2.png";
       });
      var img = document.getElementById('two');
      img.addEventListener("click", function (){     // THIS WORKS
        document.getElementById("textbox").style.display = 'block';
       });
      var img = document.getElementById('three');
      img.addEventListener("click", function (){     // THIS WORKS
        document.getElementById("textbox").style.display = 'block';
       });
      var img = document.getElementById('four');
      img.addEventListener("click", function (){     // THIS WORKS
        document.getElementById("textbox").style.display = 'block';
       });


Was This Post Helpful? 0
  • +
  • -

#51 EdNolan  Icon User is offline

  • D.I.C Regular

Reputation: 3
  • View blog
  • Posts: 327
  • Joined: 22-September 13

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

Posted 28 November 2013 - 09:22 AM

RESOLVED
    <body onload="updateMoney(); click(); updown()">
    <div id="form">
    <form action="#" method="get">
    <input type="number" id="textbox" name="wager" value="0" min="0" max="5"/>
    <p>Money: $<span id="money"></span><br>
    Status: <span id="status"></span></p>
    </form>
    </div>


      function updateMoney() {
        document.getElementById("money").innerHTML = money;
      }
      function click() {
      var img = document.getElementById('ace');
      img.addEventListener("click", function (){
        document.getElementById("textbox").style.display = 'block';
       });
      var img = document.getElementById('two');
      img.addEventListener("click", function (){
        document.getElementById("textbox").style.display = 'block';
       });
 }
      function updown() {
      var img = document.getElementById('ace');
      img.addEventListener("mouseover", function (){
        document.getElementById("ace").src = "images/frame.png";
       });
      var img = document.getElementById('ace');
      img.addEventListener("mouseout", function (){
        document.getElementById("ace").src = "images/frame2.png";
       });
      var img = document.getElementById('two');
      img.addEventListener("mouseover", function (){
        document.getElementById("two").src = "images/frame.png";
       });
      var img = document.getElementById('two');
      img.addEventListener("mouseout", function (){
        document.getElementById("two").src = "images/frame2.png";
       });
  }
#textbox {         /* wager entry */
position: absolute;
left:813px;
top:590px;
resize: none;
display: none;
}
#ace {              /* box A */
color:#FFFFFF;
position: absolute;
left:611px;
top:246px;
height:140px;
width:120px;
}
#two {              /* box 2 */
color:#FFFFFF;
position: absolute;
left:791px;
top:173px;
height:140px;
width:120px;
}
p {           /* money */
color:#FFFFFF;
position: absolute;
left:550px;
top:560px;
}


Was This Post Helpful? 0
  • +
  • -

  • (4 Pages)
  • +
  • « First
  • 2
  • 3
  • 4