diff --git a/dev/js/spec/tutSpec.js b/dev/js/spec/tutSpec.js
index a37900c..fdf6cdc 100644
--- a/dev/js/spec/tutSpec.js
+++ b/dev/js/spec/tutSpec.js
@@ -209,6 +209,13 @@
     });
 
     it('should initialize queries', function () {
+
+      // qField
+      const qField = document.createElement('input');
+      qField.setAttribute('id','q-field');
+      qField.value = 'xxx';
+      document.body.appendChild(qField);
+      
       const tutE = document.createElement('div');
       tutE.setAttribute('href', '/doc/ql');
       let tut = tutClass.create(tutE);
@@ -222,6 +229,7 @@
       
       let pre1 = document.createElement('pre');
       pre1.classList.add('query','tutorial');
+      pre1.setAttribute('data-query', 'yyy');
       queries.appendChild(pre1);
       
       let pre2 = document.createElement('pre');
@@ -248,6 +256,11 @@
       expect(pre2.onclick).toBeNull();
       expect(pre3.onclick).toBeNull();
       expect(pre4.onclick).not.toBeNull();      
+
+      expect(document.getElementById('q-field').value).toBe("xxx")
+      pre1.click();
+      expect(document.getElementById('q-field').value).toBe("yyy")
+
       tut._session.clear();
     });
 
diff --git a/dev/js/src/tutorial.js b/dev/js/src/tutorial.js
index 7963385..03a33a3 100644
--- a/dev/js/src/tutorial.js
+++ b/dev/js/src/tutorial.js
@@ -109,12 +109,13 @@
      * Decorate a page with query event handler.
      */
     initQueries : function (d) {
-      Array.from(d.querySelectorAll('pre.query.tutorial:not(.unsupported)')).forEach(
-        i =>
-	        i.onclick = function (e) {
-	          this.useQuery(this,e);
-	        }.bind(this)
-      );
+      let qs = d.querySelectorAll('pre.query.tutorial:not(.unsupported)');
+      const that = this;
+      for (var i = 0; i < qs.length; i++) {
+	      qs[i].onclick = function (e) {
+	        that.useQuery(this,e);
+	      };
+      };
     },
 
     /**