내 브라우저에서 JavaScript가 작동하지 않습니다.

JavaScript를 배우는 중입니다. 몇 가지 이유로이 브라우저 (예 : Chapter One)에서 예제가 작동하지 않습니다 (Jon Duckett의 JavaScript 및 Jquery 서적). FireFox, IE , Chrome. 자바 스크립트가 켜져 있는지 확인했습니다. 또한 index.html 파일에 noscript 태그를 넣어 JavaScript를 켜 놓았는지 확인했습니다. jsFiddle은 완벽하게 작동하지만 내 브라우저에는 아무것도 없습니다. 여기 내 Atom 편집기에있는 모든 것과 내 jsFiddle이 있습니다. 전체 경로를 복사 한 다음 src에 붙여 넣기 때문에 링크가 정확합니다. 그런 다음 jsFiddle에있는 모든 파일로 끝날 때까지 모든 C : \ users .......를 삭제했습니다.내 브라우저에서 JavaScript가 작동하지 않습니다.

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 &amp; Co.</h1> 
</div> 
<h3 id="greeting"></h3> 
<p>For all orders and inquiries please call <em>555-3344</em></p> 
</section> 
</body> 
</html>

자바 스크립트 :

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 :

@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; 
}

당신은 당신의 HTML의 끝에서 script 태그를 추가 할 당신에게

출처

2015-01-04 Arin_nirA

피딩을하더라도 코드를 여기에 게시해야합니다 (어디서나 읽기 쉽습니다). – Pointy

브라우저에서 JSFiddle이 실행되므로 자바 스크립트가 브라우저에서 작동합니다 ..... –

html 헤드에서 "script"로 "script"의 철자가 잘못되었습니다. – Matt

감사 . 요소를 실행하면 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 &amp; 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>

또는 당신은 머리에두고 당신이 document.getElementById을 사용하는 멋진

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);

에 스크립트를 감싸는 대신 document.write!

출처

2015-01-04 00:59:24 metadings

이것은 그랬다! 대단히 고마워! 스크립트를 머리에 넣을 때 이것이 일어나는 이유를 알고 있습니까? –

스크립트가 실행될 때 요소가 존재하지 않기 때문입니다. 구문 분석이 끝나면 스크립트를 실행하여'addEventListener ("readystatechange", function() {if (document.readyState === "interactive") {/ ** /}}, false); (/ ** /'참조) – metadings

당신이 한 말을보기까지 잠시 시간이 걸렸지 만 지금은 이해할 수 있습니다. HTML이로드되기 전에 스크립트가 실행되므로 맨 아래에 스크립트를 배치하면 html을로드 한 다음 스크립트를로드 할 수 있습니다. 도와 주셔서 감사합니다 –

내 브라우저에서 JavaScript가 작동하지 않습니다.

답변

관련 문제