A variable is not being transferred from a PHP loop to a Javascript variable.

The code should be displayed using a picture loop and by clicking the picture opens in a modal window in which you can click on any place in the picture to recognize its RGB and HEX. The problem is that the picture is not transferred to the modal window. For some reason, the variable from the loop is not passed to the variable in javascript.

<?php $dir = 'img/'; // Папка с изображениями $cols = 3; // Количество столбцов в будущей таблице с картинками $files = scandir($dir); // Берём всё содержимое директории //echo "<div class='row'>"; // $k = 0; // for ($i = 0; $i < count($files); $i++) { // Перебираем все файлы if (($files[$i] != ".") && ($files[$i] != "..")) { // Текущий каталог и родительский пропускаем if ($k % $cols == 0) ; // Добавляем новую строку echo "<div class='col-xs-6 col-sm-4 col-md-3 col-lg-3'>"; echo "<div class='thumbnail'>"; // $path = $dir.$files[$i]; // Получаем путь к картинке echo "<a data-toggle='modal' data-target='#myModal$i'>"; // Делаем ссылку на картинку echo "<img src='$path' alt='' width='300' height='240' />"; // Вывод превью картинки echo "</a>"; // Закрываем ссылку echo "</div>"; echo "</div>"; echo " <div class='modal fade' id='myModal$i' tabindex='-1' role='dialog' aria-labelledby='myModalLabel' aria-hidden='true'> <div class='modal-dialog modal-lg'> <div class='modal-content'> <div class='modal-header'> <button type='button' class='close' data-dismiss='modal' aria-hidden='true'>&times;</button> <h4 class='modal-title' id='myModalLabel'>Название модали</h4> </div> <div class='modal-body'> <canvas width='600' height='440' id='canvas_picker'></canvas> <div id='hex'>HEX: <input type='text'></input></div> <div id='rgb'>RGB: <input type='text'></input></div> </div> <div class='modal-footer'> <button type='button' class='btn btn-default' data-dismiss='modal'>Закрыть</button> <button type='button' class='btn btn-primary'>Сохранить изменения</button> </div> </div> </div> </div>"; echo "<script type='text/javascript'> var canvas = document.getElementById('canvas_picker').getContext('2d'); // create an image object and get it's source var img = new Image(); img.src = '".$path."'; // image credit: http://pixabay.com/en/fishing-boat-denmark-beach-sea-49523/ // copy the image to the canvas $(img).load(function(){ canvas.drawImage(img,0,0); }); // http://www.javascripter.net/faq/rgbtohex.htm function rgbToHex(R,G,B) {return toHex(R)+toHex(G)+toHex(B)} function toHex(n) { n = parseInt(n,10); if (isNaN(n)) return '00'; n = Math.max(0,Math.min(n,255)); return '0123456789ABCDEF'.charAt((nn%16)/16) + '0123456789ABCDEF'.charAt(n%16); } $('#canvas_picker').click(function(event){ // getting user coordinates var x = event.pageX - this.offsetLeft; var y = event.pageY - this.offsetTop; // getting image data and RGB values var img_data = canvas.getImageData(x, y, 1, 1).data; var R = img_data[0]; var G = img_data[1]; var B = img_data[2]; var rgb = R + ',' + G + ',' + B; // convert RGB to HEX var hex = rgbToHex(R,G,B); // making the color the value of the input $('#rgb input').val(rgb); $('#hex input').val('#' + hex); }); </script>"; // echo "</div>"; // Закрываем столбец /* Закрываем строку, если необходимое количество было выведено, либо данная итерация последняя */ if ((($k + 1) % $cols == 0) || (($i + 1) == count($files))); $k++; // Увеличиваем вспомогательный счётчик } } ?> 

The console says that the error in

 $(img).load(function(){ canvas.drawImage(img,0,0); }); 

Only xs how to remove it. Help me please.

In html everything seems to be fine and the php variable passes the value, but javascript does not want to work with it. Here is the page code:

 <div class="container"> <div class="panel panel-default"> <div class="panel-body"> <div class="row"> <div class='col-xs-6 col-sm-4 col-md-3 col-lg-3'><div class='thumbnail'><a data-toggle='modal' data-target='#myModal2'><img src='img/006.jpg' alt='' width='300' height='240' /></a></div></div> <div class='modal fade' id='myModal2' tabindex='-1' role='dialog' aria-labelledby='myModalLabel' aria-hidden='true'> <div class='modal-dialog modal-lg'> <div class='modal-content'> <div class='modal-header'> <button type='button' class='close' data-dismiss='modal' aria-hidden='true'>&times;</button> <h4 class='modal-title' id='myModalLabel'>Название модали</h4> </div> <div class='modal-body'> <canvas width='600' height='440' id='canvas_picker'></canvas> <div id='hex'>HEX: <input type='text'></input></div> <div id='rgb'>RGB: <input type='text'></input></div> </div> <div class='modal-footer'> <button type='button' class='btn btn-default' data-dismiss='modal'>Закрыть</button> <button type='button' class='btn btn-primary'>Сохранить изменения</button> </div> </div> </div> </div><script type='text/javascript'> var canvas = document.getElementById('canvas_picker').getContext('2d'); // create an image object and get it's source var img = new Image(); img.src = 'img/006.jpg'; // image credit: http://pixabay.com/en/fishing-boat-denmark-beach-sea-49523/ // copy the image to the canvas $(img).load(function(){ canvas.drawImage(img,0,0); }); // http://www.javascripter.net/faq/rgbtohex.htm function rgbToHex(R,G,B) {return toHex(R)+toHex(G)+toHex(B)} function toHex(n) { n = parseInt(n,10); if (isNaN(n)) return '00'; n = Math.max(0,Math.min(n,255)); return '0123456789ABCDEF'.charAt((nn%16)/16) + '0123456789ABCDEF'.charAt(n%16); } $('#canvas_picker').click(function(event){ // getting user coordinates var x = event.pageX - this.offsetLeft; var y = event.pageY - this.offsetTop; // getting image data and RGB values var img_data = canvas.getImageData(x, y, 1, 1).data; var R = img_data[0]; var G = img_data[1]; var B = img_data[2]; var rgb = R + ',' + G + ',' + B; // convert RGB to HEX var hex = rgbToHex(R,G,B); // making the color the value of the input $('#rgb input').val(rgb); $('#hex input').val('#' + hex); }); </script><div class='col-xs-6 col-sm-4 col-md-3 col-lg-3'><div class='thumbnail'><a data-toggle='modal' data-target='#myModal3'><img src='img/007.jpg' alt='' width='300' height='240' /></a></div></div> <div class='modal fade' id='myModal3' tabindex='-1' role='dialog' aria-labelledby='myModalLabel' aria-hidden='true'> <div class='modal-dialog modal-lg'> <div class='modal-content'> <div class='modal-header'> <button type='button' class='close' data-dismiss='modal' aria-hidden='true'>&times;</button> <h4 class='modal-title' id='myModalLabel'>Название модали</h4> </div> <div class='modal-body'> <canvas width='600' height='440' id='canvas_picker'></canvas> <div id='hex'>HEX: <input type='text'></input></div> <div id='rgb'>RGB: <input type='text'></input></div> </div> <div class='modal-footer'> <button type='button' class='btn btn-default' data-dismiss='modal'>Закрыть</button> <button type='button' class='btn btn-primary'>Сохранить изменения</button> </div> </div> </div> </div><script type='text/javascript'> var canvas = document.getElementById('canvas_picker').getContext('2d'); // create an image object and get it's source var img = new Image(); img.src = 'img/007.jpg'; // image credit: http://pixabay.com/en/fishing-boat-denmark-beach-sea-49523/ // copy the image to the canvas $(img).load(function(){ canvas.drawImage(img,0,0); }); // http://www.javascripter.net/faq/rgbtohex.htm function rgbToHex(R,G,B) {return toHex(R)+toHex(G)+toHex(B)} function toHex(n) { n = parseInt(n,10); if (isNaN(n)) return '00'; n = Math.max(0,Math.min(n,255)); return '0123456789ABCDEF'.charAt((nn%16)/16) + '0123456789ABCDEF'.charAt(n%16); } $('#canvas_picker').click(function(event){ // getting user coordinates var x = event.pageX - this.offsetLeft; var y = event.pageY - this.offsetTop; // getting image data and RGB values var img_data = canvas.getImageData(x, y, 1, 1).data; var R = img_data[0]; var G = img_data[1]; var B = img_data[2]; var rgb = R + ',' + G + ',' + B; // convert RGB to HEX var hex = rgbToHex(R,G,B); // making the color the value of the input $('#rgb input').val(rgb); $('#hex input').val('#' + hex); }); </script><div class='col-xs-6 col-sm-4 col-md-3 col-lg-3'><div class='thumbnail'><a data-toggle='modal' data-target='#myModal4'><img src='img/008.jpg' alt='' width='300' height='240' /></a></div></div> <div class='modal fade' id='myModal4' tabindex='-1' role='dialog' aria-labelledby='myModalLabel' aria-hidden='true'> <div class='modal-dialog modal-lg'> <div class='modal-content'> <div class='modal-header'> <button type='button' class='close' data-dismiss='modal' aria-hidden='true'>&times;</button> <h4 class='modal-title' id='myModalLabel'>Название модали</h4> </div> <div class='modal-body'> <canvas width='600' height='440' id='canvas_picker'></canvas> <div id='hex'>HEX: <input type='text'></input></div> <div id='rgb'>RGB: <input type='text'></input></div> </div> <div class='modal-footer'> <button type='button' class='btn btn-default' data-dismiss='modal'>Закрыть</button> <button type='button' class='btn btn-primary'>Сохранить изменения</button> </div> </div> </div> </div><script type='text/javascript'> var canvas = document.getElementById('canvas_picker').getContext('2d'); // create an image object and get it's source var img = new Image(); img.src = 'img/008.jpg'; // image credit: http://pixabay.com/en/fishing-boat-denmark-beach-sea-49523/ // copy the image to the canvas $(img).load(function(){ canvas.drawImage(img,0,0); }); // http://www.javascripter.net/faq/rgbtohex.htm function rgbToHex(R,G,B) {return toHex(R)+toHex(G)+toHex(B)} function toHex(n) { n = parseInt(n,10); if (isNaN(n)) return '00'; n = Math.max(0,Math.min(n,255)); return '0123456789ABCDEF'.charAt((nn%16)/16) + '0123456789ABCDEF'.charAt(n%16); } $('#canvas_picker').click(function(event){ // getting user coordinates var x = event.pageX - this.offsetLeft; var y = event.pageY - this.offsetTop; // getting image data and RGB values var img_data = canvas.getImageData(x, y, 1, 1).data; var R = img_data[0]; var G = img_data[1]; var B = img_data[2]; var rgb = R + ',' + G + ',' + B; // convert RGB to HEX var hex = rgbToHex(R,G,B); // making the color the value of the input $('#rgb input').val(rgb); $('#hex input').val('#' + hex); });