褪色的JavaScript消息循环

我被卡住了，JavaScript新手。
在HTML中，我可以得到一个循环来显示数组中的连续消息。我试图让信息淡入，而不是突然出现。我可以用下面的代码单独执行这两种效果，但我似乎无法将它们结合起来并使其工作。感谢任何评论/帮助。褪色的JavaScript消息循环

<!DOCTYPE html> 
<html> 
<head> 
    <title></title> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
    <style type="text/css"> 
     #messaging{ 
      font-size: 35pt; 
     } 
    </style> 
    <script type ="text/javascript" > 
     var phrases = ["message1", 
      "message2", 
      "message3", 
      "message4"]; 
     var msgCycleRate = 3000; 
     var text; 
     function get(id0) { 
      return document.getElementById(id0); 
     } 
     function cycleMsgs(id1) { 
      if ('undefined' === typeof id1){ 
       id1 = -1; 
      } 
      id1 = (id1 + 1)% phrases.length; 
      start(text = get('messaging').innerHTML = phrases[id1]); //line 37 here 
      setTimeout('cycleMsgs(' + id1 + ');', msgCycleRate); 
     } 
     function doMsgs() { 
      setTimeout('cycleMsgs();', 0); 
     } 
     var opacity = 0.0; 
     var alpha= 0; 

     function start(textM) { 
      textM.style.filter="alpha(opacity = " + alpha +")"; 
      textM.style.opacity=opacity; 
      setTimeout("fadeIn(textM)",50); 
     } 

     function fadeIn(textM) { 
      opacity= opacity +0.1; 
      alpha=parseInt(opacity*100); 
      textM.style.opacity=opacity; 
      textM.style.filter="alpha(opacity = " + alpha +")"; 
      if (opacity < 1.0) { 
       setTimeout("fadeIn(textM)",50); 
      } 
     } 
     if(window.addEventListener) { 
      window.addEventListener('load', doMsgs, false); // non-IE 
     } 
     else { 
      window.attachEvent('onload', doMsgs); // IE 
     } 
    </script> 
</head> 
<body> 
    <p id ="messaging">/p> 
</body>

我运行代码，并得到：

SCRIPT5007：无法设置的未定义或为空引用属性 '过滤'，行37字符17

什么我没有看到这里？再次感谢。

来源

2013-09-27 PhilipBert

请哦，请尝试jQuery的这一类东西 – mplungjan

您正在将HTML传递给start函数，而不是DOM元素本身。如果你分手了线37，问题就变得更加清晰：

start(get('messaging'));

来源

2013-09-27 16:04:23

：

get('messaging').innerHTML = phrases[id1]; text = get('messaging').innerHTML; start(text);

您可以通过DOM元素传递给start，而不是解决这个问题完美，解决方案很好。对于查看此代码的其他人，必须在循环调用start（）之前重置不透明度和alpha变量，否则淡入不会实现。 – PhilipBert

褪色的JavaScript消息循环

回答

相关问题