用于检索数据的html页面中的JS文件数组javascript

我有一个包含两列数据的js文件。第1列有颜色的十六进制代码，第2列有（该代码的）颜色名称：

在我的html网页中，我有一个颜色选择器，可以生成任何单击颜色的十六进制值

我希望能够使用该十六进制数在col1中查找外部js文件，并从col2返回颜色名称

我在网络方面的经验是有限的，谷歌和试错都失败了

有人能举例说明如何做到这一点吗

<div class="paletteandbox">
    <div class="palette">
     <canvas width="234" height="199" id="canvas_picker"></canvas> </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 = 'picker3hexagon.gif';
    // copy the image to the canvas
                $(img).load(function(){
                canvas.drawImage(img,0,0);
                }); <!-- OK -->

    // 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((n-n%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;<!-- OK -->
      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);
      $("#path3349").css("fill", "#" + hex); 
      $('#hex').val('#' + hex);   
    });
</script>
</div>
<!-- palette-->
<div class="box">
<script src="colourpicker.js">
var colorhex = hex
var colorname = mycolors[colorhex];
</script> 
     Selected Background Colour:
     <div id="colorname"><input type="text" readonly="readonly" /></input></div>
     Background Colour Codes:
     <div id="hex"><input type="text" readonly="readonly" /></input>HEX</div>
     <div id="rgb"><input type="text" readonly="readonly" /></input>RGB</div>
</div> <!-- box-->
</div> <!-- palette and box-->

var canvas=document.getElementById（'canvas_picker'）.getContext（'2d'）；
//创建图像对象并获取其源
var img=新图像（）；
img.src='picker3hexagon.gif'；
//将图像复制到画布
$（img）.加载（函数（）{
canvas.drawImage（img，0,0）；
}); 
// http://www.javascripter.net/faq/rgbtohex.htm
函数rgbToHex（R，G，B）{returntohex（R）+toHex（G）+toHex（B）}
函数toHex（n）{
n=parseInt（n，10）；
如果（isNaN（n））返回“00”；
n=Math.max（0，Math.min（n，255））；
返回“0123456789ABCDEF”.charAt（（n-n%16）/16）+“0123456789ABCDEF”.charAt（n%16）；
}
$（“#画布_选择器”）。单击（函数（事件）{
//获取用户坐标
var x=event.pageX-this.offsetLeft；
var y=event.pageY-this.offsetTop；
//获取图像数据和RGB值
var img_data=canvas.getImageData（x，y，1，1）.data；
var R=img_数据[0]；
var G=img_数据[1]；
VarB=img_数据[2]；VarRGB=R+'、'+G+'、'+B；
//将RGB转换为十六进制
var hex=rgbToHex（R，G，B）；
//使颜色成为输入的值
$（'#rgb输入'）.val（rgb）；
$（'#十六进制输入'）.val（'#'+hex）；
$（“#路径3349”）.css（“填充”、“#”+hex）；
$（'#hex'）.val（'#'+hex）；
});
var colorhex=十六进制
var colorname=mycolors[colorhex]；
选定的背景颜色：
背景颜色代码：
十六进制
RGB

由于您的代码不起作用，我对它做了一些修改，但它会让您了解如何从对象中查找并使用它

• 您需要的部分是： var englishColorName=mycolors[key]

其中key是十六进制值。所以你可以用那个十六进制值在键处查看你的对象

您的对象是在外部js文件中定义的，这一事实与此无关，只要它是在代码运行之前加载的

var mycolors={
“000000”：“黑色”，
“000080”：“海军蓝”，
“0000C8”：“深蓝色”，
“0000FF”：“蓝色”，
“000741”：“Stratos”，
“001B1C”：“沼泽”
}
for（mycolors中的var键）{
//控制台日志（“键：”，键）；
//log（“Color:，mycolors[key]）；
$（“#颜色选择”）
.append（$（“”）
.attr（“值”，键）
.text（mycolors[key]）；
}
var colorhex=十六进制
var colorname=mycolors[colorhex]；
// http://www.javascripter.net/faq/rgbtohex.htm
函数rgbToHex（R、G、B）{
返回到HEX（R）+toHex（G）+toHex（B）
}
函数转换十六进制（十六进制）{
十六进制=十六进制。替换（'#'，''）；
r=parseInt（十六进制子串（0,2），16）；
g=parseInt（十六进制子串（2,4），16）；
b=parseInt（十六进制子串（4,6），16）；
结果='rgba（'+r+'、'+g+'、'+b+'）；
返回结果；
}
函数toHex（n）{
n=parseInt（n，10）；
如果（isNaN（n））返回“00”；
n=Math.max（0，Math.min（n，255））；
返回“0123456789ABCDEF”.charAt（（n-n%16）/16）+“0123456789ABCDEF”.charAt（n%16）；
}
$（“#颜色选择”）.change（函数（）{
var hex=$（this.val（）；
var rgb=转换十六进制（十六进制）；
$（'#十六进制输入'）.val（'#'+hex）；
$（'#rgb输入'）.val（rgb）；
});
/*
$（“#画布_选择器”）。单击（函数（事件）{
//获取用户坐标
var x=event.pageX-this.offsetLeft；
var y=event.pageY-this.offsetTop；
//获取图像数据和RGB值
var img_data=canvas.getImageData（x，y，1，1）.data；
var R=img_数据[0]；
var G=img_数据[1]；
var B=img_数据[2]；
var rgb=R+'，'+G+'，'+B；
//将RGB转换为十六进制
var hex=rgbToHex（R，G，B）；
//使颜色成为输入的值
$（'#rgb输入'）.val（rgb）；
$（'#十六进制输入'）.val（'#'+hex）；
$（“#路径3349”）.css（“填充”、“#”+hex）；
$（'#hex'）.val（'#'+hex）；
});
*/

选定的背景颜色：
--选择一种颜色--



转换后的背景色代码：
十六进制：
RGB：

<div class="paletteandbox">
    <div class="palette">
     <canvas width="234" height="199" id="canvas_picker"></canvas> </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 = 'picker3hexagon.gif';
    // copy the image to the canvas
                $(img).load(function(){
                canvas.drawImage(img,0,0);
                }); <!-- OK -->

    // 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((n-n%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;<!-- OK -->
      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);
      $("#path3349").css("fill", "#" + hex); 
      $('#hex').val('#' + hex);   
    });
</script>
</div>
<!-- palette-->
<div class="box">
<script src="colourpicker.js">
var colorhex = hex
var colorname = mycolors[colorhex];
</script> 
     Selected Background Colour:
     <div id="colorname"><input type="text" readonly="readonly" /></input></div>
     Background Colour Codes:
     <div id="hex"><input type="text" readonly="readonly" /></input>HEX</div>
     <div id="rgb"><input type="text" readonly="readonly" /></input>RGB</div>
</div> <!-- box-->
</div> <!-- palette and box-->