不执行脚本答案

【问题标题】：Not Executing Scripts不执行脚本
【发布时间】：2017-11-09 23:29:11
【问题描述】：

晚上好，我正在尝试创建允许用户将鼠标悬停在拇指上的功能，放大的图像将显示在占位符中。我还创建了使用数组在横幅广告中旋转的函数。我的问题是我无法执行任何脚本，我不明白为什么，因为我是 JS 的新手。有什么帮助吗？

<script type = "text/javascript">

window.onload = rotate;


var banners = ["banner1.gif","banner2.gif","banner3.gif","banner4.gif"];
for (var i =0; i<banners.length; i++) {
    banners[i] = new Image();
}

    function rotate() {
     var i;
     if (i == banners.length) {
        i = 0;
     }
     document.getElementById("banner").src = banners[i];

     setTimeout(rotate, 3 * 1000);
    }
}



var fullSize = ["FrenchQuarter","GoldenGateBridge", "NazarethBay", "TheAlamo"];
//declare each as an image object
//declare each one of the array elemant as an image object
for (var i =0; i<fullSize.length; i++) {
    fullSize[i] = new Image(279,373);
}

var width = 0;
var speed = 3;
var interval = null;

window.addEventListener("load", start, false);

function start() {

 document.getElementById("smallfq").onmouseover=function() {displayFull(0)};
 document.getElementById("smallggb").onmouseover=function() {displayFull(1)};
 document.getElementById("smallNaz").onmouseover=function() {displayFull(2)};
 document.getElementById("smallAlamo").onmouseover=function() {displayFull(3)};

}

function displayFull(n) {
    document.getElementByid("placeholder").setAttribute("style", "width:0px; height:0px;");
    width=0;
    document.getElementByid("placeholder").src=fullSize[n].src; 
}

对应的HTML如下：

<!DOCTYPE html>

<html>
 <head>
 <meta charset = "utf-8">
  <title>Assignment 3</title>
  <link rel = "stylesheet" type = "text/css" href = "style.css">
  <script type ="text/javascript" src = "Assignment3.js"></script>
 </head>

 <body>

 <div id = "bannerDiv">
   <img src = "banner3.gif" id = "banner" alt = "banner" >
  </div>
  <br>

  <div id = "placeholderdiv">
  <br>
   <img id = "placeholder" src = "placeholder.jpg" alt = "placeholder">
  <p>Move your Mouse over one of the icons to see and enlarged image</p>
  <br>
  </div>
  <br>

  <div id = "thumbs">
   <img src = "FrenchQuarter_small.jpg" id = "smallfq" alt = "smallFrenchQuarter">
   <img src = "GoldenGateBridge_small.jpg" id = "smallggb" alt = "smallggb"  >
   <img src = "NazarethBay_small.jpg" id = "smallNaz" alt = "smallNaz" >
   <img src = "TheAlamo_small.jpg" id = "smallAlamo" alt = "SmallAlamo" onmouseover ="function() {displayFull(3)}" >
  </div>
  <br>

 </body>

 </html>

【问题讨论】：

标签： javascript user-defined-functions

【解决方案1】：

我认为存在一些问题。在您的旋转功能之后，您有一个额外的“}”。要将鼠标悬停事件附加到图像，“onmouseover”是不正确的。相反，请使用addEventListener('mouseover', function, false);

这与你所拥有的有点不同，但试试这个：

为“thumbs”div 中的所有图像添加一个具有相同值的类属性（例如，对 thumbs div 中的每个 img 执行类似class="thumbImage" 的操作）。所以它看起来像这样：

<div id="thumbs">
  <img src="FrenchQuarter_small.jpg" class="thumbImage" id="smallfq" alt="smallFrenchQuarter">
  <img src="GoldenGateBridge_small.jpg" class="thumbImage" id="smallggb" alt="smallggb">
  <img src="NazarethBay_small.jpg" class="thumbImage" id="smallNaz" alt="smallNaz">
  <img src="TheAlamo_small.jpg" class="thumbImage" id="smallAlamo" alt="SmallAlamo">
</div>

然后，您可以像这样将事件处理程序附加到每个图像：

function start() {
  // This gets a collection of all the elements with the class "thumbImage"
  var classname = document.getElementsByClassName("thumbImage");

  // Now loop over ever element in the collection and attach the event to it
  for (var i = 0; i < classname.length; i++) {
    classname[i].addEventListener('mouseover', displayFull, false);
  }
}

然后你只需要稍微调整一下displayFull 函数。在该函数中，您可以通过执行n.currentTarget 来获得鼠标悬停的图像。所以：

function displayFull(n) {
  alert(n.currentTarget.id);
}

这会提醒属于鼠标悬停图像的 id。

这是一个展示所有这些的小提琴：https://jsfiddle.net/b1Lr3a4y/1/

【讨论】：