时间戳

首页 > 解决方案 > 未知的 JavaScript 错误 - 函数只运行第一行代码

javascript - 未知的 JavaScript 错误 - 函数只运行第一行代码

问题描述

我不知道为什么，但该功能thumbsScroll只运行第一个警报，然后停止。它甚至没有显示第二个警报。

当拇指数少于 5 时，该函数应该隐藏“滚动”div。

可能是一个非常简单的问题，但实际上找不到解决方案，并且花了很多时间试图找出。有什么我没有得到的吗？

var mainImg = document.getElementById("main-image");

function thumb1() {
    mainImg.style.backgroundImage = "url('https://cml.sad.ukrd.com/image/394545.jpg')";
}
function thumb2() {
    mainImg.style.backgroundImage = "url('https://cml.sad.ukrd.com/image/572806.jpg')";
}
function thumb3() {
    mainImg.style.backgroundImage = "url('https://cml.sad.ukrd.com/image/486757.jpg')";
}
function thumb4() {
    mainImg.style.backgroundImage = "url('https://cml.sad.ukrd.com/image/612357.jpg')";
}
function thumb5() {
    mainImg.style.backgroundImage = "url('https://cml.sad.ukrd.com/image/612358.jpg')";
}
function thumb6() {
    mainImg.style.backgroundImage = "url('https://cml.sad.ukrd.com/image/661833.jpg')";
}

function thumbsScroll() {
  alert('test - function runs');
  var thumbs = document.getElementByClassName('image-thumb');
  var desktopThumbsScroll = document.getElementById('scroll-desktop');
  var mobileThumbsScroll = document.getElementById('scroll-mobile');
  alert('test alert 2 - doesnt work');
  if (thumbs.length < 5) {
    desktopThumbsScroll.style.display = 'none';
    mobileThumbsScroll.style.display = 'none';
    alert('if true')
  } else {alert('if false')}
}
thumbsScroll();
/* rollovers */
#main-image {
  background-image: url('https://cml.sad.ukrd.com/image/661835.jpg');
}
#thumb1 { background-image: url('https://cml.sad.ukrd.com/image/394545.jpg') }
#thumb2 { background-image: url('https://cml.sad.ukrd.com/image/572806.jpg') }
#thumb3 { background-image: url('https://cml.sad.ukrd.com/image/486757.jpg') }
#thumb4 { background-image: url('https://cml.sad.ukrd.com/image/612357.jpg') }
#thumb5 { background-image: url('https://cml.sad.ukrd.com/image/612358.jpg') }
#thumb6 { background-image: url('https://cml.sad.ukrd.com/image/661833.jpg') }
/* rollovers */




* {
  margin: 0;
  padding: 0;
  font-family: arial;
  line-height: 1.5em;
  box-sizing: border-box;
}
#images-and-hook-container {
  width: 100%;
  height: auto;
  float: left;
  background: cyan;
  display: flex; /* allows hook container to be full height */
}
#hook-container {
  background: blue;
  float: left;
  width: 40%;
  height: auto;
  padding: 3% 0 0 3%;
}
#images-wrap {
  width: 60%;
  height: auto;
  float: left;
  position: relative;
}
#scroll-desktop {
  position: absolute;
  bottom: -6%;
  right: 5%;
  font-size: 0.5em;
  text-transform: uppercase;
  opacity: 0.5;
}
#scroll-desktop > span { font-size: 1.5em }
#scroll-mobile { display: none }
#main-image {
  width: 79%;
  float: left;
  background-size: cover !important;
  background-position: center center !important;
  height: auto;
  padding-bottom: 53.666%;
}
#image-thumbs {
  width: 19%;
  height: auto;
  float: left;
  margin-left: 2%;
  overflow-y: auto !important;
  overflow-x: hidden;
  position: absolute;
  right: 0;
  height: 100%;
}
.image-thumb {
  margin-bottom: 6%;
  background-position: center center;
  background-size: cover;
  width: 100%;
  height: auto;
  padding-bottom: 66.666%;
}
.image-thumb:last-of-type { margin-bottom: 0 }


@media (max-width: 768px) {
  
  body { background: red }
  
  #images-and-hook-container {
    flex-direction: column;
  }
  
  #images-wrap {
  position: static;
    width: 100%;
}
  #scroll-desktop { display: none }
  #scroll-mobile {
    display: block;
    background: yellow;
    width: 100%;
    text-align: center;
    text-transform: uppercase;
    font-size: 0.5em;
  opacity: 0.5;
  }
  #scroll-mobile > span { font-size: 1.5em }
  #hook-container {
    width: 100%;
    padding: 3% 0;
  }
#main-image {
  width: 100%;
  padding-bottom: 66.666%;
  margin-bottom: 1%;
}
#image-thumbs {
  width: 100%;
  margin-left: 0;
  top: 0;
  left: 0;
    display: flex;
    flex-wrap: nowrap;
    overflow-x: scroll;
  overflow-y: hidden !important;
}
.image-thumb {
  float: left;
  margin-bottom: 6px;
    width: 24.333%;
    padding-bottom: 16.666%;
    flex: 0 0 24.333%;
  margin-left: 1%;
}
  .image-thumb:first-of-type { margin-left: 0 }

#aspect-ratio-wrap {
  float: left;
  width: 100%;
  height: auto;
  padding-bottom: 16.666%;
  background: orange;
  position: relative;
  overflow-x: scroll;
  overflow-y: hidden;
}
  
}

@media (max-width: 400px) {
  #scroll-mobile { font-size: 0.25em }
  #scroll-mobile > span { font-size: 1em }
}

@media (min-width: 1000px) {
  #scroll-desktop {
    bottom: -5%;
    right: 6%;
  }
}
<div id='images-and-hook-container'>

<div id="images-wrap">
  <div id="main-image"></div>
  <div id='aspect-ratio-wrap'>
    <div id="image-thumbs">
      <div class="image-thumb" id="thumb1" onmouseover="thumb1()"></div>
      <div class="image-thumb" id="thumb2" onmouseover="thumb2()"></div>
      <div class="image-thumb" id="thumb3" onmouseover="thumb3()"></div>
      <div class="image-thumb" id="thumb4" onmouseover="thumb4()"></div>
      <div class="image-thumb" id="thumb5" onmouseover="thumb5()"></div>
      <div class="image-thumb" id="thumb6" onmouseover="thumb6()"></div>
    </div>
  </div>
  <div id='scroll-desktop'>Scroll <span>&#8595;</span></div>
</div>
  <div id='scroll-mobile'>Scroll <span>&rarr;</span></div>
  
  <div id='hook-container'>
    hook container
  </div>
  
</div>

标签： javascripthtmlcss

解决方案

您绝对应该密切关注 JavaScript 控制台。当某些东西不起作用时，这是第一个查看的地方。控制台将尝试为您提供有关代码中错误的提示。

记住快捷键，windows上chrome中的控制台：ctrl-shift-j。

运行您提供的脚本时，控制台会告诉您它不理解 getElementByClassName：

javascript控制台

推荐阅读