[英]JavaScript is Not Working in any of my Browsers
I am just learning JavaScript and for some reason this simple (Example 1 from Chapter One ) example is not working (Jon Duckett's JavaScript and Jquery book) in any of my browsers: FireFox, IE, and Chrome. 我只是在学习JavaScript,由于某种原因,这个简单的示例( 第一章的示例1)在我的任何浏览器(FireFox,IE和Chrome)中都无法正常工作(乔恩·达克特的JavaScript和Jquery书)。 I made sure JavaScript is turned on.
我确保打开了JavaScript。 I also put noscript tags in my index.html file to make sure I had JavaScript on.
我还将noscript标记放入index.html文件中,以确保启用了JavaScript。 My jsFiddle works perfectly, but nothing in my browsers.
我的jsFiddle完美运行,但是在我的浏览器中什么都没有。 Here is my jsFiddle with everything I have in my Atom editor.
这是我的jsFiddle,其中包含我在Atom编辑器中拥有的所有内容。 My links are correct because I copied the full path and then pasted it into the src.
我的链接是正确的,因为我复制了完整路径,然后将其粘贴到src中。 I then deleted all the C:\\users....... until I got into the folder with all of the files to end up with what is in the jsFiddle.
然后删除所有C:\\ users .......,直到进入所有文件的文件夹,最终显示jsFiddle中的内容。
html: 的HTML:
<!doctype html>
<html lang="en">
<head>
<meta charset="etf-8" />
<title>Greeting JavaScript</title>
<link rel="stylesheet" href="css/styles.css">
<script src="scripts/greeting.js"></script>
</head>
<body>
<noscript>Your Browser Does Not Support JavaScript. Please Enable It.</noscript>
<section>
<div id="header">
<h1>Constructive & Co.</h1>
</div>
<h3 id="greeting"></h3>
<p>For all orders and inquiries please call <em>555-3344</em></p>
</section>
</body>
</html>
javascript: javascript:
var today = new Date();
var hourNow = today.getHours();
var greeting;
if (hourNow > 18) {
greeting = 'Good evening!';
} else if (hourNow > 12) {
greeting = 'Good afternoon!';
} else if (hourNow > 0) {
greeting = 'Good morning!';
} else {
greeting = 'Welcome!';
}
document.getElementById("greeting").innerHTML = greeting;
css: CSS:
@import url(http://fonts.googleapis.com/css?family=Open+Sans:800italic);
body {
font-family: "Courier New", Courier, monospace;
/*background: url("../images/constructive-backdrop.jpg") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;*/
background: #a18957;
margin: 0px;
padding: 0px;
text-align: center;
}
section {
margin-top: 20px;
margin-left: 20px;
height: 500px;
width: 400px;
background: #eee;
border: 1px solid #292929;
}
#header {
height: 200px;
margin: 10px;
background: rgba(227, 192, 186, 0.78);
}
h1 {
margin: 0px;
position: relative;
top: 45%;
}
h3 {
height: 100px;
margin: 10px;
background: red;
}
p {
margin: 10px;
height: 100px;
}
Thank You 谢谢
You want to add the script
tag at the end of your html. 您要在html的末尾添加
script
标签。 The element greeting
doesn't exist, when you are executing it. 执行时,元素
greeting
不存在。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Greeting JavaScript</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<noscript>Your Browser Does Not Support JavaScript. Please Enable It.</noscript>
<section>
<div id="header">
<h1>Constructive & Co.</h1>
</div>
<h3 id="greeting"></h3>
<p>For all orders and inquiries please call <em>555-3344</em></p>
</section>
<script src="scripts/greeting.js"></script>
</body>
</html>
Or you leave it in the head and wrap the script into 或者您将其放在头部,然后将脚本包装到
addEventListener("readystatechange", function () {
if (document.readyState === "interactive") {
var today = new Date();
var hourNow = today.getHours();
var greeting;
if (hourNow > 18) {
greeting = 'Good evening!';
} else if (hourNow > 12) {
greeting = 'Good afternoon!';
} else if (hourNow > 0) {
greeting = 'Good morning!';
} else {
greeting = 'Welcome!';
}
document.getElementById("greeting").innerHTML = greeting;
}
}, false);
It is wonderful you use document.getElementById
, instead of document.write
! 使用
document.getElementById
而不是document.write
真是太好了!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.