CODEWITHSUNDEEP
javascriptjqueryhtmltextarea
Steve
Steve

Reputation: 43

How do I set these buttons 'id' values to append in the textarea?

I've been given a code which contains wingding characters that relate to a letter different from its normal attached key, and I'm trying to create a program that deciphers them. Unfortunately I can't work out how to add to the textarea, only overwrite the character already there which isn't very helpful to me.

I'm a complete beginner here, especially to Jscript, so I hope that makes sense. Can anyone please help?

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</head>
<body>
<br>
<!-- PLCKFBGDHMOERJAQNXYIZVXSUT cypher alphabet-->
<input type="submit" style="font-family:'wingdings'" value="P" style="width:100%"  id="A" />
<input type="submit" style="font-family:'wingdings'" value="L" style="width:100%"  id="B" />
<input type="submit" style="font-family:'wingdings'" value="C" style="width:100%"  id="C" />
<input type="submit" style="font-family:'wingdings'" value="K" style="width:100%"  id="D" />
<input type="submit" style="font-family:'wingdings'" value="F" style="width:100%"  id="E" />
<input type="submit" style="font-family:'wingdings'" value="B" style="width:100%"  id="F" />
<input type="submit" style="font-family:'wingdings'" value="G" style="width:100%"  id="G" />
<br>
<br>
<input type="submit" style="font-family:'wingdings'" value="D" style="width:100%"  id="H" />
<input type="submit" style="font-family:'wingdings'" value="H" style="width:100%"  id="I" />
<input type="submit" style="font-family:'wingdings'" value="M" style="width:100%"  id="J" />
<input type="submit" style="font-family:'wingdings'" value="O" style="width:100%"  id="K" />
<input type="submit" style="font-family:'wingdings'" value="E" style="width:100%"  id="L" />
<input type="submit" style="font-family:'wingdings'" value="R" style="width:100%"  id="M" />
<input type="submit" style="font-family:'wingdings'" value="J" style="width:100%"  id="N" />
<br>
<br>
<!-- I'll add the rest later -->

<textarea id="txtarea" name="txtarea"></textarea>

<script>

// INDIVIDUAL LETTER INPUT CODES
$(document).ready(function(){
  $("#A").click(function(){
      $('#txtarea').html('A');
});
});

$(document).ready(function(){
  $("#B").click(function(){
      $('#txtarea').html('B');
});
});

$(document).ready(function(){
  $("#C").click(function(){
      $('#txtarea').html('C');
});
});
$(document).ready(function(){
  $("#D").click(function(){
      $('#txtarea').html('D');
});
});
$(document).ready(function(){
  $("#E").click(function(){
      $('#txtarea').html('E');
});
});
$(document).ready(function(){
  $("#F").click(function(){
      $('#txtarea').html('F');
});
});
$(document).ready(function(){
  $("#G").click(function(){
      $('#txtarea').html('G');
});
});
$(document).ready(function(){
  $("#H").click(function(){
      $('#txtarea').html('H');
});
});
$(document).ready(function(){
  $("#I").click(function(){
      $('#txtarea').html('I');
});
});
$(document).ready(function(){
  $("#J").click(function(){
      $('#txtarea').html('J');
});
});
$(document).ready(function(){
  $("#K").click(function(){
      $('#txtarea').html('K');
});
});
$(document).ready(function(){
  $("#L").click(function(){
      $('#txtarea').html('L');
});
});
$(document).ready(function(){
  $("#M").click(function(){
      $('#txtarea').html('M');
});
});
$(document).ready(function(){
  $("#N").click(function(){
      $('#txtarea').html('N');
});
});
</script>
<!-- Ill add the rest later -->
</body>

Upvotes: 0

Views: 134

Answers (2)

Gary Storey
Gary Storey

Reputation: 1814

You can simplify your code considerably using event delegation. Simply add a div around all of your inputs. 

<div id="letters">
  <input type="submit" style="font-family:'wingdings'" value="P" style="width:100%"  id="A" />
  <input type="submit" style="font-family:'wingdings'" value="L" style="width:100%"  id="B" />
<!-- etc  -->
</div>

Then your jQuery would only need one event.

$(document).ready(function(){
  var txt=$('#txtarea');
  $("#letters").on('click','input',function() {
    txt.val(txt.val()+this.value);
  });
});

I believe that does what you want.

You can create a class that contains the style properties and just apply that to all the inputs as well.

.letters {
  font-family:'wingdings';
  width:100%;
}

<input type="submit" class="letters" value="P"/>

I have created a fiddle so you can see it in action.

Upvotes: 2

ramana reddy
ramana reddy

Reputation: 3

First get rid of those unnecessary document.ready() functions. One such function is sufficient for all event handlers (it simplifies your code).

You can have simpler code as .on method as mentioned above, but, remember onfocus and onblur are better event handlers for text boxes rather than click events.

"try to understand the meaning of those functions before trying them..it will definitely increases ur learning experience ..

For better understanding refer .val() and .append() methods in jquery documentation. This might help for your problem. I strongly suggest you go for the documentation instead of directly copy and paste the solutions you have got. This is the best thing for a beginner.

Upvotes: 0

Related Questions