How do I set these buttons 'id' values to append in the textarea?
Question
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>
2 answers
solution1
2 ACCPTED 2015-05-19 18:05:31
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 input s 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.
solution2
0 2015-05-19 18:21:58
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.