Change input value onclick button - pure javascript or jQuery

Question

I have two buttons and if I click on some button I need to change value in input text and change total price  product price   value of button - 2 or 4 Qty      I know that it s simple but I m not good in javascript or jQuery  Answer in jsfiddle would be best  My jsfiddle is here http   jsfiddle net J7m7m 1   My simple code   Product price   500  lt br gt  Total price   500  lt br gt   lt input type  button  onclick  change    value  2 amp  x00A Qty  gt   lt input type  button  value  4 amp  x00A Qty  gt   lt br gt  Total  lt input type  text  id  count  value  1  gt

User · Answer

My Attempt   JsFiddle   Javascript    document  ready function              buttons input type button    on  click   function              var qty     this  data  quantity            var price       totalPrice   text                 count   val price   qty                 Html    Product price  500  lt br gt Total price    lt span id  totalPrice  gt 500 lt  span gt   lt br gt   lt div id  buttons  gt       lt input id  qty2  type  button  data-quantity  2  value  2 amp  x00A Qty  gt       lt input id  qty2  type  button  class  mnozstvi sleva  data-quantity  4  value  4 amp  x00A Qty  gt   lt  div gt   lt br gt Total  lt input type  text  id  count  value  1  gt

User · Answer

Another simple solution for this case using jQuery  Keep in mind it s not a good practice to use inline javascript   JsFiddle  I ve added IDs to html on the total price and on the buttons  Here is the jQuery       two   click function            count   val  2            total   text  Product price   1000             four   click function            count   val  4            total   text  Product price   2000

User · Answer

And here is the non jQuery answer   Fiddle  http   jsfiddle net J7m7m 7   function changeText value         document getElementById  count   value   500   value         HTML slight modification   Product price   500  lt br gt  Total price   500  lt br gt   lt input type  button  onclick  changeText 2   value  2 amp  x00A Qty  gt   lt input type  button  class  mnozstvi sleva  value  4 amp  x00A Qty  onClick  changeText 4   gt   lt br gt  Total  lt input type  text  id  count  value  1   gt    EDIT  It is very clear that this is a non-desired way as pointed out below  I had it coming   So in essence  this is how you would do it in plain old javascript  Most people would suggest you to use jQuery  other answer has the jQuery version  for good reason

User · Answer

Try This Simple javascript  -   x000D   x000D    lt  DOCTYPE html gt  x000D       lt html gt  x000D          lt script gt  x000D            function change value   x000D            document getElementById  count   value  500 value  x000D            document getElementById  totalValue   innerHTML   Total price       500 value  x000D              x000D             x000D          lt  script gt  x000D          lt body gt  x000D            Product price   500 x000D             lt br gt  x000D             lt div id   totalValue  gt Total price   500  lt  div gt  x000D             lt br gt  x000D             lt input type  button  onclick  change 2   value  2 amp  x00A Qty  gt  x000D             lt input type  button  onclick  change 4   value  4 amp  x00A Qty  gt  x000D             lt br gt  x000D            Total  lt input type  text  id  count  value  1  gt  x000D          lt  body gt  x000D       lt  html gt  x000D   x000D   x000D    Hope this will help you

User · Answer

using html5 data attribute     try this  Html  Product price    lt span id  product price  gt 500 lt  span gt    lt br gt Total price   500  lt br gt   lt input type  button  data-quantity  2  value  2 amp  x00A Qty  gt   lt input type  button  data-quantity  4  class  mnozstvi sleva  value  4 amp  x00A Qty  gt   lt br gt Total  lt input type  text  id  count  value  1  gt    JS    function       input button   click function            count   val   this  data  quantity         product price   text               fiddle here

User · Answer

This will work fine for you      lt  DOCTYPE html gt       lt html gt       lt head gt       lt script src  https   ajax googleapis com ajax libs jquery 3 3 1 jquery min js  gt  lt  script gt        lt script gt      function myfun          document  ready function                 select   click          function            var data     select   val                    disp   val data                                                      lt  script gt       lt  head gt       lt body gt       lt p gt id  lt input type  text  name  user  id  disp  gt  lt  p gt       lt select id  select  onclick  myfun    gt       lt option name  1 value  one  gt 1 lt  option gt       lt option name  2 value  two  gt 2 lt  option gt       lt option name  3 value  three  gt  lt  option gt       lt  select gt       lt  body gt       lt  html gt

[javascript] Change input value onclick button - pure javascript or jQuery

Examples related to javascript

Examples related to jquery

Examples related to button

Examples related to input

Examples related to onclick