JavaScript

Question

Cant get my function to work and add the value of the button to the text field when clicked by user.

HTML

<form name="testing" action="test.php" method="get">Chords:
<textarea name="field"></textarea>
<input type="button" value="G" onClick="addToField('G');">
<input type="button" value="C" onClick="addToField('C');">
<input type="button" value="Am" onClick="addToField('Am');">
<input type="button" value="F" onClick="addToField('F');">

<script language="javascript" type="text/javascript">
    function addToField(crd){
        document.testing.field.value += crd;
    }
</script>

Really stuck trying to understand whats wrong here.

Hope this shows what I am trying to achieve: https://jsfiddle.net/034hyjo2/6/

durbnpoisn · Accepted Answer · 2015-10-02 16:09:20Z

2

You're accessing the object incorrectly

<script language="javascript" type="text/javascript">
    function addToField(crd){
        document.getElementByName("testing").value += crd;
    }
</script>

Or, give the element an ID and use getElementByID("testing").value. I usually find that works better anyway...

answered Oct 2, 2015 at 16:09

durbnpoisn

4,6792 gold badges19 silver badges30 bronze badges

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

Comments

TbWill4321 · Accepted Answer · 2015-10-02 16:11:14Z

2

If you're just getting it in the fiddle, it works by putting the script tag above your HTML:

<script>
    var addToField = function(c) {
        document.testing.field.value += c;
    };
</script>
<form name="testing" action="test.php" method="get">Chords:
    <textarea name="field"> </textarea>
    <input type="button" value="G" onClick="addToField('G');">
    <input type="button" value="C" onClick="addToField('C');">
    <input type="button" value="Am" onClick="addToField('Am');">
    <input type="button" value="F" onClick="addToField('F');">
</form>

answered Oct 2, 2015 at 16:11

TbWill4321

8,6863 gold badges30 silver badges25 bronze badges

Comments

Hugo Yates · Accepted Answer · 2015-10-02 16:21:47Z

0

Your JSFiddle is way wrong. You're question here is better. You want to be using document.getElementById('field').value += crd; instead of document.testing.field.value += crd;

try this:

<form name="testing" action="test.php" method="get">Chords:
    <textarea id="field" name="field"> </textarea> ---note the addition of the ID parameter
    <input type="button" value="G" onClick="AddToField('G');">
    <input type="button" value="C" onClick="AddToField('C');">
    <input type="button" value="Am" onClick="AddToField('Am');">
    <input type="button" value="F" onClick="AddToField('F');">
</form>

<script>
function AddToField(c) {
    document.getElementById('field').value += c;
};
</script>

Also functions shouldn't be camelCase but Pascal case ;)

answered Oct 2, 2015 at 16:21

Hugo Yates

2,1112 gold badges27 silver badges25 bronze badges

1 Comment

B.Ahern Over a year ago

Thanks Hugo, big help!

Collectives™ on Stack Overflow

JavaScript - Trying to add value to text field by clicking button

HTML

JavaScript

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

HTML

JavaScript

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related