JavaScript错误未捕获引用错误:未在HTMLSpanElement.onclick中定义setEven

我是JavaScript的新手，我一直在阅读这个网站上的所有内容来解决这个问题。如果我把所有的代码都放在.htm文件中，我就能让这些代码正常工作。如果我使用.js文件，它就不起作用。我使用了不同的jquery文件使其工作。我已经把script.js脚本引用放在了头、正文的开头和正文的末尾。我正在努力让这段代码发挥作用，因为它是我书中的一个例子，我认为它将对我后面的章节有所帮助。我想使用书面命令，这样我就能理解发生了什么。我不知道为什么这不会像书面的那样起作用。请注意不同尝试使其发挥作用的评论。.js文件中的函数$(文档(.ready(函数($(｛…后来添加，试图解决问题。

我们将不胜感激。

.htm文件

<!DOCTYPE html >
<html >  <!--type="text/javascript" -->
<head>
<meta charset="utf-8"/>

<title>Hour 7 Example 2</title>
<!-- <script type="text/javascript" scr="http://code.jquery.com/jquery-1.7.2.min.js"></script>   -->
<!--<script src="https://code.jquery.com/jquery-3.0.0.js"></script> -->
<!--<script src="https://code.jquery.com/jquery-migrate-3.3.2.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> -->
<script type="text/javascript" scr="jquery.min.js"></script> 
<script type="text/javascript" scr="script.js"></script>

<link rel="Stylesheet" type="text/css" href="css/Hour0702.css" />


<!--<   <script type="text/javascript">
$(function() {
$("p").text("The DOM is now loaded and can be manipulated.");
});

</script> -->

</head>
<body>

<span onclick="setEven()">Even</span>
<span onclick="setOdd()">Odd</span>
<span onclick="setFirst4()">First 4</span>


<p class="label">Planets</p>
<ul>
<li>Mercury</li>
<li>Venus</li>
<li>Earth</li>
<li>Mars</li>
<li>Jupiter</li>
<li>Saturn</li>
<li>Uranus</li>
<li>Neptune</li>
</ul>


</body>
</html>

.js文件

$(document).ready(function($) {
function setEven() {
$("li, span").css("font-weight", "");
var $evenItems = $("li:even");
$evenItems.css("font-weight", "bold");
$("span:contains(Even)").css("font-weight", "bold");
$(".label").html("Even");
}
function setOdd() {
$("li, span").css("font-weight", "");
var $oddItems = $("li:odd");
$oddItems.css("font-weight", "bold");
$("span:contains(Odd)").css("font-weight", "bold");
$(".label").html("Odd");
}
function setFirst4() {
$("li, span").css("font-weight", "");
var $First4 = $("li:lt(4)");
$First4.css("font-weight", "bold");
$("span:contains('First 4')").css("font-weight", "bold");
$(".label").html("First 4");
}
});

你需要做两件事，第一件事是src的拼写错误，你在<script>内部写了scr，第二件事你需要在document.ready()外部写javascript代码

您的HTML文件

<!DOCTYPE html >
<html >  <!--type="text/javascript" -->
<head>
<meta charset="utf-8"/>

<title>Hour 7 Example 2</title>
<script type="text/javascript" src="jquery.min.js"></script> 
<script type="text/javascript" src="script.js"></script>

<link rel="Stylesheet" type="text/css" href="css/Hour0702.css" />

</head>
<body>

<span onclick="setEven()">Even</span>
<span onclick="setOdd()">Odd</span>
<span onclick="setFirst4()">First 4</span>


<p class="label">Planets</p>
<ul>
<li>Mercury</li>
<li>Venus</li>
<li>Earth</li>
<li>Mars</li>
<li>Jupiter</li>
<li>Saturn</li>
<li>Uranus</li>
<li>Neptune</li>
</ul>


</body>
</html>

你的script.js

function setEven() {
$("li, span").css("font-weight", "");
var $evenItems = $("li:even");
$evenItems.css("font-weight", "bold");
$("span:contains(Even)").css("font-weight", "bold");
$(".label").html("Even");
}
function setOdd() {
$("li, span").css("font-weight", "");
var $oddItems = $("li:odd");
$oddItems.css("font-weight", "bold");
$("span:contains(Odd)").css("font-weight", "bold");
$(".label").html("Odd");
}
function setFirst4() {
$("li, span").css("font-weight", "");
var $First4 = $("li:lt(4)");
$First4.css("font-weight", "bold");
$("span:contains('First 4')").css("font-weight", "bold");
$(".label").html("First 4");
}

您应该查看函数定义的范围setEven、setOdd和setFirst4如果您试图全局访问它们，这些函数不是全局定义的

这是更新后的脚本

function setEven() {
$("li, span").css("font-weight", "");
var $evenItems = $("li:even");
$evenItems.css("font-weight", "bold");
$("span:contains(Even)").css("font-weight", "bold");
$(".label").html("Even");
}
function setOdd() {
$("li, span").css("font-weight", "");
var $oddItems = $("li:odd");
$oddItems.css("font-weight", "bold");
$("span:contains(Odd)").css("font-weight", "bold");
$(".label").html("Odd");
}
function setFirst4() {
$("li, span").css("font-weight", "");
var $First4 = $("li:lt(4)");
$First4.css("font-weight", "bold");
$("span:contains('First 4')").css("font-weight", "bold");
$(".label").html("First 4");
}

只需移除${document}.ready事件处理程序并全局定义它们。

相关内容

最新更新

热门标签：