我有一个带有一些内联JS的html文件，我想在用户提交表单时调用一个函数。
我的代码如下所示:
<!DOCTYPE html>
<html>
<head>
<title>Color Blast</title>
<meta charset="UTF-8">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
function hexToHSL(hex) {
var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
r = parseInt(result[1], 16);
g = parseInt(result[2], 16);
b = parseInt(result[3], 16);
r /= 255, g /= 255, b /= 255;
var max = Math.max(r, g, b), min = Math.min(r, g, b);
var h, s, l = (max + min) / 2;
if(max == min){
h = s = 0; // achromatic
}else{
var d = max - min;
s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
switch(max){
case r: h = (g - b) / d + (g < b ? 6 : 0); break;
case g: h = (b - r) / d + 2; break;
case b: h = (r - g) / d + 4; break;
}
h /= 6;
}
var HSL = new Object();
HSL['h']=h;
HSL['s']=s;
HSL['l']=l;
return HSL;
}
function myFunction() {
var color_code = document.getElementByClassName("color_code").value;
document.getElementsByClassName("light").style.backgroundColor = hexToHsl(color_code);
}
</script>
</head>
<body>
<form>
<input type="text" class="color_code" name="color_code" placeholder="Write a color code">
<input type="submit" value="Submit!" onclick="return myFunction();">
</form>
<div style="border-radius: 300px; width: 300px; height: 300px;"></div>
<div class="light" style="border-radius: 300px; width: 300px; height: 300px;"></div>
<div class="dark" style="border-radius: 300px; width: 300px; height: 300px;"></div>
</body>
</html>我的问题是，当我调用
myFunction()时，它以形式抛出 ReferenceError:未定义myFunction 所以我的问题是。为什么在
onckick上找不到我的函数？
最佳答案
您应该将脚本分为2个，一个包含src，另一个包含代码。在HTML5中将两个脚本都包含在一个脚本中是无效的。
您还存在其他错误，需要使用起始getElementsByClassName而不是getElementByClassName(复数)
<!DOCTYPE html>
<html>
<head>
<title>Color Blast</title>
<meta charset="UTF-8">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
function hexToHSL(hex) {
var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
r = parseInt(result[1], 16);
g = parseInt(result[2], 16);
b = parseInt(result[3], 16);
r /= 255, g /= 255, b /= 255;
var max = Math.max(r, g, b), min = Math.min(r, g, b);
var h, s, l = (max + min) / 2;
if(max == min){
h = s = 0; // achromatic
}else{
var d = max - min;
s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
switch(max){
case r: h = (g - b) / d + (g < b ? 6 : 0); break;
case g: h = (b - r) / d + 2; break;
case b: h = (r - g) / d + 4; break;
}
h /= 6;
}
var HSL = new Object();
HSL['h']=h;
HSL['s']=s;
HSL['l']=l;
return HSL;
}
function myFunction() {
var color_code = document.getElementByClassName("color_code").value;
document.getElementsByClassName("light").style.backgroundColor = hexToHsl(color_code);
}
</script>
</head>
<body>
<form>
<input type="text" class="color_code" name="color_code" placeholder="Write a color code">
<input type="submit" value="Submit!" onclick="return myFunction();">
</form>
<div style="border-radius: 300px; width: 300px; height: 300px;"></div>
<div class="light" style="border-radius: 300px; width: 300px; height: 300px;"></div>
<div class="dark" style="border-radius: 300px; width: 300px; height: 300px;"></div>
</body>
</html>关于javascript - 内联JS不以html形式调用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49529345/