修改

Question

我对编程非常陌生并且正在尝试将我的Javascript文件链接到html文件，因此Javascript在浏览器中可见。

这是我的html文件：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>FizzBuzz Challenge</title>
        <script type="text/javascript" src="Users/kimberlykost/Desktop/project/Fizzbuzz/JS/script.js"></script>
    </head>
</html>

这是我的Javascript文件：

for (var i = 1; i <= 100; i++) {
if (i % 15 === 0) {
    console.log("fizzbuzz");
    }
else if (i % 3 === 0) {
    console.log("fizz");
    }
else if (i % 5 === 0) {
    console.log("buzz");
    }
else {
console.log(i);
    }
}

当我在Web浏览器中查看索引文件时，没有任何内容显示。

给出的说明是：＆＃34;至少，您需要一个HTML文件。然后您可以将JavaScript代码包装在这样的脚本标签中:(三个重音符号，一个空格和三个更重要的重音符号）您可以使用console.log（）将输出显示到控制台。＆＃34;但我不确定我是否理解这一点。

如何让所有内容真正显示在浏览器中？

Answer 1

要使用console.log（）显示您要写入的控制台，您需要在浏览器中link打开它。

但首先，为了正确嵌入你的js文件，你应该确保你的文件路径设置正确（注意relative-path-to-current-folder）。

Answer 2

您的javascript和HTML目前的编写方式，您不会在浏览器的主要区域中看到任何内容。但是，您可以在控制台中查看fizz / buzz的结果。

在浏览器中

如果您想在浏览器中查看页面上的结果，则需要添加一个 <body> 标记到HTML文件（以及结束</body>标记），然后将新元素添加到DOM（文档对象模型），而不是将结果写入控制台。为此，我们需要将javascript文件中的console.log('')语句替换为将新的HTML元素附加到DOM的语句。一个简单的方法是从CDN（内容交付网络）中包含jQuery。首先将此脚本标记添加到您的页面： <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>在您的javascript代码之前添加该代码。

然后将以下代码添加到您的javascript文件中：

$(document).ready(function(){ 
    // your code goes in here...
 });

一旦你这样做，将你的javascript文件中的整个for语句剪切并粘贴到上面的函数中，它会显示'//你的代码就在这里'。然后使用jQuery append() method代替每个console.log（''）语句，如下所示：$('body').append('what ever you want on the page<br/>')并且应该这样做。

在控制台中

如果你只是想看到console.log在浏览器中打开你的html页面（比如谷歌浏览器），点击F12进入开发者工具。单击“控制台”菜单项，然后重新加载网页。您应该在控制台中看到结果。

Answer 3

而不是使用

console.log();

使用以下方法之一：

document.write('text');

（小心那个，如果在页面完成之前调用它，它将完全覆盖页面）

您还可以使用ID在HTML中创建div，例如＆＃39; write_box＆＃39;然后使用此

document.getElementById('write_box').innerHTML='text';

您可以使用

window.alert('text');

用于弹出窗口。

你也可以使用JQuery

$('selector').text('text');

修改

您还可以打开浏览器控制台以查看console.log调用。在Firefox上，快捷方式是

Ctrl+Shift+k

并在Internet Explorer上

F12

结束编辑

事实是，有很多可能的方法可以做到这一点，这个答案只列出了一些。希望有所帮助！

如何将外部Javascript（与console.log）链接到html？

3 个答案:

修改

结束编辑