jQuery to JavaScript function

Question

Please someone help me convert this jQuery function into a JavaScript onkeyup or onchange function. I'm always getting an error undefined when I try to alter it as a JavaScript.

Your help will be deeply appreciated.

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('');
        }
    }

See here to full tried code: http://jsfiddle.net/sLzsweyd/

The reason why you get that error message [is due to JSFiddle](https://stackoverflow.com/questions/5468350/javascript-not-running-on-jsfiddle-net). That has nothing to do with jQuery. — Ivar, Oct 05 '17 at 07:22
You check that yourself by changing `function barcode()` to `window.barcode = function()`. (On JSFiddle at least. Outside of that you are better off keeping it this way) To me it seems to work. — Ivar, Oct 05 '17 at 07:26

score 1 · Answer 1 · answered Oct 05 '17 at 07:43

  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>

adiga · Answer 2 · 2017-10-05T07:34:18.580

0

You have set the LOAD TYPE as onLoad.

So jsfiddle has added a wrapper around your function.

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

    }
});

Change the LOAD TYPE to No wrap - in <head>

Updated fiddle

edited Oct 05 '17 at 07:34

answered Oct 05 '17 at 07:27

adiga

34,372
9
61
83

score 0 · Answer 3 · answered Oct 05 '17 at 08:30

<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>

jQuery to JavaScript function

3 Answers3