We Keep Coding

Javascript keyup function first keypress don't work two press worked

My code working but half working :(
The action that needs to be done is to execute various operations on the entered data and to write the collection. However, when the keys are pressed, the previous operation is performed.
Note: format.money and unformat in accounting js.
function inputkopyala(){
var t = $('#toplam').val();
if ($('#toplam1').val() == null) {
var t1 = 0;
}
else {
var t1 = $('#toplam1').val();
}
if ($('#toplam2').val() == null) {
var t2 = 0;
}
else {
var t2 = $('#toplam2').val();
}
if ($('#toplam3').val() == null) {
var t3 = 0;
}
else {
var t3 = $('#toplam3').val();
}
if ($('#toplam4').val() == null) {
var t4 = 0;
}
else {
var t4 = $('#toplam4').val();
}
if ($('#toplam5').val() == null) {
var t5 = 0;
}
else {
var t5 = $('#toplam5').val();
}
if ($('#toplam6').val() == null) {
var t6 = 0;
}
else {
var t6 = $('#toplam6').val();
}
if ($('#toplam7').val() == null) {
var t7 = 0;
}
else {
var t7 = $('#toplam7').val();
}
if ($('#toplam8').val() == null) {
var t8 = 0;
}
else {
var t8 = $('#toplam8').val();
}
if ($('#toplam9').val() == null) {
var t9 = 0;
}
else {
var t9 = $('#toplam9').val();
}
if ($('#toplam10').val() == null) {
var t10 = 0;
}
else {
var t10 = $('#toplam10').val();
}
if ($('#toplam11').val() == null) {
var t11 = 0;
}
else {
var t11 = $('#toplam11').val();
}
if ($('#toplam12').val() == null) {
var t12 = 0;
}
else {
var t12 = $('#toplam12').val();
}
if ($('#toplam13').val() == null) {
var t13 = 0;
}
else {
var t13 = $('#toplam13').val();
}
if ($('#toplam14').val() == null) {
var t14 = 0;
}
else {
var t14 = $('#toplam14').val();
}
if ($('#toplam15').val() == null) {
var t15 = 0;
}
else {
var t15 = $('#toplam15').val();
}
if ($('#toplam16').val() == null) {
var t16 = 0;
}
else {
var t16 = $('#toplam16').val();
}
if ($('#toplam17').val() == null) {
var t17 = 0;
}
else {
var t17 = $('#toplam17').val();
}
if ($('#toplam18').val() == null) {
var t18 = 0;
}
else {
var t18 = $('#toplam18').val();
}
if ($('#toplam19').val() == null) {
var t19 = 0;
}
else {
var t19 = $('#toplam19').val();
}
if ($('#toplam20').val() == null) {
var t20 = 0;
}
else {
var t20 = $('#toplam20').val();
}
if ($('#toplam21').val() == null) {
var t21 = 0;
}
else {
var t21 = $('#toplam21').val();
}
if ($('#toplam22').val() == null) {
var t22 = 0;
}
else {
var t22 = $('#toplam22').val();
}
if ($('#toplam23').val() == null) {
var t23 = 0;
}
else {
var t23 = $('#toplam23').val();
}
if ($('#toplam24').val() == null) {
var t24 = 0;
}
else {
var t24 = $('#toplam24').val();
}
if ($('#toplam25').val() == null) {
var t25 = 0;
}
else {
var t25 = $('#toplam25').val();
}
if ($('#toplam26').val() == null) {
var t26 = 0;
}
else {
var t26 = $('#toplam26').val();
}
if ($('#toplam27').val() == null) {
var t27 = 0;
}
else {
var t27 = $('#toplam27').val();
}
if ($('#toplam28').val() == null) {
var t28 = 0;
}
else {
var t28 = $('#toplam28').val();
}
if ($('#toplam29').val() == null) {
var t29 = 0;
}
else {
var t29 = $('#toplam29').val();
}
if ($('#toplam30').val() == null) {
var t30 = 0;
}
else {
var t30 = $('#toplam30').val();
}
var sonuc;
sonuc = accounting.formatMoney(accounting.unformat(t)+accounting.unformat(t1)+accounting.unformat(t2)+accounting.unformat(t3)+accounting.unformat(t4)+accounting.unformat(t5)+accounting.unformat(t6)+accounting.unformat(t7)+accounting.unformat(t8)+accounting.unformat(t9)+accounting.unformat(t10)+accounting.unformat(t11)+accounting.unformat(t12)+accounting.unformat(t13)+accounting.unformat(t14)+accounting.unformat(t15)+accounting.unformat(t16)+accounting.unformat(t17)+accounting.unformat(t18)+accounting.unformat(t19)+accounting.unformat(t20)+accounting.unformat(t21)+accounting.unformat(t22)+accounting.unformat(t23)+accounting.unformat(t24)+accounting.unformat(t25)+accounting.unformat(t26)+accounting.unformat(t27)+accounting.unformat(t28)+accounting.unformat(t29)+accounting.unformat(t30));
$('#yekun').html(""+sonuc +"");
var v = $('#vergi').val();
if ($('#vergi1').val() == null) {
var v1 = 0;
}
else {
var v1 = $('#vergi1').val();
}
if ($('#vergi2').val() == null) {
var v2 = 0;
}
else {
var v2 = $('#vergi2').val();
}
if ($('#vergi3').val() == null) {
var v3 = 0;
}
else {
var v3 = $('#vergi3').val();
}
if ($('#vergi4').val() == null) {
var v4 = 0;
}
else {
var v4 = $('#vergi4').val();
}
if ($('#vergi5').val() == null) {
var v5 = 0;
}
else {
var v5 = $('#vergi5').val();
}
if ($('#vergi6').val() == null) {
var v6 = 0;
}
else {
var v6 = $('#vergi6').val();
}
if ($('#vergi7').val() == null) {
var v7 = 0;
}
else {
var v7 = $('#vergi7').val();
}
if ($('#vergi8').val() == null) {
var v8 = 0;
}
else {
var v8 = $('#vergi8').val();
}
if ($('#vergi9').val() == null) {
var v9 = 0;
}
else {
var v9 = $('#vergi9').val();
}
if ($('#vergi10').val() == null) {
var v10 = 0;
}
else {
var v10 = $('#vergi10').val();
}
if ($('#vergi11').val() == null) {
var v11 = 0;
}
else {
var v11 = $('#vergi11').val();
}
if ($('#vergi12').val() == null) {
var v12 = 0;
}
else {
var v12 = $('#vergi12').val();
}
if ($('#vergi13').val() == null) {
var v13 = 0;
}
else {
var v13 = $('#vergi13').val();
}
if ($('#vergi14').val() == null) {
var v14 = 0;
}
else {
var v14 = $('#vergi14').val();
}
if ($('#vergi15').val() == null) {
var v15 = 0;
}
else {
var v15 = $('#vergi15').val();
}
if ($('#vergi16').val() == null) {
var v16 = 0;
}
else {
var v16 = $('#vergi16').val();
}
if ($('#vergi17').val() == null) {
var v17 = 0;
}
else {
var v17 = $('#vergi17').val();
}
if ($('#vergi18').val() == null) {
var v18 = 0;
}
else {
var v18 = $('#vergi18').val();
}
if ($('#vergi19').val() == null) {
var v19 = 0;
}
else {
var v19 = $('#vergi19').val();
}
if ($('#vergi20').val() == null) {
var v20 = 0;
}
else {
var v20 = $('#vergi20').val();
}
if ($('#vergi21').val() == null) {
var v21 = 0;
}
else {
var v21 = $('#vergi21').val();
}
if ($('#vergi22').val() == null) {
var v22 = 0;
}
else {
var v22 = $('#vergi22').val();
}
if ($('#vergi23').val() == null) {
var v23 = 0;
}
else {
var v23 = $('#vergi23').val();
}
if ($('#vergi24').val() == null) {
var v24 = 0;
}
else {
var v24 = $('#vergi24').val();
}
if ($('#vergi25').val() == null) {
var v25 = 0;
}
else {
var v25 = $('#vergi25').val();
}
if ($('#vergi26').val() == null) {
var v26 = 0;
}
else {
var v26 = $('#vergi26').val();
}
if ($('#vergi27').val() == null) {
var v27 = 0;
}
else {
var v27 = $('#vergi27').val();
}
if ($('#vergi28').val() == null) {
var v28 = 0;
}
else {
var v28 = $('#vergi28').val();
}
if ($('#vergi29').val() == null) {
var v29 = 0;
}
else {
var v29 = $('#vergi29').val();
}
if ($('#vergi30').val() == null) {
var v30 = 0;
}
else {
var v30 = $('#vergi30').val();
}
var vergiler;
vergiler = accounting.formatMoney(accounting.unformat(v)+accounting.unformat(v1)+accounting.unformat(v2)+accounting.unformat(v3)+accounting.unformat(v4)+accounting.unformat(v5)+accounting.unformat(v6)+accounting.unformat(v7)+accounting.unformat(v8)+accounting.unformat(v9)+accounting.unformat(v10)+accounting.unformat(v11)+accounting.unformat(v12)+accounting.unformat(v13)+accounting.unformat(v14)+accounting.unformat(v15)+accounting.unformat(v16)+accounting.unformat(v17)+accounting.unformat(v18)+accounting.unformat(v19)+accounting.unformat(v20)+accounting.unformat(v21)+accounting.unformat(v22)+accounting.unformat(v23)+accounting.unformat(v24)+accounting.unformat(v25)+accounting.unformat(v26)+accounting.unformat(v27)+accounting.unformat(v28)+accounting.unformat(v29)+accounting.unformat(v30));
$('#topkdv').html(""+vergiler +"");
document.urunformu.toplam.value = accounting.formatMoney(document.urunformu.adet.value*document.urunformu.birimfiyat.value)
document.urunformu.vergi.value = accounting.formatMoney(document.urunformu.adet.value*document.urunformu.birimfiyat.value*document.urunformu.vergioran.value/100)
document.getElementById("geneltoplam").innerHTML = accounting.formatMoney(accounting.unformat(document.getElementById("yekun").innerHTML)+accounting.unformat(document.getElementById("topkdv").innerHTML))
}
function inputkopyala1(){
var t = $('#toplam').val();
if ($('#toplam1').val() == null) {
var t1 = 0;
}
else {
var t1 = $('#toplam1').val();
}
if ($('#toplam2').val() == null) {
var t2 = 0;
}
else {
var t2 = $('#toplam2').val();
}
if ($('#toplam3').val() == null) {
var t3 = 0;
}
else {
var t3 = $('#toplam3').val();
}
if ($('#toplam4').val() == null) {
var t4 = 0;
}
else {
var t4 = $('#toplam4').val();
}
if ($('#toplam5').val() == null) {
var t5 = 0;
}
else {
var t5 = $('#toplam5').val();
}
if ($('#toplam6').val() == null) {
var t6 = 0;
}
else {
var t6 = $('#toplam6').val();
}
if ($('#toplam7').val() == null) {
var t7 = 0;
}
else {
var t7 = $('#toplam7').val();
}
if ($('#toplam8').val() == null) {
var t8 = 0;
}
else {
var t8 = $('#toplam8').val();
}
if ($('#toplam9').val() == null) {
var t9 = 0;
}
else {
var t9 = $('#toplam9').val();
}
if ($('#toplam10').val() == null) {
var t10 = 0;
}
else {
var t10 = $('#toplam10').val();
}
if ($('#toplam11').val() == null) {
var t11 = 0;
}
else {
var t11 = $('#toplam11').val();
}
if ($('#toplam12').val() == null) {
var t12 = 0;
}
else {
var t12 = $('#toplam12').val();
}
if ($('#toplam13').val() == null) {
var t13 = 0;
}
else {
var t13 = $('#toplam13').val();
}
if ($('#toplam14').val() == null) {
var t14 = 0;
}
else {
var t14 = $('#toplam14').val();
}
if ($('#toplam15').val() == null) {
var t15 = 0;
}
else {
var t15 = $('#toplam15').val();
}
if ($('#toplam16').val() == null) {
var t16 = 0;
}
else {
var t16 = $('#toplam16').val();
}
if ($('#toplam17').val() == null) {
var t17 = 0;
}
else {
var t17 = $('#toplam17').val();
}
if ($('#toplam18').val() == null) {
var t18 = 0;
}
else {
var t18 = $('#toplam18').val();
}
if ($('#toplam19').val() == null) {
var t19 = 0;
}
else {
var t19 = $('#toplam19').val();
}
if ($('#toplam20').val() == null) {
var t20 = 0;
}
else {
var t20 = $('#toplam20').val();
}
if ($('#toplam21').val() == null) {
var t21 = 0;
}
else {
var t21 = $('#toplam21').val();
}
if ($('#toplam22').val() == null) {
var t22 = 0;
}
else {
var t22 = $('#toplam22').val();
}
if ($('#toplam23').val() == null) {
var t23 = 0;
}
else {
var t23 = $('#toplam23').val();
}
if ($('#toplam24').val() == null) {
var t24 = 0;
}
else {
var t24 = $('#toplam24').val();
}
if ($('#toplam25').val() == null) {
var t25 = 0;
}
else {
var t25 = $('#toplam25').val();
}
if ($('#toplam26').val() == null) {
var t26 = 0;
}
else {
var t26 = $('#toplam26').val();
}
if ($('#toplam27').val() == null) {
var t27 = 0;
}
else {
var t27 = $('#toplam27').val();
}
if ($('#toplam28').val() == null) {
var t28 = 0;
}
else {
var t28 = $('#toplam28').val();
}
if ($('#toplam29').val() == null) {
var t29 = 0;
}
else {
var t29 = $('#toplam29').val();
}
if ($('#toplam30').val() == null) {
var t30 = 0;
}
else {
var t30 = $('#toplam30').val();
}
var sonuc;
sonuc = accounting.formatMoney(accounting.unformat(t)+accounting.unformat(t1)+accounting.unformat(t2)+accounting.unformat(t3)+accounting.unformat(t4)+accounting.unformat(t5)+accounting.unformat(t6)+accounting.unformat(t7)+accounting.unformat(t8)+accounting.unformat(t9)+accounting.unformat(t10)+accounting.unformat(t11)+accounting.unformat(t12)+accounting.unformat(t13)+accounting.unformat(t14)+accounting.unformat(t15)+accounting.unformat(t16)+accounting.unformat(t17)+accounting.unformat(t18)+accounting.unformat(t19)+accounting.unformat(t20)+accounting.unformat(t21)+accounting.unformat(t22)+accounting.unformat(t23)+accounting.unformat(t24)+accounting.unformat(t25)+accounting.unformat(t26)+accounting.unformat(t27)+accounting.unformat(t28)+accounting.unformat(t29)+accounting.unformat(t30));
var v = $('#vergi').val();
if ($('#vergi1').val() == null) {
var v1 = 0;
}
else {
var v1 = $('#vergi1').val();
}
if ($('#vergi2').val() == null) {
var v2 = 0;
}
else {
var v2 = $('#vergi2').val();
}
if ($('#vergi3').val() == null) {
var v3 = 0;
}
else {
var v3 = $('#vergi3').val();
}
if ($('#vergi4').val() == null) {
var v4 = 0;
}
else {
var v4 = $('#vergi4').val();
}
if ($('#vergi5').val() == null) {
var v5 = 0;
}
else {
var v5 = $('#vergi5').val();
}
if ($('#vergi6').val() == null) {
var v6 = 0;
}
else {
var v6 = $('#vergi6').val();
}
if ($('#vergi7').val() == null) {
var v7 = 0;
}
else {
var v7 = $('#vergi7').val();
}
if ($('#vergi8').val() == null) {
var v8 = 0;
}
else {
var v8 = $('#vergi8').val();
}
if ($('#vergi9').val() == null) {
var v9 = 0;
}
else {
var v9 = $('#vergi9').val();
}
if ($('#vergi10').val() == null) {
var v10 = 0;
}
else {
var v10 = $('#vergi10').val();
}
if ($('#vergi11').val() == null) {
var v11 = 0;
}
else {
var v11 = $('#vergi11').val();
}
if ($('#vergi12').val() == null) {
var v12 = 0;
}
else {
var v12 = $('#vergi12').val();
}
if ($('#vergi13').val() == null) {
var v13 = 0;
}
else {
var v13 = $('#vergi13').val();
}
if ($('#vergi14').val() == null) {
var v14 = 0;
}
else {
var v14 = $('#vergi14').val();
}
if ($('#vergi15').val() == null) {
var v15 = 0;
}
else {
var v15 = $('#vergi15').val();
}
if ($('#vergi16').val() == null) {
var v16 = 0;
}
else {
var v16 = $('#vergi16').val();
}
if ($('#vergi17').val() == null) {
var v17 = 0;
}
else {
var v17 = $('#vergi17').val();
}
if ($('#vergi18').val() == null) {
var v18 = 0;
}
else {
var v18 = $('#vergi18').val();
}
if ($('#vergi19').val() == null) {
var v19 = 0;
}
else {
var v19 = $('#vergi19').val();
}
if ($('#vergi20').val() == null) {
var v20 = 0;
}
else {
var v20 = $('#vergi20').val();
}
if ($('#vergi21').val() == null) {
var v21 = 0;
}
else {
var v21 = $('#vergi21').val();
}
if ($('#vergi22').val() == null) {
var v22 = 0;
}
else {
var v22 = $('#vergi22').val();
}
if ($('#vergi23').val() == null) {
var v23 = 0;
}
else {
var v23 = $('#vergi23').val();
}
if ($('#vergi24').val() == null) {
var v24 = 0;
}
else {
var v24 = $('#vergi24').val();
}
if ($('#vergi25').val() == null) {
var v25 = 0;
}
else {
var v25 = $('#vergi25').val();
}
if ($('#vergi26').val() == null) {
var v26 = 0;
}
else {
var v26 = $('#vergi26').val();
}
if ($('#vergi27').val() == null) {
var v27 = 0;
}
else {
var v27 = $('#vergi27').val();
}
if ($('#vergi28').val() == null) {
var v28 = 0;
}
else {
var v28 = $('#vergi28').val();
}
if ($('#vergi29').val() == null) {
var v29 = 0;
}
else {
var v29 = $('#vergi29').val();
}
if ($('#vergi30').val() == null) {
var v30 = 0;
}
else {
var v30 = $('#vergi30').val();
}
var vergiler;
vergiler = accounting.formatMoney(accounting.unformat(v)+accounting.unformat(v1)+accounting.unformat(v2)+accounting.unformat(v3)+accounting.unformat(v4)+accounting.unformat(v5)+accounting.unformat(v6)+accounting.unformat(v7)+accounting.unformat(v8)+accounting.unformat(v9)+accounting.unformat(v10)+accounting.unformat(v11)+accounting.unformat(v12)+accounting.unformat(v13)+accounting.unformat(v14)+accounting.unformat(v15)+accounting.unformat(v16)+accounting.unformat(v17)+accounting.unformat(v18)+accounting.unformat(v19)+accounting.unformat(v20)+accounting.unformat(v21)+accounting.unformat(v22)+accounting.unformat(v23)+accounting.unformat(v24)+accounting.unformat(v25)+accounting.unformat(v26)+accounting.unformat(v27)+accounting.unformat(v28)+accounting.unformat(v29)+accounting.unformat(v30));
document.urunformu.toplam1.value = accounting.formatMoney(document.urunformu.adet1.value*document.urunformu.birimfiyat1.value)
document.urunformu.vergi1.value = accounting.formatMoney(document.urunformu.adet1.value*document.urunformu.birimfiyat1.value*document.urunformu.vergioran1.value/100)
$('#topkdv').html(""+vergiler +"");
$('#yekun').html(""+sonuc +"");
document.getElementById("geneltoplam").innerHTML = accounting.formatMoney(accounting.unformat(document.getElementById("yekun").innerHTML)+accounting.unformat(document.getElementById("topkdv").innerHTML))
}
//note: function inputkopyala2,3,4... continues to 29
<a href="javascript:void(0);" id="add_more" class="dt-button buttons-print btn btn-cerceve btn-xs ml">
<i class="fa fa-plus"></i>
<b>Add New</b>
</a>
<script type="text/javascript">
$(document).ready(function () {
var maxAppend = 0;
var degisken = 1;
$("#add_more").click(function () {
if (maxAppend >= 29) {
alert("Maksimum Satır Sayısına Ulaştınız");
}
else {
var add_new = $('<tr style=""><td><input type="text" name="item_name[]" required placeholder="Ürün Adı" class="form-control"></td>\n\
<td><textarea style="height:40px;" rows="1" name="item_desc[]" placeholder="Ürün Açıklaması" class="form-control"></textarea></td>\n\
<td class="col-sm-1"><input onkeyup="inputkopyala' +degisken+ '()" onkeypress="return isNumberKey(event)" id="adet' +degisken+ '" type="text" data-parsley-type="number" name="quantity[]" placeholder="1" required class="form-control"></td>">\n\
<td class="col-sm-1"><input onkeyup="inputkopyala' +degisken+ '()" onkeypress="return isNumberKey(event)" id="birimfiyat' +degisken+ '" type="text" data-parsley-type="number" name="unit_cost[]" required placeholder="100 ₺" class="form-control"></td>\n\
<td class="col-sm-1"><select onchange="inputkopyala' +degisken+ '()" id="vergioran' +degisken+ '" name="item_tax_rate[]" class="form-control"><option value="0.00"><?= lang('none') ?></option>\n\\n\
<?php
$tax_rates = $this->db->get('tbl_tax_rates')->result();
if (!empty($tax_rates)) {
foreach ($tax_rates as $v_tax) {
?><option value="<?= $v_tax->tax_rate_percent ?>"><?= $v_tax->tax_rate_name ?></option><?php
}
}
?></select></td>\n\
<td class="col-sm-1"><input id="vergi' +degisken+ '" type="text" name="tax" placeholder="0,00 ₺" readonly="" class="form-control"></td>\n\
<td class="col-sm-2"><input id="toplam' +degisken+ '" type="text" value="" name="tax" placeholder="0,00 ₺" readonly="" class="form-control toplam"></td>\n\
<td><i class="fa fa-times"></i></strong></td></tr>\n<br/>');
degisken++;
maxAppend++;
$("#add_new").append(add_new);
}
});
$("#add_new").on('click', '.remCF', function () {
$(this).parent().parent().remove();
degisken--;
maxAppend--;
});
});
</script>

Run function inside another function

If I run this code:
var alts = {};
$('.grid ul').find('.lista-produtos:visible').each(function(){
var classes2 = $(this).attr('class').split(' ');
for (var i = 0; i < classes2.length; i++) {
var matches2 = /^tipo\-(.+)/.exec(classes2[i]);
if (matches2 != null) {
var produto2 = matches2[1];
}
}
if(!alts[classes2]){
alts[classes2] = true;
$('ul.filters').append('<li class="filter-produto">'+ produto2 +'</li>');
}
});
as a function, like this:
function tipoProduto(){
var alts = {};
$('.grid ul').find('.lista-produtos:visible').each(function(){
var classes2 = $(this).attr('class').split(' ');
for (var i = 0; i < classes2.length; i++) {
var matches2 = /^tipo\-(.+)/.exec(classes2[i]);
if (matches2 != null) {
var produto2 = matches2[1];
}
}
if(!alts[classes2]){
alts[classes2] = true;
$('ul.filters').append('<li class="filter-produto">'+ produto2 +'</li>');
}
});
}
and call it here:
$('.list-group-item').click(function(){
var classes1 = $(this).attr('class').split(' ');
for (var i = 0; i < classes1.length; i++) {
var matches1 = /^ctrl\-(.+)/.exec(classes1[i]);
if (matches1 != null) {
var marca1 = matches1[1];
}
}
$(this).addClass("active");
$('.list-group-item').not(this).removeClass("active");
if ($('.todos-produtos').hasClass("active")) {
$('.lista-produtos').hide();
$('.' + marca1).show();
}
else {
var produto1 = $('li.filter-produto.active').text();
$('.lista-produtos').not('.' + marca1 + '.tipo-' + produto1).hide();
$('.' + marca1 + '.tipo-' + produto1).show()
}
tiposProduto(); // CALLING IT HERE //
});
});
then this code below doesn't work:
$(document).ready(function(){
$('.filter-produto').click(function() {
var classes3 = $('.list-group-item.active').attr('class').split(' ');
for (var i = 0; i < classes3.length; i++) {
var matches3 = /^ctrl\-(.+)/.exec(classes3[i]);
if (matches3 != null) {
var marca2 = matches3[1];
}
}
$(this).addClass("active");
$('.filter-produto').not(this).removeClass("active");
if ($(this).hasClass("todos-produtos")) {
$('.' + marca2).show();
}
else {
var produto3 = $(this).text();
$(".lista-produtos").not('.tipo-' + produto3).hide();
$('.' + marca2 + '.tipo-' + produto3).show();
}
});
});
but if I change the 1st code to this:
$(document).ready(function(){
var alts = {};
$('.grid ul').find('.lista-produtos:visible').each(function(){
var classes2 = $(this).attr('class').split(' ');
for (var i = 0; i < classes2.length; i++) {
var matches2 = /^tipo\-(.+)/.exec(classes2[i]);
if (matches2 != null) {
var produto2 = matches2[1];
}
}
if(!alts[classes2]){
alts[classes2] = true;
$('ul.filters').append('<li class="filter-produto">'+ produto2 +'</li>');
}
});
});
then the 4th code works again.
The problem is I need the code above as a function, like I showed on the 2nd and 3rd examples.
Thanks!

Thanks for the few replies. I found out the problem.
Appended objects weren't being recognized by the functions. That's why $('.filter-produto').click(function() { wasn't working.

I'm getting this error Uncaught TypeError: this.getElements is not a function

I look into a few answers but I'm not getting any results, I'm trying to fix this issue "Uncaught TypeError: this.getElements is not a function". This part of the code, full code in the link.
var SIDEBAR = new function() {
this.on = function(nameElement){
this.menu = nameElement;
return this;
};
/*more code*/
this.getElements = function() {
/*more code*/
return [];
};
/*more code*/
this.addElements = function() {
var elementsData = this.getElements();
/*more code*/
};
}();
var sid = SIDEBAR.on('test');
sid.load();
Full code: https://jsfiddle.net/e6shbnsu/

The value of this is determined by how a function is called.
this will point to window in setTimeout. Use .bind to have specified values as this context.
The bind() method creates a new function that, when called, has its this keyword set to the provided value, with a given sequence of arguments preceding any provided when the new function is called.
function inElectron() {
return navigator.userAgent.indexOf("Electron") != -1;
}
var dataManager = {
getItem: function(key, local) {
if (inElectron() || local == 1)
return localStorage.getItem(key);
else
return sessionStorage.getItem(key);
},
setItem: function(key, item, local) {
if (inElectron() || local == 1)
localStorage.setItem(key, item);
else
sessionStorage.setItem(key, item);
}
};
var SIDEBAR = new function() {
this.on = function(nameElement) {
this.menu = nameElement;
return this;
};
this.load = function() {
this.currentElement = 0;
this.refreshElements();
};
this.setAddElementName = function(name) {
this.addElementName = name;
};
this.setNewElementName = function(name) {
this.newElementName = name;
};
this.getElements = function() {
var elementsData = dataManager.getItem(this.getDataKey);
if (typeof elementsData !== 'undefined' && elementsData !== null) {
return JSON.parse(elementsData);
}
return this.getPreloadData();
};
this.setDataKey = function(key) {
this.dataKey = key;
};
this.getDataKey = function() {
if (this.dataKey) {
return this.dataKey;
}
return "SideBar" + this.menu;
};
this.setPreloadData = function(dataArray) {
this.preloadData = dataArray;
};
this.getPreloadData = function() {
if (typeof this.preloadData !== 'undefined' && this.preloadData !== null) {
return this.preloadData;
}
return [];
};
this.getCurrentElement = function() {
var elementsData = getElements;
return elementsData[currentElement];
};
this.refreshElements = function() {
window.setTimeout(function() {
this.clearElements();
}.bind(this), 1);
//outer `this` context is bound to the handler
window.setTimeout(function() {
this.addElements();
}.bind(this), 2);
};
this.deleteElement = function() {
var newArr = [];
var elementsData = this.getElements();
for (var i = 0, l = elementsData.length; i < l; i++) {
if (i != index) {
newArr.push(elementsData[i]);
}
}
dataManager.setItem(this.getDataKey, JSON.stringify(newArr));
};
this.addElements = function() {
var elementsData = this.getElements();
var menuNode = document.getElementById(this.menu);
console.log(elementsData);
for (var i = 0; i < elementsData.length; i++) {
var li = document.createElement("li");
var div = document.createElement("div");
li.value = i;
div.classList.add("list");
var p = document.createElement("p");
p.id = "textBlock";
p.style.display = "inline";
p.setAttribute("contentEditable", false);
p.appendChild(document.createTextNode(elementsData[i].name));
div.appendChild(p);
var obj = getObject();
console.log(obj);
div.onclick = function(e) {
e.stopImmediatePropagation();
if (this.querySelector("#textBlock").contentEditable == "false") {
this.currentElement = this.parentNode.value;
elementsData = this.getElements();
document.getElementById("prompt").innerHTML = elementsData[this.parentNode.value]["data"];
document.querySelector("#wrapper").classList.toggle("toggled");
}
};
var span2 = document.createElement("span");
span2.id = "deleteMode";
span2.classList.add("glyphicon");
span2.classList.add("glyphicon-minus");
span2.onclick = function(e) {
e.stopImmediatePropagation();
deleteItem(this.parentNode.parentNode.value);
window.setTimeout(this.refreshElements, 1);
};
span2.style.display = "none";
div.appendChild(span2);
var span = document.createElement("span");
span.id = "editMode";
span.classList.add("glyphicon");
span.classList.add("glyphicon-pencil");
span.onclick = function(e) {
e.stopImmediatePropagation();
// get href of first anchor in element and change location
for (var j = 0; j < menuNode.length; j++) {
menuNode[j].classList.add("disabled");
}
this.style.display = "none";
this.parentNode.querySelector("#deleteMode").style.display = "";
this.parentNode.classList.add("editableMode");
this.parentNode.classList.remove("disabled");
var textBlock = this.parentNode.querySelector("#textBlock");
textBlock.setAttribute("contentEditable", true);
this.placeCaretAtEnd(textBlock);
textBlock.onkeydown = function(e) {
if (e.keyCode == 13) {
e.stopImmediatePropagation();
var text = this.innerHTML.replace(" ", '');
text = text.replace("<br>", '');
if (text.length > 0) {
this.innerHTML = text;
elementsData[this.parentNode.parentNode.value]['name'] = text;
dataManager.setItem("IFTeleprompterScripts", JSON.stringify(elementsData));
for (var j = 0; j < menuNode.length; j++) {
menuNode[j].classList.remove("disabled");
}
this.parentNode.classList.remove("editableMode");
this.setAttribute("contentEditable", false);
this.parentNode.querySelector("#editMode").style.display = "";
this.parentNode.querySelector("#deleteMode").style.display = "none";
} else {
return false;
}
} else if (e.keyCode == 8) {
if (textBlock.innerHTML.length - 1 === 0) {
textBlock.innerHTML = " ";
}
}
return true;
};
return false;
};
div.appendChild(span);
li.appendChild(div);
scriptsNode.appendChild(li);
}
var li = document.createElement("li");
var div = document.createElement("div");
var span2 = document.createElement("span");
span2.id = "addMode";
span2.classList.add("glyphicon");
span2.classList.add("glyphicon-plus");
div.appendChild(span2);
var p = document.createElement("p");
p.id = "textBlock";
p.style.display = "inline";
p.setAttribute("contentEditable", false);
if (typeof this.addElementName !== 'undefined' && this.addElementName !== null)
p.appendChild(document.createTextNode(" " + this.addElementName));
else
p.appendChild(document.createTextNode(" Add " + this.menu));
div.appendChild(p);
li.onclick = function(e) {
e.stopImmediatePropagation();
var newPushElementName = "New " + this.menu;
if (typeof this.addElementName !== 'undefined' && this.addElementName !== null) {
newPushElementName = this.addElementName;
}
elementsData.push({
"name": newPushElementName,
"data": ""
});
dataManager.setItem(this.getDataKey, JSON.stringify(elementsData));
this.refreshElements();
};
li.appendChild(div);
menuNode.appendChild(li);
};
this.placeCaretAtEnd = function(el) {
el.focus();
if (typeof window.getSelection != "undefined" && typeof document.createRange != "undefined") {
var range = document.createRange();
range.selectNodeContents(el);
range.collapse(false);
var sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);
} else if (typeof document.body.createTextRange != "undefined") {
var textRange = document.body.createTextRange();
textRange.moveToElementText(el);
textRange.collapse(false);
textRange.select();
}
};
}();
var sid = SIDEBAR.on('test');
sid.load();
<ul class="sidebar-nav" id="test">
</ul>

Adding class to javascript selector?

createDocumentStructure('h3, .twistytext'); is the line I am having problems with - last line.
It works if I just have h3 in there but wanted to add a class too. Tried a bunch of different ways to syntax the class in but nothing is working. So I want the expand/collapse to be <div> then <h3 class="twistytext">.
// JavaScript Document
var collapseDivs, collapseLinks;
function createDocumentStructure(tagName) {
if (document.getElementsByTagName) {
var elements = document.getElementsByTagName(tagName);
collapseDivs = new Array(elements.length);
collapseLinks = new Array(elements.length);
for (var i = 0; i < elements.length; i++) {
var element = elements[i];
var siblingContainer;
if (document.createElement && (siblingContainer = document.createElement('div')) && siblingContainer.style) {
var nextSibling = element.nextSibling;
element.parentNode.insertBefore(siblingContainer, nextSibling);
var nextElement = elements[i + 1];
while (nextSibling != nextElement && nextSibling != null) {
var toMove = nextSibling;
nextSibling = nextSibling.nextSibling;
siblingContainer.appendChild(toMove);
}
siblingContainer.style.display = 'none';
collapseDivs[i] = siblingContainer;
createCollapseLink(element, siblingContainer, i);
} else {
// no dynamic creation of elements possible
return;
}
}
createCollapseExpandAll(elements[0]);
}
}
function createCollapseLink(element, siblingContainer, index) {
var div;
if (document.createElement && (div = document.createElement('div'))) {
div.appendChild(document.createTextNode(String.fromCharCode(160)));
var imge = document.createElement('img');
imge.src = 'https://smartsales.thomsonreuters.com/library/template/cssfiles/gsam/expand.jpg';
imge.setAttribute('width', '20px');
imge.setAttribute('height', '20px');
imge.setAttribute('class', 'imge')
imge.alt = 'Expand';
var link = document.createElement('a');
link.collapseDiv = siblingContainer;
link.href = '#';
link.appendChild(imge);
link.onclick = collapseExpandLink;
//link.onclick = removediv;
collapseLinks[index] = link;
div.appendChild(link);
element.appendChild(div);
}
}
function collapseExpandLink(evt) {
if (this.collapseDiv.style.display == '') {
this.parentNode.parentNode.nextSibling.style.display = 'none';
this.firstChild.alt = 'expand';
this.firstChild.src = 'https://smartsales.thomsonreuters.com/library/template/cssfiles/gsam/expand.jpg';
} else {
this.parentNode.parentNode.nextSibling.style.display = '';
var imgc = document.createElement('img');
imgc.src = 'https://smartsales.thomsonreuters.com/library/template/cssfiles/gsam/collapse.jpg';
imgc.setAttribute('width', '20px');
imgc.setAttribute('height', '20px');
imgc.setAttribute('class', 'imge')
imgc.alt = 'Collapse';
this.firstChild.src = 'https://smartsales.thomsonreuters.com/library/template/cssfiles/gsam/collapse.jpg';
this.firstChild.alt = 'Collapse';
// this.firstChild.setAttribute("src","collapse-eikon.jpg");
}
if (evt && evt.preventDefault) {
evt.preventDefault();
}
return false;
}
function createCollapseExpandAll(firstElement) {
var div;
if (document.createElement && (div = document.createElement('div'))) {
var link = document.createElement('a');
link.setAttribute('class', 'expanderall');
link.href = '#';
link.appendChild(document.createTextNode('Expand all'));
link.onclick = expandAll;
div.appendChild(link);
div.appendChild(document.createTextNode(' '));
link = document.createElement('a');
link.setAttribute('class', 'expanderall');
link.href = '#';
link.appendChild(document.createTextNode('Collapse all'));
link.onclick = collapseAll;
div.appendChild(link);
firstElement.parentNode.insertBefore(div, firstElement);
}
}
function expandAll(evt) {
for (var i = 0; i < collapseDivs.length; i++) {
collapseDivs[i].style.display = '';
collapseLinks[i].firstChild.src = 'https://smartsales.thomsonreuters.com/library/template/cssfiles/gsam/collapse.jpg';
}
if (evt && evt.preventDefault) {
evt.preventDefault();
}
return false;
}
function collapseAll(evt) {
for (var i = 0; i < collapseDivs.length; i++) {
collapseDivs[i].style.display = 'none';
collapseLinks[i].firstChild.src = 'https://smartsales.thomsonreuters.com/library/template/cssfiles/gsam/expand.jpg';
}
if (evt && evt.preventDefault) {
evt.preventDefault();
}
return false;
}
window.onload = function (evt) {
createDocumentStructure('h3, .twistytext');
}

in your function
function createDocumentStructure(tagName) {
change to
function createDocumentStructure(tagName,className) {
and in that function add code
if(className)
{
elements.className = className;
}
for more detail refer Change an element's class with JavaScript

Change one letter of innerHTML

I have a for loop like this:
for(var i = 0; i < woord.length; i++) {
if(woord[i] === letter) {
goed = true;
woordContainer.innerHTML[i] = woord[i];
}
}
But the text in the woordContainer doesn't change on the page. I tried logging woord[i] to the console and it show the correct letter.
EDIT:
Let me share the complete code, so you can understand it better:
(it is a hangman game)
var store,
woord,
wrapper,
woordContainer,
letterInput,
gokButton,
pogingen,
pogingenText;
window.onload = function() {
store = new Persist.Store("galgje");
woord = store.get("woord");
pogingen = 10;
wrapper = document.getElementById("wrapper");
woordContainer = document.getElementById("woordContainer");
letterInput = document.getElementById("letterInput");
gokButton = document.getElementById("gokButton");
pogingenText = document.getElementById("pogingenText");
if (!woord) {
document.location.href = "./index.html";
}
for (var i = 0; i < woord.length; i++) {
woordContainer.innerHTML += ".";
}
wrapper.appendChild(woordContainer);
gokButton.onclick = function() {
var letter = letterInput.value.toLowerCase();
var goed = false;
if(letter) {
for(var i = 0; i < woord.length; i++) {
if(woord[i] === letter) {
goed = true;
woordContainer.innerHTML = woord[i];
}
}
if(!goed) {
pogingen--;
if(pogingen === 0) {
document.location.href = "./af.html";
}
pogingenText.innerHTML = "Pogingen: " + pogingen;
}
letterInput.value = "";
}
return false;
}
}

If you want to replace the character int woordContainer.innerHTML at index i, with the one in woord[i], you can do it like this:
if(woord[i] === letter) {
goed = true;
var temp = woordContainer.innerHTML
woordContainer.innerHTML = temp.substr(0, i) + woord[i] + temp.substr(i + woord[i].length);
}