2017-10-05 75 views
-1

请别人帮我把这个jQuery函数转换成JavaScript onkeyuponchange函数。当我尝试将其更改为JavaScript时,我总是收到一个未定义的错误。jQuery to JavaScript函数

您的帮助将深受赞赏。

var inp = $("#txt"); 
var tbl = document.getElementById("myTable"); 
// where #txt is the id of the textbox 

inp.keyup(function (event) { 
    if (event.keyCode == 13) { 
     if (inp.val().length > 0) { 
      var trow = document.createElement('tr'); 
      var tdata_type = document.createElement('td'); 
      var tdata_code = document.createElement('td'); 
      tdata_type.textContent = $("#select option:selected").text(); 
      tdata_code.textContent = inp.val(); 

      trow.appendChild(tdata_code); 
      trow.appendChild(tdata_type); 
      tbl.insertBefore(trow,tbl.firstChild); 
     }else{ 
      alert("Barcode length insufficient"); 
     } 
    inp.val(''); 
    } 

}); 

Tried this but I got errors. (index):86 Uncaught ReferenceError: barcode is not defined at HTMLInputElement.onkeyup

<input type="text" name="yes" id="txt" onkeyup="barcode()"> 
function barcode(){ 
     var inp = $("#txt"); 
     var tbl = document.getElementById("myTable"); 

     if (event.keyCode == 13) { 
      if (inp.val().length > 0) { 
       var trow = document.createElement('tr'); 
       var tdata_type = document.createElement('td'); 
       var tdata_code = document.createElement('td'); 

       tdata_type.textContent = $("#select option:selected").text(); 
       tdata_code.textContent = inp.val(); 

       trow.appendChild(tdata_code); 
       trow.appendChild(tdata_type); 
       tbl.insertBefore(trow,tbl.firstChild); 
      }else{ 
       alert("Barcode length insufficient"); 
      } 
     inp.val(''); 
     } 
    } 

见这里全试过代码:http://jsfiddle.net/sLzsweyd/

+0

哪里是你试过代码? –

+0

等我编辑我的帖子 – Jopekz

+1

你得到那个错误信息的原因[是由于JSFiddle](https://stackoverflow.com/questions/5468350/javascript-not-running-on-jsfiddle-net)。这与jQuery无关。 – Ivar

回答

0

您已设置LOAD TYPEonLoad

enter image description here

所以jsfiddle又增加了包装的function左右。

$(window).load(function(){ 
    function barcode() { 

    } 
}); 

更改LOAD TYPENo wrap - in <head>

Updated fiddle

1

function barcode(event) { 
 
    var inp = $("#txt"); 
 
    var tbl = document.getElementById("myTable"); 
 
    if (event.keyCode == 13) { 
 
     if (inp.val().length > 0) { 
 
     var trow = document.createElement('tr'); 
 
     var tdata_type = document.createElement('td'); 
 
     var tdata_code = document.createElement('td'); 
 

 
     tdata_type.textContent = $("#select option:selected").text(); 
 
     tdata_code.textContent = inp.val(); 
 

 
     trow.appendChild(tdata_code); 
 
     trow.appendChild(tdata_type); 
 
     tbl.insertBefore(trow, tbl.firstChild); 
 
     } else { 
 
     alert("Barcode length insufficient"); 
 
     } 
 
     inp.val(''); 
 
    } 
 
    }
.table-header {} 
 

 
.table-cell { 
 
    width: 100px; 
 
    height: 20px; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<select id="select"> 
 
    <option>Statement of Account</option> 
 
    <option>Disconnection Notice</option> 
 
</select> 
 
<input type="text" name="yes" id="txt" onkeyup="barcode(event)"> 
 
<table> 
 
    <thead> 
 
    <tr class="table-header"> 
 
     <td class="table-cell">Type</td> 
 
     <td class="table-cell">Barcode</td> 
 
    </tr> 
 
    </thead> 
 
    <tbody id="myTable"> 
 
    <tr class="table-row"> 
 
     <td class="table-cell-text"> 
 
     </td> 
 
     <td class="table-cell-text"> 
 
     </td> 
 
    </tr> 
 
    </tbody> 
 
</table>

0
<input type="text" name="yes" onkeyup="barcode()" /> 
<script> 
function barcode(event) { 
    if (event.keyCode == 13) { 
     if (this.value.length > 0) { 
      var tbl = document.getElementById('myTable'), 
       trow = document.createElement('tr'), 
       tdata_type = document.createElement('td'), 
       tdata_code = document.createElement('td'), 
       select_el = document.getElementById('select'); 
      tdata_type.innerHTML = select_el.options[ select_el.selectedIndex ].value; 
      tdata_type.innerHTML = this.value; 
      trow.appendChild(tdata_code); 
      trow.appendChild(tdata_type); 
      tbl.insertBefore(trow, tbl.firstChild); 
     } else { 
      alert('Barcode length insufficient'); 
     } 
     this.value = ''; 
    } 
} 
</script>