Javascript外部文件不作为例外工作_Javascript_Html

Javascript外部文件不作为例外工作

javascript html

Javascript外部文件不作为例外工作,javascript,html,Javascript,Html,我一直在尝试制作一个文章过滤器，目前我似乎只能让它与内部javascript一起工作，但我需要将其作为外部javascript 我该怎么做当我将javascript添加到外部文件时，它不会直接显示所有内容，并且活动按钮也不起作用。我想这是因为我并没有在javascript中做我应该做的一切 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, i

我一直在尝试制作一个文章过滤器，目前我似乎只能让它与内部javascript一起工作，但我需要将其作为外部javascript

我该怎么做

当我将javascript添加到外部文件时，它不会直接显示所有内容，并且活动按钮也不起作用。我想这是因为我并没有在javascript中做我应该做的一切

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
  <script type="text/javascript" src="script.js"></script>  
</head>
<body>

<!-- MAIN (Center website) -->
<div class="main">

<div id="myBtnContainer">
  <button class="btn active" onclick="filterSelection('all')"> Show all</button>
  <button class="btn" onclick="filterSelection('art')"> Art</button>
  <button class="btn" onclick="filterSelection('design')"> Design</button>
  <button class="btn" onclick="filterSelection('photography')"> Photography</button>
</div>

<!-- Portfolio Gallery Grid -->
<div class="row">
  <div class="column art">
    <div class="content">
      <img src="" alt="" style="width:100%">
      <h4>Art</h4>
      <p>Lorem ipsum dolor..</p>
    </div>
  </div>
  <div class="column photography">
    <div class="content">
    <img src="" alt="" style="width:100%">
      <h4>Photography</h4>
      <p>Lorem ipsum dolor..</p>
    </div>
  </div>
  <div class="column art">
    <div class="content">
    <img src="" alt="" style="width:100%">
      <h4>Art</h4>
      <p>Lorem ipsum dolor..</p>
    </div>
  </div>

  <div class="column design">
    <div class="content">
      <img src="" alt="" style="width:100%">
      <h4>Design</h4>
      <p>Lorem ipsum dolor..</p>
    </div>
  </div>
  <div class="column art">
    <div class="content">
    <img src="" alt="" style="width:100%">
      <h4>Art</h4>
      <p>Lorem ipsum dolor..</p>
    </div>
  </div>
  <div class="column art">
    <div class="content">
    <img src="" alt="" style="width:100%">
      <h4>Art</h4>
      <p>Lorem ipsum dolor..</p>
    </div>
  </div>
  <div class="column design">
    <div class="content">
    <img src="" alt="" style="width:100%">
      <h4>Design</h4>
      <p>Lorem ipsum dolor..</p>
    </div>
  </div>
  <div class="column photography">
    <div class="content">
      <img src="" alt="" style="width:100%">
      <h4>Photography</h4>
      <p>Lorem ipsum dolor..</p>
    </div>
  </div>
  <div class="column photography">
    <div class="content">
    <img src="" alt="" style="width:100%">
      <h4>Photography</h4>
      <p>Lorem ipsum dolor..</p>
    </div>
  </div>
  <div class="column art">
    <div class="content">
    <img src="" alt="" style="width:100%">
      <h4>Art</h4>
      <p>Lorem ipsum dolor..</p>
    </div>
  </div>
    <div class="column design">
    <div class="content">
    <img src="" alt="" style="width:100%">
      <h4>Design</h4>
      <p>Lorem ipsum dolor..</p>
    </div>
  </div>
 <div class="column art">
    <div class="content">
    <img src="" alt="" style="width:100%">
      <h4>Art</h4>
      <p>Lorem ipsum dolor..</p>
    </div>
  </div> 
    <div class="column photography">
    <div class="content">
    <img src="" alt="" style="width:100%">
      <h4>Photography</h4>
      <p>Lorem ipsum dolor..</p>
    </div>
  </div> 
<!-- END GRID -->
</div>

<!-- END MAIN -->
</div>

<script>
filterSelection("all")
function filterSelection(c) {
  var x, i;
  x = document.getElementsByClassName("column");
  if (c == "all") c = "";
  for (i = 0; i < x.length; i++) {
    w3RemoveClass(x[i], "show");
    if (x[i].className.indexOf(c) > -1) w3AddClass(x[i], "show");
  }
}

function w3AddClass(element, name) {
  var i, arr1, arr2;
  arr1 = element.className.split(" ");
  arr2 = name.split(" ");
  for (i = 0; i < arr2.length; i++) {
    if (arr1.indexOf(arr2[i]) == -1) {element.className += " " + arr2[i];}
  }
}

function w3RemoveClass(element, name) {
  var i, arr1, arr2;
  arr1 = element.className.split(" ");
  arr2 = name.split(" ");
  for (i = 0; i < arr2.length; i++) {
    while (arr1.indexOf(arr2[i]) > -1) {
      arr1.splice(arr1.indexOf(arr2[i]), 1);     
    }
  }
  element.className = arr1.join(" ");
}


// Add active class to the current button (highlight it)
var btnContainer = document.getElementById("myBtnContainer");
var btns = btnContainer.getElementsByClassName("btn");
for (var i = 0; i < btns.length; i++) {
  btns[i].addEventListener("click", function(){
    var current = document.getElementsByClassName("active");
    current[0].className = current[0].className.replace(" active", "");
    this.className += " active";
  });
}
</script>

</body>
</html>


全部展示
艺术
设计
摄影
艺术
Lorem ipsum dolor
摄影
Lorem ipsum dolor
艺术
Lorem ipsum dolor
设计
Lorem ipsum dolor
艺术
Lorem ipsum dolor
艺术
Lorem ipsum dolor
设计
Lorem ipsum dolor
摄影
Lorem ipsum dolor
摄影
Lorem ipsum dolor
艺术
Lorem ipsum dolor
设计
Lorem ipsum dolor
艺术
Lorem ipsum dolor
摄影
Lorem ipsum dolor
过滤器选择（“全部”）
函数过滤器选择（c）{
变量x，i；
x=document.getElementsByClassName（“列”）；
如果（c==“全部”）c=“”；
对于（i=0；i-1）w3AddClass（x[i]，“show”）；
}
}
函数w3AddClass（元素、名称）{
变量i，arr1，arr2；
arr1=element.className.split（“”）；
arr2=name.split（“”）；
对于（i=0；i-1）{
arr1.拼接（arr1.indexOf（arr2[i]），1）；
}
}
element.className=arr1.join（“”）；
}
//将活动类添加到当前按钮（高亮显示）
var btnContainer=document.getElementById（“myBtnContainer”）；
var btns=btnContainer.getElementsByClassName（“btn”）；
对于（变量i=0；i

将
放在主体的底部，而不是头部

您正在加载HTML元素之前引用它们
或者，您可以在使用窗口加载页面后执行脚本。onload
如果src路径正确，则脚本代码执行时出错。带有内部脚本的代码正在执行，因为脚本代码是在加载DOM元素之后执行的
由于您在head部分中引用外部文件，因此引用的元素不可访问，因为在执行脚本代码时它们还不在DOM中
在正文底部添加外部文件链接：
。。。。。

这将确保加载DOM后脚本代码的执行。非常感谢，我已将脚本移到底部，现在它可以工作了。请检查浏览器控制台中是否有错误，并检查外部文件的路径是否正确
  .....
  <script type="text/javascript" src="script.js"></script>
</body>