Changing text input using buttons

Question

I'm trying to create a function so that when one of my buttons is pressed the value of the text input changes to the value of the button pressed.

<div id="viewer">
<h1>
<input type="text" id="Screen" maxlength="8" value="0"/>
</h1>

<h2>
<button type="button" value="1" id="1">1</button>
<button type="button" value="2" id="2">2</button>
</h2>
</div>

This is the function I am trying to use but am going wrong somewhere:

$(document).ready(function(){

$("button").click(function(){

   var $val = $("#Display").val();
    alert($val);
       onclick="sevenClick()";

});
});
});

Drew Gaynor · Accepted Answer · 2014-12-19 13:45:06Z

1

$(document).ready(function() {
    $('button').click(function() {
        var test = $(this).attr('value');
        $('#Screen').val(test);
    });
});

edited Dec 19, 2014 at 13:45

Drew Gaynor

8,4825 gold badges42 silver badges53 bronze badges

answered Dec 16, 2014 at 16:06

Katyoshah

12910 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Katyoshah Over a year ago

sorry i had to edit it a couple of times, some typing mistakes, try it it works :)

Simon H · Accepted Answer · 2014-12-16 16:03:41Z

0

I think you changed an ID and need to change a few other things

$(document).ready(function() {

  $("button").click(function() {

    var val = $(this).val()
    $("#Screen").val(val);
    alert(val);
    onclick = "sevenClick()";
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="viewer">
<h1>
<input type="text" id="Screen" maxlength="8" value="0"/>
</h1>

<h2>
<button type="button" value="1" id="1">1</button>
<button type="button" value="2" id="2">2</button>
</h2>
</div>

answered Dec 16, 2014 at 16:03

Simon H

21.2k14 gold badges84 silver badges144 bronze badges

Comments

DaniP · Accepted Answer · 2014-12-16 16:09:05Z

0

Use this to keep the actual button value:

$(document).ready(function() {
  $("button").click(function() {
    var $val = $(this).val();
    //alert($val);
    $('#Screen').val($val);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="viewer">
  <h1>
<input type="text" id="Screen" maxlength="8" value="0"/>
</h1>

  <h2>
<button type="button" value="1" id="1">1</button>
<button type="button" value="2" id="2">2</button>
</h2>
</div>

answered Dec 16, 2014 at 16:09

DaniP

38.3k9 gold badges68 silver badges74 bronze badges

Comments

Drew Gaynor · Accepted Answer · 2014-12-19 13:46:32Z

0

Simply get the value of button and set it to the input box

$(document).ready(function() {
    $("button").click(function() {
        var butVal = $(this).val(); //get current button value here 
        $("#Screen").text(butVal); // set button value to the textbox
    });
});

edited Dec 19, 2014 at 13:46

Drew Gaynor

8,4825 gold badges42 silver badges53 bronze badges

answered Dec 16, 2014 at 16:09

Vikrant Vir Bhalla

2991 silver badge11 bronze badges

Collectives™ on Stack Overflow

Changing text input using buttons

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related