Have Geek Brain

Change the amount of textbox, change image on hover with jQuery / Javascript

I would like to do 2 things in jQuery or Javascript,

  • Change the quantity in the text box with the up and down arrows. The default is 1 and I want to increase it by 1 when the user clicks the up arrow and vice versa.

  • Is it possible to change the arrow to a different image (color) when the mouse is hovering over it?

Thanks.

+1


a source to share


2 answers


1.)

<script>
function increase() {
  var textbox = document.getElementById('textbox');
  textbox.value = parseInt(textbox.value) + 1;
}
</script>

<input id="textbox" name="textbox" type="text" value="1">
<a href="#" onclick="increase()">up</a>


2.) Should be down with CSS: hover

0


a source


I would recommend using the click()

command to change the value in the textbox and the hover()

command to change the arrow to a different image (color)

for example to increment



$('#myImg')
    .click( function() { 
                           var num = $('#myTextbox').text(); 
                           if (!isNaN(num))
                               $('#myTextbox').text(parseInt(num,10) + 1);
    .hover(
            function() { $(this).css('background-image','over.jpg'), //over 
            function() { $(this).css('background-image','out.jpg') // out
          )
+1


a source






More articles:


All Articles