我的脚本在jsFiddle中运行，但在我的浏览器中不运行吗？

Question

I'm new to programming in general. 我是编程新手。 I'm learning HTML/CSS/Javascript atm. 我正在学习HTML / CSS / Javascript atm。

I created a simple script that allow the user to change the font size of the paragraph element. 我创建了一个简单的脚本，允许用户更改段落元素的字体大小。

I tired my code is jsFiddle and it works fine, but when I copied it into an HTML document and started the page. 我很累我的代码是jsFiddle并且可以正常工作，但是当我将其复制到HTML文档中并启动页面时。 The HTML and CSS are functioning properly, but the problem is: JavaScript is not working. HTML和CSS正常运行，但是问题是：JavaScript无法正常工作。 Btw I'm using Chrome as a browser. 顺便说一句，我使用的是Chrome浏览器。

Is something wrong with my HTML document..? 我的HTML文档有问题吗？ I'm so confused! 我很混乱！

Here is the working jsFiddle: https://jsfiddle.net/o60gtvh8/ 这是工作中的jsFiddle： https ://jsfiddle.net/o60gtvh8/

My HTML file (Download link / Dropbox): https://www.dropbox.com/s/tl0npr5omefntv4/Font%20size%20changer.rar?dl=0 我的HTML文件（下载链接/ Dropbox）： https : //www.dropbox.com/s/tl0npr5omefntv4/Font%20size%20changer.rar? dl =0

HTML file code ( Copy of the code in the HTML file provided in the download link above ): HTML文件代码（以上下载链接中提供的HTML文件中代码的副本）：

<!doctype html>
<html>
<head>
<style>
h1 {
  color: blue;
  font-size: 25px;
  margin: 10px;
}

h2 {
  color: blue;
  font-size: 15px;
  margin: 10px;
}

p {
  margin: 10px;
}

a {
  margin: 10px;
  font-size: 15px;
  text-decoration: none;
  border: 1px solid grey;
  background-color: cyan;
  color: black;
  padding: 3px;
}
</style>

<script>
function sizeChanger(size) {
  return function() {
    document.body.style.fontSize = size + 'px';
  };
}
var size10 = sizeChanger(10);
var size20 = sizeChanger(20);
var size30 = sizeChanger(30);

document.getElementById('size-10px').onclick = size10;
document.getElementById('size-20px').onclick = size20;
document.getElementById('size-30px').onclick = size30;
</script>
</head>

<body>
<h1>Tiger</h1>
<h2>(From Wikipedia, the free encyclopedia)</h2>
<p>The tiger (Panthera tigris) is the largest cat species, most recognizable for
their pattern of dark vertical stripes on reddish-orange fur with a lighter underside.
The species is classified in the genus Panthera with the lion, leopard, jaguar, and snow leopard.
</p>
<a href="#" id="size-10px">Font size 10</a>
<a href="#" id="size-20px">Font size 20</a>
<a href="#" id="size-30px">Font size 30</a>
</body>
</html>

Answer 1

Move your JavaScript to the end of the page before the closing body element. 将您的JavaScript移到结束body元素之前的页面末尾。 As it stands now you're trying to access elements that don't exist yet. 目前，您正在尝试访问尚不存在的元素。 jsFiddle works because by default they wrap the JavaScript code in a window.onload event. jsFiddle之所以起作用，是因为默认情况下，它们将JavaScript代码包装在window.onload事件中。

 h1 { color: blue; font-size: 25px; margin: 10px; } h2 { color: blue; font-size: 15px; margin: 10px; } p { margin: 10px; } a { margin: 10px; font-size: 15px; text-decoration: none; border: 1px solid grey; background-color: cyan; color: black; padding: 3px; }

 <h1>Tiger</h1> <h2>(From Wikipedia, the free encyclopedia)</h2> <p>The tiger (Panthera tigris) is the largest cat species, most recognizable for their pattern of dark vertical stripes on reddish-orange fur with a lighter underside. The species is classified in the genus Panthera with the lion, leopard, jaguar, and snow leopard. </p> <a href="#" id="size-10px">Font size 10</a> <a href="#" id="size-20px">Font size 20</a> <a href="#" id="size-30px">Font size 30</a> <script> function sizeChanger(size) { return function() { document.body.style.fontSize = size + 'px'; }; } var size10 = sizeChanger(10); var size20 = sizeChanger(20); var size30 = sizeChanger(30); document.getElementById('size-10px').onclick = size10; document.getElementById('size-20px').onclick = size20; document.getElementById('size-30px').onclick = size30; </script>

So there's nothing really wrong with your code (although you should avoid legacy DOM notation like document.body.style.fontSize ) -- you're just executing it too early. 因此，您的代码并没有真正的问题（尽管您应该避免使用诸如document.body.style.fontSize类的传统DOM表示法）-您执行得太早了。

我的脚本在jsFiddle中运行，但在我的浏览器中不运行吗？

问题描述

1 个解决方案

解决方案1
2 已采纳 2017-08-18 19:15:06

我的脚本在jsFiddle中运行，但在我的浏览器中不运行吗？

问题描述

1 个解决方案

解决方案1 2 已采纳 2017-08-18 19:15:06

解决方案1
2 已采纳 2017-08-18 19:15:06